Scoring, Sounds, End Game and Titles

Scoring

Scoring in games comes in a variety of flavors. Below are some of the ways that score can be used/determined:

Acquisition Score - gained by gathering items
Destruction Score - gained by eliminating items
Time Score - gained by surviving for a certain amount of time
Level Score - gained by passing a level
Health Score - lost by being hit by an item or based on time

Most scoring values(both positive and negative) can be differentiated as either collision based or time based. Collision based scoring is triggered when a collision occurs between two objects on the screen. In these instances, the programmer then decides if the collision triggers a positive score (elimination or acqusition) or a negative score effect. In these cases, the appropriate score variable(s) should be altered in the collision condition inside the update method.
function update(){ ... //collision detection between missle and player if(<code for collision detection>){ //player is hit by missle player1Health-=20; //the hit player loses 20 health points player2Score+=100; //the shooting player gains 100 score points } ... }
Time based scoring can happen in several ways. One option is to have score increase as time increases. For example, if our timing variable is increasing 60 times a second, we could easily just make that the running score. Alternatively, we could give bonuses for the amount of time that a player has stayed alive. For example, there could be a bonus if the player reaches the two minute mark. In this case, our update function would check when the timing variable is equal to 7200, and then add a bonus to the score.
function update(){ ... timing++; //timing increases with each run (60 times a second) if(timing%6==0){ //score increases 10 times a second, as long as game is running playerScore++; } if(timing==7200){ //game reaches the two minute mark playerScore+=200; //a 200 point bonus } ... }
Either way, the score variables are altered based on conditions in the update method and then drawn to the screen (in the appropriate location) in the draw method. function update(){ ... } function draw(){ ... ctx.beginPath(); ctx.fillText(playerScore, 10, 10); ctx.closePath(); ... }

Sound

Most games have two types of sounds: sound effects and music. Sound effects are event based and occur as different things happen in the game. For example, when a user presses the space bar, there may be a shot sound effect or a jump sound effect. Another example of sound effect use is when there is a collision, a programmer may select an explosion or other appropriate sound. A great site to download free sound effects for use in an educational environment is SoundBible.com

Music is the background music that plays during the entirety of the game. This music is often times loaded at the very beginning of the game and then continues to loop through the entire game. It is important to pick music that is not distracting from the game, but helps to set the mood of the game. Additionally, some designers have been known to change the background music as the level changes. A good site for free background music for educational projects is FreePlayMusic.com. You can search FreePlay by genre or feeling and download cuts of music of various lenghts, many created to loop well.

In either case, you will need to become familiar with the <audio> tag. New in HTML5, the <audio> tag is designed to play audio files on a web page. The <audio> tag will effectively play MP3 files in all browsers and .wav files in all browsers EXCEPT Internet Explorer - so best to stay with MP3, if possible. The <audio> tag has several attributes that can be used to alter the effect of the audio being loaded. They include:

src: the relative path to the audio file to be played
preload: (auto|metadata|none) determines the amount of information loaded with the page
controls: (controls | none) determines if the play/stop audio controls are shown on the screen
loop: (true | false) determines if the file should play on loop

Below, you will see example code for two audio elements in a game. Note that these tags are written first in the body, even prior to the canvas. Both are preloaded with controls set to none (we will control in code). The background music is set to loop, while the sound effect is not. Additionally, please note that each element has an id attribute which we will use to access the HTML from JavaScript. Also, for extra ensurance that no audio elements will be visible, we set a style of display:none. <body onload='initialize();'> <audio src='effect.mp3' id='hitSound' preload='auto' controls='none' style='display:none'></audio> <audio src='backgroundMusic.mp3' id='bgMusic' preload='auto' controls='none' style='display:none' loop='true'></audio> <canvas id='game' width='400px' height='300px'></canvas> ...
In order to use the sounds in the game, we will need to create sound variables, initialize them, and utilize the play() and pause() methods provided. See the sample code below: <script> ... //sound variables var hitSound, bgMusic; ... function intitialize(){ ... hitSound=document.getElementById('hitSound'); bgMusic=document.getElementById('bgMusic'); bgMusic.play(); //starts bgMusic with game ... } function update(){ ... if(<code to test collision or score or button push, etc>){ ... hitSound.play(); ... } ... } </script>

Start and End Screens

At a later time, we will be discussing the ability to control screens in our program. For now, the easiest way to accomplish this is using HTML files and the location.href JavaScript object. A start screen can be developed using basic html commands inside the body. Text can be generated with the basic CSS styling. Finally, a button to start the game can be created using an image, styled to look like a button. Welcome to my game. ... <a href='gameFile.html'><img src='clickToPlayButton.png' /></a>
In a similar way, it is fairly easy to create an End Game screen by creating another HTML file. When the condition in the update method signals the end of the game either by score or by time, use the JS location.href method to point to the end game file. Unfortunately, there is not an easy way to transfer the score to the end page. So, you may need to have two pages, one for winning and one for losing. function update(){ ... if(losingCondition){ location.href='youlost.html'; } ... }