Example how Diesel.js works

demo.coffee

#
# Vision of how Diesel works
#

# Initialize engine from singleton
game = DGame.get
  title: "Chain Reaction Game v1.0"
  container: document.querySelector('body')

class DemoState extends DGameState
  init: () ->
    # Create a dummy ball object
    # TODO: Create with DEntity
    @ball = {
      x: 30,
      y: 30,
      dx: 1.5,
      dy: 3.0,
      radius: 20,
      color: '#ff0000'
    }

  # Clear state frame
  clear: (game) ->
    ctx = game.context
    ctx.fillStyle = '#222'
    ctx.fillRect 0, 0, game.width, game.height

  # Update state on each game tick
  update: (game) ->
    # Update ball position
    _bx = @ball.x
    _by = @ball.y
    _br = @ball.radius
    _bdx = @ball.dx
    _bdy = @ball.dy
    _gw = game.width
    _gh = game.height

    if (_bx + _bdx + _br) > _gw || (_bx + _bdx - _br ) < 0
      @ball.dx = -@ball.dx

    if (_by + _bdy + _br) > _gh || (_by + _bdy - _br ) < 0
      @ball.dy = -@ball.dy

    @ball.x += @ball.dx
    @ball.y += @ball.dy

  # Render game state frame
  render: (game) ->
    ctx = game.context

    # Draw the ball
    ctx.fillStyle = @ball.color
    ctx.beginPath()
    ctx.arc(@ball.x, @ball.y, @ball.radius, 0, Math.PI * 2, true)
    ctx.closePath()
    ctx.fill()

# Set up intro state
game.changeState(DemoState.get())

game.run()