Phase 5: Designing Levels and Scoring

Overlap Detection Logic 

At this point, the game was fully functional and working great. However, being motivated to take the game a step further, I decided to implement different levels with scoring. Having the default target already in place, the real addition to the game was the method of detecting an overlap of the ball over the target area as well as assigning the correct points depending on which circle the ball stops moving.

Knowing the x and y coordinates of the ball at each movement position, I was required to develop a function which checks the final position of the ball compared to the position of the targets.

Figure 5.1

The target circles where placed on the game area using CSS div positioning as described in previous posts. To detect overlap between the ball and targets, the coordinates of each point have been noted as shown at each corner of the targets. After defining all values of each target, a loop was designed to check whether the balls' coordinates lie in any one of the circle coordinate ranges starting from the smallest. To design different levels, different target sizes and positions where designed to make it harder for the player to obtain maximum points by stopping the ball exactly on the pink circle. Points vary depending on which level the player chooses and the final position of the ball. The harder the level, the smaller is the diameter sizes of each target.

Implementing Levels & Scoring

else if (currentRadius == radius){
//alert('reached destination');
checkOverlap(ballNewX,ballNewY);
scoreScreenTimer();
} else if (currentRadius == remainingRadius){
//alert('reached destination after bounce');
checkOverlap(ballNewX,ballNewY);
//alert('You scored: ' +score+' pts');
scoreScreenTimer();
}

The function shown above makes part of the startMovement() function. This function is triggered when the ball reaches destination. The function will trigger another function call checkOverlap() given the coordinates of the ball to check whether the ball is overlapping the target. Another function is then called to calculate the score depending on which circle the ball is overlapping (if any) and show the score to the player.

function checkOverlap(x,y){
if (chosenLevel==2){
if (x>=200 && x<=230 && y>=105 && y<=135){
newScore = 300;
totalScore = totalScore + newScore;
} else if (x>=175 && x<=255 && y>=80 && y<=160){
newScore = 250;
totalScore = totalScore + newScore;
} else if (x>=150 && x<=280 && y>=55 && y<=185){
newScore = 200;
totalScore = totalScore + newScore;
} else if (x>=125 && x<=305 && y>=30 && y<=210){
newScore = 150;
totalScore = totalScore + newScore;
}

As already discussed, the above function is triggered when the ball reaches destination. This function will first check which difficulty level the player chose before started playing, then it will check which target the ball is overlapping, starting from the smallest, and calculating the score accordingly.

//function used to show the score obtained when the ball reaches destination
function scoreScreenTimer() {
var tim = window.setTimeout("scoreScreen()", 800);  // 800 milliseconds = 0.8 seconds
}

This function is called from the startMovement() function when the ball reaches destination. This function is used to allow some time between the output of the score screen after the ball reaches destination (0.8 seconds). If this function was not implemented, then the score screen would have been outputted immediately when the ball reaches the destination.

//function used to show the score obtained when the ball reaches destination
function scoreScreen(){  
document.getElementById("scoreScreen").style.visibility="visible";  
if (remainingRounds >= 2){
document.getElementById("score-screen-rounds").style.visibility="visible";
document.getElementById("score-screen-text").innerHTML = "You have scored " + newScore + "pts in this round"; 
document.getElementById("score-screen-rounds").innerHTML = "" + remainingRounds + " rounds remaining";
document.getElementById("score-screen-ok-button").style.visibility="visible";
} 
else if (remainingRounds == 1) {
document.getElementById("score-screen-rounds").style.visibility="visible";
document.getElementById("score-screen-text").innerHTML = "You have scored " + newScore + "pts in this round"; 
document.getElementById("score-screen-rounds").innerHTML = "" + remainingRounds + " last round remaining";
document.getElementById("score-screen-ok-button").style.visibility="visible";
} 
else {
document.getElementById("score-screen-text").innerHTML = "Your Final Score is " + totalScore + "pts"; 
document.getElementById("score-screen-main-button").style.visibility="visible";
document.getElementById("score-screen-rounds").style.visibility="hidden";
document.getElementById("score-screen-ok-button").style.visibility="hidden";
}
  
updateDegrees();
updateScore();
updateRounds();
resetCanvas();
}

This function is used to toggle the various div tags to be able to output the score screen. As noted above, the player is given the amount of rounds remaining (from a total of 3 rounds) before given the final score. At the end of the function, the angle of projection, score and rounds values are updated using seperate functions and the canvas is reset for another shot.

//function used to update the total score
function updateScore(){
document.getElementById("score-value").innerHTML = totalScore; 
}
  
//function used to update the game round value
function updateRounds(){
document.getElementById("round-value").innerHTML = ballCount; 
}

The updateScore() and updateRounds() functions are used to show both updated values during the game to the user at the top left corner of the game area. Both functions are calculating the values in seperate functions and output the results of these variables when the functions are triggered.