Started removing global vars

Cakefile

@@ -0,0 +1,12 @@
+{exec} = require 'child_process'
+task 'build', 'Build project from coffee/*.coffee to js/*.js', ->
+  exec 'coffee --compile --output js/ coffee/', (err, stdout, stderr) ->
+    throw err if err
+    console.log stdout + stderr
+
+playsnakepath = '~/Dev/Heroku/snake/resources/public/js/'
+task 'deploy', 'Build and move the generated js files to PlaySnakeNow repo', ->
+  invoke 'build'
+  exec "cp js/* #{playsnakepath}", (err, stdout, stderr) ->
+    throw err if err
+    console.log stdout + stderr

coffee/Game.coffee

@@ -1,12 +1,8 @@
-# Setup the canvas
-c = document.getElementById('c')
-c.width = window.grid.pixelWidth()
-c.height = window.grid.pixelHeight()
 
-window.ctx = c.getContext('2d')
 
-drawSnakeFrame = (line1, line2) ->
-  clear()
+drawSnakeFrame = (ctx, line1, line2) ->
+  console.log ctx
+  clear(ctx)
   ctx.fillStyle = '#2F2F2F'
   ctx.strokeStyle = '#C7FAD9'
   snake = []
@@ -48,14 +44,17 @@ drawSnakeFrame = (line1, line2) ->
   ctx.fillText(line1, 300, 185)
   ctx.fillText(line2, 300, 255)
 
-displaySplashScreen = ->
-  drawSnakeFrame 'Play Snake', 'Now!'
+  console.log 'the end'
 
-displayGameOver = ->
-  drawSnakeFrame 'Game', 'Over'
+displaySplashScreen = (ctx) ->
+  console.log ctx
+  drawSnakeFrame ctx, 'Play Snake', 'Now!'
 
+displayGameOver = (ctx)->
+  drawSnakeFrame ctx, 'Game', 'Over'
 
-clear = ->
+
+clear = (ctx) ->
   ctx.fillStyle = "#8CC09F"
   ctx.beginPath()
   ctx.rect(0, 0, c.width, c.height)
@@ -86,7 +85,7 @@ window.updateSpeed = (newSpeed) ->
   $('#speedVal').text(window.speed)
 
 # Start the game
-window.startGame = ->
+window.startGame = (ctx) ->
   window.score = 0
   updateScore()
   window.grid.moveApple(window.player.body)
@@ -96,7 +95,7 @@ window.startGame = ->
   $('#menuPanel').addClass('hidden')
   $('#scorePanel').removeClass('hidden')
   console.log window.score
-  gameLoop();
+  gameLoop ctx
 
 checkSnakeEatApple = ->
   snake = window.player.head()
@@ -115,38 +114,48 @@ checkSnakeHitWalls = ->
     return true
   return false
 
-gameLoop =  ->
+gameLoop =  (ctx) ->
   if not  window.gameOver
-    clear()
-    grid.draw()
-    player.draw()
+    clear(ctx)
+    grid.draw(ctx)
+    player.draw(ctx)
     checkSnakeEatApple()
     window.gameOver = (checkSnakeHitWalls() or window.player.isEatingItself())
-    setTimeout(gameLoop, 1000/(window.speed * 2));
+    setTimeout((-> gameLoop ctx), 1000/(window.speed * 2));
   else
     # Game finished, show the controls
     window.lastScore = window.score
-    displayGameOver()
-    showMenuPanel()
-
-
-# Player score
-window.score = 0
-window.lastScore = 0
-window.gameOver = true
-window.speed = 5
-displaySplashScreen()
-
-document.onkeydown = (e) ->
-  if (e.keyCode is 39) # Right
-    player.setDir 'right'
-  else if (e.keyCode is 37) # Left
-    player.setDir 'left'
-  else if (e.keyCode is 40) # Down
-    player.setDir 'down'
-    e.preventDefault()
-  else if (e.keyCode is 38) # Up
-    player.setDir 'up'
-    e.preventDefault()
-  else if (e.keyCode is 83) # S
-    startGame()
+    displayGameOver(ctx)
+    showMenuPanel(ctx)
+
+jQuery(document).ready ->
+  # Setup the canvas
+  c = document.getElementById('c')
+  ctx = c.getContext('2d')
+  c.width = window.grid.pixelWidth()
+  c.height = window.grid.pixelHeight()
+  displaySplashScreen ctx
+
+  # Player score
+  window.score = 0
+  window.lastScore = 0
+  window.gameOver = true
+  window.speed = 5
+
+  $(document).keydown (e) =>
+    if (e.keyCode is 39) # Right
+      player.setDir 'right'
+    else if (e.keyCode is 37) # Left
+      player.setDir 'left'
+    else if (e.keyCode is 40) # Down
+      player.setDir 'down'
+      e.preventDefault()
+    else if (e.keyCode is 38) # Up
+      player.setDir 'up'
+      e.preventDefault()
+    else if (e.keyCode is 83) # S
+      console.log 'CTX: ' + ctx
+      startGame ctx
+
+
+

coffee/Grid.coffee

@@ -38,7 +38,7 @@ class Grid
     else
       return @apple
 
-  draw: ->
+  draw: (ctx) ->
     try
       ctx.drawImage(@img, @apple[0] * @scale, @apple[1] * @scale, @scale, @scale)
     catch e

coffee/Player.coffee

@@ -60,7 +60,8 @@ class Player
   eat: -> @isEating = true
   stopEating: -> @isEating = false
 
-  draw: ->
+  draw: (ctx) ->
+    console.log ctx
     @move()
     @stopEating()
     size = @size

index.html

@@ -5,19 +5,15 @@
     <script type="text/javascript" 
 	    src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.2/jquery.min.js">
     </script>
-    <script src="coffee-script.js" type="text/javascript"></script>
-    <script type="text/coffeescript" src="coffee/Grid.coffee"></script>
-    <script type="text/coffeescript" src="coffee/Player.coffee"></script>
-    <script type="text/coffeescript" src="coffee/Game.coffee"></script>
+    <script type="text/javascript" src="/js/Player.js"></script>
+    <script type="text/javascript" src="/js/Grid.js"></script>
+    <script type="text/javascript" src="/js/Game.js"></script>
 
     <link rel="stylesheet" href="style.css">
   </head>  
   <body>
     <div class="wrapper">
       <h1><a href="/">PlaySnakeNow.com</a></h1>
-      <div id="social">
-	<a href="http://twitter.com/share" class="twitter-share-button" data-url="http://PlaySnakeNow.com" data-count="none">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
-      </div>
       <div class="screen">
 	<div id="controlPanel">
 	  <div id="scorePanel" class="hidden">