Rich Media Web App Dev I
IGME-330
Boomshine-F(inal)
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.
- (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
namedtoggleDebug()
that toggles the value ofthis.debug
betweenfalse
andtrue
call it from keys.js, on akeyup
event. - (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
andCIRCLE.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
toGAME_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 thegameState
,totalScore
, andnumCircles
properties. - You'll also need to make a change to
drawCircles()
to make sure the remaining circles are drawn at a lower opacity duringGAME_STATE.END
- Remember to use these properties -
- (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
andCIRCLE.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 duringGAME_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 thetotalScore
unless a player has hit the level target
- Use
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.