Jump To …

game.coffee

Base Game Class

Game classes will extend this class

class Game

controls hi score features & button

  includeHiScores: true

current score of the game

  score: 0

label for score in the game scoreboard

  score_label: 'Score'

constructor

  constructor: ->

store a pointer to the game's HTML element

    @el = $('#game');

should we include HiScores ?

    @includeHiScores = openDatabase?

we will pause the game if the windo blurs...

    $(window).on('blur', @winBlured)

include hi scoring features

    if (@includeHiScores)
      @hi = new Hiscore(@, @game_key)

include instructions

    @instructions = new GameInstructions(@, @game_key)

newGame Method

  newGame: =>
    @score = 0
    @destroyUI()
    if (@includeHiScores)
      @hi = new Hiscore(@, @game_key)

buildUI Method

  buildUI: ->
    @scoreboard = $('<div class="scoreboard vert">' + @score_label + ':</div>').appendTo(@el);
    @scoreView = $('<span class="score">' + @score + '</span>').appendTo(@scoreboard);
    @newgamebtn = $('<button id="newgamebtn" class="btn btn-small btn-danger scoreboard-buttons">New Game</button>');
    @newgamebtn.appendTo(@scoreboard);
    @newgamebtn.on('click',@newGame)
    if (@includeHiScores)
      @hiBtn = $('<button class="btn btn-small btn-warning hiscorebtn scoreboard-buttons">Hi Scores</button>').appendTo(@scoreboard)
      @hiBtn.on('click',@showHi)
    @instructionsBtn = $('<button class="btn btn-small btn-info scoreboard-buttons">?</button>').appendTo(@scoreboard)
      .on('click', @showInstructions)
    if (@snd?)

save all of the saound values for each sound object

      $.each(@snd, (k) ->
        this.origVol = this.volume
      )

      @sndBtn = $('<button class="btn btn-small btn-inverse scoreboard-buttons" id="sndBtn">' +
        '<i class="icon icon-white icon-volume-up"></i></button>').appendTo(@scoreboard)
        .on('click', @sndBtnClick)
      @sndBoard = $('<div id="soundBoard"></div>').appendTo(@el)
      $('<div id="volumeLevel"></div>').appendTo(@sndBoard)
      $('#volumeLevel').jqxSlider(
        width: 200
        showTicks: false
        height: 18
        value: 10
        theme: 'black'
      ).on('change', @volChange)

  volChange: (e) =>
    mod = e.args.value / 10 # change to a %
    $.each(@snd, ->
      this.volume = this.origVol * mod
    )

  hideSound: ->
      @sndBoard.hide('fast')
      @showingSound = false

winBlured Method

pauses the game if the window is blured

  winBlured: () ->
    $.g.pause()

showHi Method

pauses game & shows shows hi scores modal

  showHi: =>
    @pause()
    @hi.show()

  addToScore: (s) ->
    @score += s
    @scoreView.text(@score)

  sndBtnClick: =>
    if (@showingSound? && @showingSound)
      @hideSound()
    else
      @showingSound = true
      @sndBoard.show('fast')

showInstructions Method

pauses game & shows instructions modal

  showInstructions: =>
    @pause()
    @instructions.show()

destroyUI method

simply erases the game's HTML element's contents.

  destroyUI: ->
    @el.html('')

gameOver method

adds hi score (should be doing more, like setting game state to "over"...)

  gameOver: ->
    @hi.addScore(@score) if @includeHiScores

pause/resume methods for games that support it.

  pause: ->
    @paused = true
    return;

  resume: ->
    @paused = false
    return;

append Method

shortcut to allow appending HTML elements to the game

  append: (el) ->
    $(el).appendTo(@el)

Game Insturctions Class

Creates a modal with instructions in to on demand via an AJAX call.

class GameInstructions

consturctor Method

  constructor: (game) ->

game pointer

    @g = game

boolean to

    @loaded = false

show Method

  show: =>
    if !@loaded
      @_load()
    else
      $('#game-instructions').modal('show')

private _load Method

  _load: ->
    $('<div id="game-instructions" class="modal hide fade" tabindex="-1" role="dialog"' +
    'aria-labelledby="myModalLabel" aria-hidden="true">' +
    '<div class="modal-header">' +
    '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>' +
    '<h3 id="myModalLabel">Game Instructions</h3>' +
    '</div>' +
    '<div class="modal-body">' +
    '<div id="game-instructions-html">Loading...' +
    '</div><div class="modal-footer">' +
    '<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>' +
    '</div>' +
    '</div>'
    ).appendTo(document.body);
    $('#game-instructions').modal()
    $.get('/res/games/' + @g.game_key + '/instructions.html', (d) ->
      $('#game-instructions-html').html(d)
    )