All the code for updating scores and winning state must be maintained in playerScores.js

To update scores, you just need to select the player score element from HTML and change it’s innerText to the score of the particular tank.

var leftPlayerScore = document.querySelector("#score1"),
    rightPlayerScore = document.querySelector("#score2");
 
function updateScores(){
  leftPlayerScore.innerText = tankleft.score;
  rightPlayerScore.innerText = tankright.score;
}

We call this function inside the switchTurn() function because this is the only time the score of the user may have changed.

For the winningState, we want to hide the canvas and div with id=stats and display the div with class=winnerBox. Remember we had a span inside the div with class=winnerBox, it is meant for displaying the message about winner. There is also a Play Again? Button placed inside it, which we will use shortly.

var stats = document.querySelector("#stats"),
  winnerBox = document.querySelector("#winnerBox"),
  body = document.querySelector("body");
 
function winningState(){
  clearInterval();
  canvas.style.display = "none";
  stats.style.display = "none";
  winnerBox.style.display = "block";
  body.style.background = "url(css/images/background.png)";
 
  if(tankleft.score > tankright.score){
    winnerBox.children[0].innerText = "PLAYER 1 WON!";
  }
  else if(tankright.score > tankleft.score){
    winnerBox.children[0].innerText = "PLAYER 2 WON!";
  }
  else{
    winnerBox.children[0].innerText = "TIE!";
  }
}

For the winningState, we check if the score of leftTank is higher, lower or equal to the rightTank and display the appropriate message. The winnerBox.children[0] selects the first child of the preceding element. In our case it will select the span element of the div with class=winnerBox. We also clear the interval which we had set in the startGame() function using clearInterval() method because now the game is over and we don’t want the frames to update every 60 ms.

Great, now we set up the Play Again button,

//PLAY AGAIN BUTTON EVENT LISTENER
var playAgain = document.querySelector("#winnerBox button");
 
playAgain.addEventListener("click", function(){
  canvas.style.display = "block";
  stats.style.display = "block";
  winnerBox.style.display = "none";
  body.style.background = "none";
 
  powerInput.value = 50;
  powerSlider.value = 50;
  angleInput.value = 50;
 
  startGame();
});

We set the angle and power input and slider values to 50 as they are our initial starting game values. Then we call the function startGame() which will restart the game.

Have a look at how we’ve called the updateScores() and winningState() functions inside switchTurn() function,

function switchTurn(){
  var turns = 10;
 
  if(tankleft.turn === true){
    updateAnglePower("right");
    tankleft.numOfTurns++;
    tankright.turn = true;
    tankleft.turn = false;
  }
  else if(tankright.turn === true){
    updateAnglePower("left");
    tankright.numOfTurns++;
    tankright.turn = false;
    tankleft.turn = true;
  }
 
  updateScores();
 
  if(tankleft.numOfTurns===turns && tankright.numOfTurns===turns)
    winningState();
}

We call the updateScores() function every time we switch turns and the variable turns denotes total number of turns which we want both the users to have (in our case we’ve defined it as 10). The if condition checks whether both the tanks have exceeded total turns and then calls the winningState() function to declare the winner.

Run the project to verify if the scores update and the winningState() function works or not.

Putting it together, your playerScores.js should look like this,

var leftPlayerScore = document.querySelector("#score1"),
  rightPlayerScore = document.querySelector("#score2"),
  stats = document.querySelector("#stats"),
  winnerBox = document.querySelector("#winnerBox"),
  playAgain = document.querySelector("#winnerBox button"),
  body = document.querySelector("body");
 
function updateScores(){
  leftPlayerScore.innerText = tankleft.score;
  rightPlayerScore.innerText = tankright.score;
}
 
function winningState(){
  clearInterval();
  canvas.style.display = "none";
  stats.style.display = "none";
  winnerBox.style.display = "block";
  body.style.background = "url(css/images/background.png)";
 
  if(tankleft.score > tankright.score){
    winnerBox.children[0].innerText = "PLAYER 1 WON!";
  }
  else if(tankright.score > tankleft.score){
    winnerBox.children[0].innerText = "PLAYER 2 WON!";
  }
  else{
    winnerBox.children[0].innerText = "TIE!";
  }
}
 
//PLAY AGAIN BUTTON EVENT LISTENER
playAgain.addEventListener("click", function(){
  canvas.style.display = "block";
  stats.style.display = "block";
  winnerBox.style.display = "none";
  body.style.background = "none";
 
  powerInput.value = 50;
  powerSlider.value = 50;
  angleInput.value = 50;
 
  startGame();
});

And your main.js file should look like this,

startGame();
 
function startGame(){
  initialize();
  tankleft.turn = true;
  generate_terrain_pts();
  draw_terrain();
  generateTankPoints();
  setInterval(updateFrames, 60);
}
 
function initialize(){
  points = [];
 
    tankleft.pos_index = 0;
    tankleft.theta = 0;
    tankleft.score = 0;
    tankleft.numOfTurns = 0;
    tankleft.power = 50;
    tankleft.turn = false;
    tankleft.nozzle = {x: 0, y: 0, alpha: 50*Math.PI/180};
 
    tankright.pos_index = 0;
    tankright.theta = 0;
    tankright.score = 0;
    tankright.numOfTurns = 0;
    tankright.power = 50;
    tankright.turn = false;
    tankright.nozzle = {x: 0, y: 0, alpha: 50*Math.PI/180};
}
 
function updateFrames(){
  ctx.clearRect(0, 0, canvas.width, canvas.height);
 
  draw_terrain();
  goAhead();
}
 
function goAhead(){
    if(loadedImages == 3)
    {
        draw_tank();
        draw_nozzle();
        fireInfo.drawPath();
    }
}
 
function switchTurn(){
  var turns = 2;
 
  if(tankleft.turn === true){
    updateAnglePower("right");
    tankleft.numOfTurns++;
    tankright.turn = true;
    tankleft.turn = false;
  }
  else if(tankright.turn === true){
    updateAnglePower("left");
    tankright.numOfTurns++;
    tankright.turn = false;
    tankleft.turn = true;
  }
 
  updateScores();
 
  if(tankleft.numOfTurns===turns && tankright.numOfTurns===turns)
    winningState();
}

We’ve defined a new function initialize() which initializes all the properties of tanks to default values. When the user hits the Play Again button after playing a game, we don’t want the tanks to preserve their previous game values. It is called inside the startGame() function.

Great, now you’ve successfully completed the Pocket Tanks project.