Flood It/Pixelated clone in CoffeeScript and jQuery

assimil8.coffee

gridWidth = 20
gridHeight = 10
cellSize = 21

buttonWidth = 70
buttonHeight = 40

colors = ["rgb(220, 20, 60)", "rgb(220, 20, 200)", "rgb(220, 200, 60)", "rgb(120, 50, 60)", "rgb(0, 20, 60)", "rgb(10, 10, 200)"]

grid = []

oldColor = null
newColor = null

graphics = null

turns = 0
leastTurns = 0
gamesPlayed = 0
totalTurns = 0
average = 0

generateGrid = ->
  for r in [0...gridHeight]
    grid[r] = []
    for c in [0...gridWidth]
      grid[r][c] = colors[Math.floor(Math.random() * colors.length)]

drawGrid = ->
  for r in [0...gridHeight]
    for c in [0...gridWidth]
      graphics.fillStyle = grid[r][c]
      graphics.fillRect(c * cellSize, r * cellSize, cellSize, cellSize)
      
update = ->
  turns++
  updateStats()
  inBounds = (r, c) ->
    r >= 0 and r < gridHeight and c >= 0 and c < gridWidth
  canVisit = (r, c) ->
    inBounds(r, c) and grid[r][c] is oldColor and not (grid[r][c] in visited)
  visited = []
  visit = (r, c) ->
    grid[r][c] = newColor
    visited.push grid[r][c]
    visit r - 1, c if canVisit r - 1, c
    visit r + 1, c if canVisit r + 1, c
    visit r, c - 1 if canVisit r, c - 1
    visit r, c + 1 if canVisit r, c + 1
  visit 0, 0
  drawGrid()
  oldColor = newColor
  completed = true
  for r in [0...gridHeight]
    for c in [0...gridWidth]
      if grid[r][c] isnt grid[0][0]
        completed = false 
        break
  if completed
    totalTurns += turns
    gamesPlayed++
    average = totalTurns / gamesPlayed
    if leastTurns is 0
      alert "now try to beat #{turns}"
      leastTurns = turns
    else 
      if turns < leastTurns
        alert "you beat #{leastTurns}"
        leastTurns = turns
      else if turns == leastTurns
        alert "you tie"
      else
        alert "you lose"
    resetGame()
  
initCanvas = ->
  $("#gridArea").append("<canvas id='gridCanvas' width=#{cellSize * gridWidth} height=#{cellSize * gridHeight}>")
  graphics = $("#gridCanvas")[0].getContext("2d")
  
initButtons = ->
  for color in colors
    $("<div>").css({
      "background-color": color
      "width": "#{buttonWidth}px"
      "height": "#{buttonHeight}px"
      "float": "left"
    }).click(->
      newColor = $(this).css("background-color")
      update()
    ).appendTo("#buttonArea")
    
initStats = ->
  $("#statsArea").css({
    "float": "left"
    "background-color": "aliceblue"
    "width": "420px"
    "height": "100px"
  }).append("<p>number of turns taken: <span id='turns'>0</span></p>")
#    .append("<p>lowest number of turns: <span id='leastTurns'>0</span> </p>")
  
updateStats = ->
  $("#turns").html("#{turns}")
#  if not firstGame
#    $("#leastTurns").html("#{leastTurns}")
#  else
#    $("#leastTurns").html("#{turns}")
    
resetGame = ->
  turns = 0
  generateGrid()
  updateStats()
  drawGrid()
  oldColor = grid[0][0]
  
#jQuery ready function / entry point
$ ->
  initCanvas()
  initButtons()
  initStats()
  generateGrid()
  drawGrid()
  oldColor = grid[0][0]
  turns = 0