Overview

Finish it!

Up until now, Boomshine ICE has been a tutorial - where we gave you all the code and a lot of discussion - and you dutifully typed the code in.

You did read all the discussion, right? Even if you did, it’s worth reviewing again.

Rubric - Assignment is worth 3% of your final grade.

1. (20%) Everything works from Boomshine Parts A-E. Make sure than the FPS counter can be toggled on and off with a letter 'd' keyboard shortcut. Write a method in app.main named toggleDebug() that toggles the value of this.debug between false and true call it from keys.js, on a keyup event.
2. (60%) The game should be over when a level is beaten and numCircles reaches a certain value (the original Boomshine stops at 60). Add a Game Over screen that will display the players final score and gives them the opportunity to play again. See screenshot(s) below for an example.
   • Remember to use these properties - GAME_STATE.END and CIRCLE.NUM_CIRCLES_END
   • In the code that checks if the level is over, check to see if the game is also over, and if so, change gameState to GAME_STATE.END
   • Add a conditional in drawHUD() that will draw a Game Over screen
   • Add a conditional in doMouseDown() that restarts the game. Don't forget to reset the gameState, totalScore, and numCircles properties.
   • You'll also need to make a change to drawCircles() to make sure the remaining circles are drawn at a lower opacity during GAME_STATE.END
3. (25%) There will be a minimum score required on each level in order to progress to the next level. This is a critical feature of the "shipping" Boomshine. It can be a fixed percentage of this.numCircles, or a value that is hard-coded on a per-level basis (hard-coding playtested values gives better playability results).
   
   Hints:
   • Use GAME_STATE.REPEAT_LEVEL
   • Add CIRCLE.NUM_LEVEL_INCREASE and CIRCLE.PERCENT_CIRCLES_TO_ADVANCE to your properties
   • In the code that checks if the level is over:
     // if the level is over

if(this.roundScore < Math.floor(this.numCircles * this.CIRCLE.PERCENT_CIRCLES_TO_ADVANCE)){

  this.gameState = this.GAME_STATE.REPEAT_LEVEL;

}else{

  ...

}
   • You'll also need to make a change to drawCircles() to make sure the remaining circles are drawn at a lower opacity during GAME_STATE.REPEAT_LEVEL
   • While the circles are exploding, display both the number of circles that have exploded for that level, as well as the target number of circles for the level
   • Do not add the roundScore to the totalScore unless a player has hit the level target

These 3 add up to 105% - but wait - there's more!

Extra Credit opportunities

• Hard-coded level values for color, number of circles per level, and ???.
• Add a currentLevel property to main and then look up game data based on the level. The game data is stored in a levels property, which is an array of objects (see screenshot below).
• Use this game data to add features to the game.
• High Score Screen - you could use the Local Storage API - check out this tutorial: http://www.smashingmagazine.com/2010/10/local-storage-and-how-to-use-it/ or look at the source code of a 330 checklist page to see how window.localStorage works.
• Title and/or Instructions screen.
• Clone Boomshine - clicking creates a new exploding circle, text fades in and out, "screen flare" and sound when level target is reached, tuned difficulty curve...

What else?

Feel free to change the fonts, colors, sounds, etc... to personalize your version of Boomshine - but be sure to keep the game both usable and playable.

Example Screenshots

Game Over

Minimum Score to Advance (failure)

Minimum Score to Advance (success)

Possible enhancement: Game data example

Or fine-tune and customize the level progression