scoreboard

ogoshen · Nov 21, 2012 · cdc7b5e · cdc7b5e
1 parent f4e023c
commit cdc7b5e
Show file tree

Hide file tree

Showing 4 changed files with 10,620 additions and 93 deletions.
diff --git a/README.md b/README.md
@@ -12,12 +12,25 @@ Forks will teleport you around 100 lines of code further.
 
 Technicals
 ----------
-Best playable on Chrome, works in FF, fails on IE9 and untested on others...
-
+Best playable on Chrome, works in FF (less FPS), fails on IE9 (getter\setters) and untested on others...
+I've used the Octicons font instead of sprites for the pickups, saves bandwidth and scales better,
+at the prices of more CSS3 effects.
+Overall, not a lot of canvas is used, which means less performance, as the DOM gets updated often.
 
 Credits
 -------
 Louis Stowasser for his awesome framework [Crafty](https://craftyjs.com).
 [The Octocat sprite](https://github.com/mozilla/BrowserQuest/blob/master/client/img/3/octocat.png) by [sork](https://github.com/sork).
+[Pow Studio](https://powstudios.com/content/smoke-animation-pack-1) - for the smoke jump sprite.
 Font Diner's [Chewy](https://www.google.com/webfonts/specimen/Chewy).
-And Github's @bryanveloso, @jonrohan, @jsncostello, @kneath, and @cameronmcefee for the [Octicons](https://github.com/styleguide/css/7.0) font..n
+And Github's @bryanveloso, @jonrohan, @jsncostello, @kneath, and @cameronmcefee for the [Octicons](https://github.com/styleguide/css/7.0) font.
+
+Any other assets were either photomanipulated with GIMP or synthesize with SFXR.
+
+To do:
+------
+* Game doesn't restart when you die, have to refresh the page.
+* There's a clone chasing you, but I haven't figured how to deal with that yet... maybe raise an issue or sync to get rid of it...
+* Split the .js, follow Crafty's boilerplate
+* Scoreboard
+* Level editor
diff --git a/crafty.js b/crafty.js
diff --git a/index.html b/index.html
@@ -1,4 +1,4 @@
-<!doctype html>
+<!DOCTYPE html>
 <html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
@@ -40,6 +40,13 @@
  font-style: normal;
  }*/
 
+
+ * {
+ margin: 0;
+ padding: 0;
+ cursor: default;
+ }
+
  body, html { margin:0; padding: 0; overflow:hidden; height: 100%; font-family: Chewy, Arial; font-size:20px }
  body, html {
  background: rgb(224,226,228); /* Old browsers */
@@ -51,7 +58,7 @@
  background: linear-gradient(to bottom, rgba(224,226,228,1) 0%,rgba(185,187,189,1) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0e2e4', endColorstr='#b9bbbd',GradientType=0 ); /* IE6-9 */
  }
- #cr-stage { 
+ #cr-stage {
  border:1px solid #999; 
  margin:50px auto; 
  color:white; 
@@ -67,13 +74,40 @@
  color:white; 
  -webkit-box-shadow: 0px 0px 32px 0px rgba(0, 0, 0, .5);
  box-shadow: 0px 0px 32px 0px rgba(0, 0, 0, .5);
- } 
+ }
+
+ #scoreboard td, th {
+ padding: 0;
+ text-align: center;
+ border-bottom: 1px solid #aaa;
+ padding: 0 20px;
+ width: 100%;
+ }
+ #scoreboard tr:last-child td{
+ border-bottom: none;
+ }
+
+ #scoreboard th {
+ color: #666;
+ background: #ccc;
+ }
+ #scoreboard th:first-child {
+ border-top-left-radius: 8px;
+ border-right: 1px solid #888;
+ }
+ #scoreboard th:last-child {
+ border-top-right-radius: 8px;
+ }
+ #scoreboard td:first-child {
+ border-right: 1px solid gray;
+ }
  </style>
 </head>
 <body>
- <div id="loader"/>
+ <div id="loader"></div>
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript" src="crafty.js"></script>
+ <script type="text/javascript" src="R.js"></script>
  <script type="text/javascript" src="octocatjump.js"></script>
 </body>
 </html>