game_of_life.html.haml

!!! 5
%html
  %head
    %title Conway's Game of Life
    %meta{ content: 'text/html;charset=utf-8', 'http-equiv' => 'Content-Type' }
    %link{ rel: 'stylesheet', type: 'text/css', href: 'https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css' }
    %script{ type: 'text/javascript', src: 'https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js' }
    
    :sass
      body
        font-size: 14px
        margin: 10px
        
        button
          background: none
          border: 1px solid #ddd
          width: 150px
          display: block
          &:hover
            background-color: #f8f8f8
          & + button
            margin-top: 5px
        
        #board
          float: left
          position: relative
          margin-right: 10px
          #grid
            position: absolute
            top: 0
            left: 0
          #main-canvas
            position: relative
            z-index: 10
            cursor: pointer
          
        #tips
          color: #999
          list-style: none
          
    :coffee
      class Grid
        constructor: (@width, @height, @cellSize, @context) ->
        
        initGrid: ->
          for x in [0..@width]
            @context.moveTo(x * @cellSize + 0.5, 0)
            @context.lineTo(x * @cellSize + 0.5, @height * @cellSize)
            
          for y in [0..@height]
            @context.moveTo(0, y * @cellSize + 0.5)
            @context.lineTo(@width * @cellSize, y * @cellSize + 0.5)
            
          @context.strokeStyle = '#ddd'
          @context.stroke()
    
      class Board
        constructor: (@width, @height, @cellSize, @context) ->
          @cells = @initBoard()
        
        initBoard: ->
          ((false for y in [0..@height - 1]) for x in [0..@width - 1])
                            
        start: ->
          @interval = setInterval @tick, 100
        
        stop: ->
          clearInterval(@interval) if @interval?
          
        reset: ->
          @stop()
          @clearAll()
          @cells = @initBoard()
        
        tick: =>
          @clearAll()
          
          cells = []
          
          for x in [0..@width - 1]
            row = []
            for y in [0..@height - 1]
              aliveNeighbours = 0
              for neighbour in @neighbourCoordFor(x, y)
                aliveNeighbours += 1 if @cells[neighbour.x][neighbour.y]
              alive = (@cells[x][y] and aliveNeighbours is 2) or aliveNeighbours is 3
              @draw(x, y) if alive
              row.push alive
            cells.push row
            
          @cells = cells
        
        addCell: (x, y) ->
          @cells[x][y] = true
          @draw(x, y)
          
        removeCell: (x, y) ->
          @cells[x][y] = false
          @clear(x, y)
             
        neighbourCoordFor: (x, y) ->
          leftX  = if x is 0 then @width - 1 else x - 1
          rightX = if x is @width - 1 then 0 else x + 1
          upY    = if y is 0 then @height - 1 else y - 1
          downY  = if y is @height - 1 then 0 else y + 1
          
          [
            { x: leftX,  y: upY }
            { x: x,      y: upY }
            { x: rightX, y: upY }
            
            { x: leftX,  y: y }
            { x: rightX, y: y }
            
            { x: leftX,  y: downY }
            { x: x,      y: downY }
            { x: rightX, y: downY }
          ]
        
        clearAll: ->
          @context.clearRect(0, 0, @width * @cellSize, @height * @cellSize)
        
        draw: (x, y) ->
          @context.fillRect(x * @cellSize, y * @cellSize, @cellSize, @cellSize)
        
        clear: (x, y) ->
          @context.clearRect(x * @cellSize, y * @cellSize, @cellSize, @cellSize)
        
      $ ->
        $board = $('#board')
        
        cellSize = parseInt($board.data('cell-size'))
        width = parseInt($board.data('width'))
        height = parseInt($board.data('height'))
        $board.css('width',  width * cellSize)
        $board.css('height', height * cellSize)
        
        $grid = $('#grid')
        $grid[0].width = width * cellSize + 1
        $grid[0].height = height * cellSize + 1
        
        gridContext = $grid[0].getContext('2d')
        new Grid(width, height, cellSize, gridContext).initGrid()
        
        $mainCanvas = $('#main-canvas')
        $mainCanvas[0].width = width * cellSize
        $mainCanvas[0].height = height * cellSize
        
        canvasContext = $mainCanvas[0].getContext('2d')
        $mainCanvas.data('board', new Board(width, height, cellSize, canvasContext))
        
        $('[data-game-action]').on 'click', ->
          action = $(this).data('game-action')
          $mainCanvas.data('board')[action]()
                
        $mainCanvas.on('contextmenu', (e) ->
          return false
        ).on 'mousedown', (e) ->
          x = Math.floor(e.offsetX / cellSize)
          y = Math.floor(e.offsetY / cellSize)
          board = $(this).data('board')
          if e.which is 1
            board.addCell(x, y)
          else
            board.removeCell(x, y)
        
        
        
  %body
    #board{ data: { width: 50, height: 50, cell_size: 10 } }
      %canvas#main-canvas
      %canvas#grid
      
    
    %button{ type: 'button', data: { game_action: :start } }
      Start
    %button{ type: 'button', data: { game_action: :stop } }
      Stop
    %button{ type: 'button', data: { game_action: :reset } }
      Reset
    
    %ul#tips
      %li Click to add cell
      %li Right click to remove cell