Modifying Paper Toss - The JavaScript Game

The game created for Coursework 1 is to be incorporated into Coursework 2. To do that, it needs to be modified to hand out a score when it finishes.

Calculating the Score

The score is calculated using a very complex function that requires a degree in Advanced Mathematics to fully appreciate:

var difference = Math.abs(getX(bin) - getX(b));
score = 83-difference;

Of course, that was in jest.

The variable called difference will calculate the horizontal distance between the ball and the bin. I have a custom function called getX() that does this.

Sometimes, difference will be negative (when the ball ends up ahead of the bin). That required a function call to Math.abs() to get the absolute value. 83 is subtracted from the total, and the result is stored in the variable score. Why 83? Because the highest possible score was coming up to 163. I wanted the highest possible score to be 80.

Amount of Shots

I wanted to modify to game to last for 5 shots, or rounds. Three simple variables were created. The variable score was renamed to scores and changed to an array.

var rounds = 5;
var scores = new Array(rounds);
var currentRound = 0;

Naturally, every round, the variable currentRound needs to incremented. Then, a simple conditional statement will check if the set amount of shots (rounds) is reached.

currentRound++;
if (currentRound == rounds) {
 var totalScore = 0;
 for (var i = 0; i < rounds; i++) {
 totalScore += scores[i];
 }
alert('You scored '+totalScore);
}

If the user has fired five shots, the score is calculated and displayed to the user.

Adding a Scores Log

After every shot, a log is updated that will display the score of the user's previous shot.

It was placed underneath the desk. Here is a screenshot of the score log in action (after 3 shots - the user is on their fourth shot):

Below is the code used to update the score log:

var scoreText = document.getElementById("scoreDisplay").innerHTML;
scoreText = scoreText + "<br> Shot "+(currentRound+1)+": "+scores[currentRound];

Showing a Shot Counter

I wanted to display the amount of remaining shots to the user. To do this, I am using a symbol to represent a ball. It looks like this there's a chance it won't display in your browser.

◯

The HTML code to get that character is: ◯.

To count the amount of shots and display it to the user, the following code is used:

var roundsLeft = rounds - currentRound;
var roundsLeftStr = "Shots Left: ";
for (var i = 0; i < roundsLeft; i++) {
 roundsLeftStr = roundsLeftStr + "&bigcirc;&nbsp;"
}
document.getElementById("roundsDisplay").innerHTML = roundsLeftStr;

And here it is in action. Two shots are left.

In Action on a Mobile Device

Because of the robust rendering capabilities of modern mobile devices, I was successfully able to play the game on an Apple iPad, running iOS 5.1.1.

Conclusion

The JavaScript game created for Coursework 1 has been successfully enhanced, and the necessary modifications have been made.