Merge pull request #3 from loglot/title

added title and better whitespace

colectathon.html

@@ -9,7 +9,7 @@
         margin: 0;
       }
       canvas {
-        background: #eee;
+        background: #fff;
         display: block;
         margin: 0 auto;
       }
@@ -35,6 +35,7 @@
       var coin_r = 0
       var coin = 0
       var collection = 0
+      var menu = 1
 
 //-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 
@@ -165,23 +166,30 @@
       };
 
       function key_man(name) {
+        if (menu == 1) {
+          if (name == " ") {
+            menu++
+            draw_game()
+          }
+        }else{
 //        if (name == "-") (
 //          shrink_circ(20)
 //        )
 //        if (name == "=" || name == "+") {
 //          grow_circ(20)
 //        }
-        if (name == "w" || name == "ArrowUp") {
-          move_circ(0, -20)
-        }
-        if (name == "s") {
-          move_circ(0, 20)
-        }
-        if (name == "a") {
-          move_circ(-20, 0)
-        }
-        if (name == "d") {
-          move_circ(20, 0)
+          if (name == "w" || name == "ArrowUp") {
+      	   move_circ(0, -20)
+          }
+          if (name == "s") {
+            move_circ(0, 20)
+      	  }
+       	  if (name == "a") {
+       	   move_circ(-20, 0)
+          }
+          if (name == "d") {
+            move_circ(20, 0)
+					}
         }
       };
 
@@ -208,35 +216,50 @@
 
         if (coin_x < x + r && coin_x > x - r && coin_y < y + r && coin_y > y - r && coin == 1) {
           coin = 0
-				  collection++
+          collection++
           draw_game()
-				  spawn_coin(1500)
-					console.log(collection)
+          grow_circ()
+          spawn_coin(1500)
+          console.log(collection)
         }
 
       }
 
+      function drawStroked(text, x, y) {
+        ctx.font = '80px Sans-serif';
+        ctx.strokeStyle = 'black';
+        ctx.lineWidth = 8;
+        ctx.strokeText(text, x, y);
+        ctx.fillStyle = 'white';
+        ctx.fillText(text, x, y);
+      }
+
+
 //-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 //circle drawing
 //-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 
       function draw_game() {
 
-	coin_check()
-
         //clear screen
 
         draw_rect()
 
+
+        if (menu == 1) {
+          drawStroked("yet another collectathon", 250, 200)
+          drawStroked("press space to start", 260, 500)
+        } else{
+        coin_check()
         draw_circ(r, "#afbfaf", x, y)
-
         if (coin == 1) {
 //          console.log (coin)
           draw_circ(coin_r, "yellow", coin_x, coin_y)
+					}
         }
-
       }
 
+
       function draw_circ(radius, color, x, y, shadow) {
         inline = radius - 5