All the code for adding eventListeners must be maintained in the file named eventListeners.js

Let’s start by creating eventListeners for move buttons and selecting all the buttons using DOM querySelector.

var moveBtns = document.querySelectorAll("#move button"),
    fireBtn = document.querySelector("#fireAndPower button.statBox"),
    powerInput = document.querySelector("#power p input"),
    powerSlider = document.querySelector("#myRange"),
    angleBtns = document.querySelectorAll("#angle button"),
    angleInput = document.querySelector("#angle input");
 
//MOVE BUTTON EVENT LISTENERS AND FUNCTIONS
moveBtns[0].addEventListener("click",moveLeft);
moveBtns[1].addEventListener("click",moveRight);
 
var tankleftMoveCount = 1, tankrightMoveCount = 1;
 
function moveLeft(){  
  if(tankleft.turn === true && tankleftMoveCount<=4)
  {
    if(tankleft.pos_index >= 40)
      tankleft.pos_index-=20;
    tankleftMoveCount++;
  }
  else if(tankright.turn === true && tankrightMoveCount<=4)
  {
    tankright.pos_index-=20;
    tankrightMoveCount++;
  }
}
 
function moveRight(){  
  if(tankleft.turn === true && tankleftMoveCount<=4)
  {
    tankleft.pos_index+=20;
    tankleftMoveCount++;
  }
  else if(tankright.turn === true && tankrightMoveCount<=4)
  {
    if(tankright.pos_index <= canvas.scrollWidth-120)
      tankright.pos_index+=20;
    tankrightMoveCount++;
  }
}

We have given each tank 4 moves and tankleftMoveCount, tankrightMoveCount keeps tracks of moves made by each of them. If they exceed 4, the tanks won’t move. The nested if condition makes sure that both the tanks don’t go off the canvas.

Angle button event listeners :

//ANGLE BUTTON EVENT LISTENERS AND FUNCTIONS
angleBtns[0].addEventListener("click",angleAdd);
angleBtns[1].addEventListener("click",angleSub);
 
function angleAdd(){
  if(angleInput.value<90)
    angleInput.value++;
 
  if(tankleft.turn === true)
    tankleft.nozzle.alpha = angleInput.value*Math.PI/180;
  else
    tankright.nozzle.alpha = angleInput.value*Math.PI/180;
}
 
function angleSub(){
  if(angleInput.value>0)
    angleInput.value--;
 
  if(tankleft.turn === true)
    tankleft.nozzle.alpha = angleInput.value*Math.PI/180;
  else
    tankright.nozzle.alpha = angleInput.value*Math.PI/180;
}

We don’t want the angle of nozzle of the tanks go beyond 90 degrees so there is an if condition which ensures the above thing.

Fire button and Power slider event listeners :

//FIRE BUTTON EVENT LISTENER
fireBtn.addEventListener("click",fire);
 
//POWER SLIDER EVENT LISTENERS AND FUNCTIONS
powerInput.addEventListener("input",powerInput_in);
powerSlider.addEventListener("input",powerSlider_in);
 
function powerSlider_in(){
  powerInput.value = powerSlider.value;
  if(tankleft.turn === true)
    tankleft.power = powerInput.value;
  else
    tankright.power = powerInput.value;
}
 
function powerInput_in(){
  powerSlider.value = powerInput.value;
  if(tankleft.turn === true)
    tankleft.power = powerInput.value;
  else
    tankright.power = powerInput.value;
}

Remember the fire() function we had made, now it will be executed on clicking of fire button. For power, we have 2 places where we can change power : 1) Power text input 2) Power slider

So we have two different functions taking care of both the possibilities.

When both players play the game, imagine the left player has set the power to 70 and fired. Now the right player plays his turn and now again it’s the turn of left player. But now the left player will see the power as initial power (50) which we don’t want to happen so we need to update the power and angle values after every switching of turn using the switchTurn() function.

//THE FUNCTION TO UPDATE POWER AND ANGLE OF TANKS (called in switchTurn function)
function updateAnglePower(whichTank){
  if(whichTank === "left"){
    powerInput.value = tankleft.power;
    powerSlider.value = tankleft.power;
    angleInput.value = tankleft.nozzle.alpha * 180/Math.PI;
  }
  else if(whichTank === "right"){
    powerInput.value = tankright.power;
    powerSlider.value = tankright.power;
    angleInput.value = tankright.nozzle.alpha * 180/Math.PI;
  }
}

Now the switchTurn() function should look like this :

function switchTurn(){
  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;
  }
}

Finally putting it all together, your eventListener.js should look like this :

var moveBtns = document.querySelectorAll("#move button"),
  fireBtn = document.querySelector("#fireAndPower button.statBox"),
  powerInput = document.querySelector("#power p input"),
  powerSlider = document.querySelector("#myRange"),
  angleBtns = document.querySelectorAll("#angle button"),
  angleInput = document.querySelector("#angle input");
 
//MOVE BUTTON EVENT LISTENERS AND FUNCTIONS
moveBtns[0].addEventListener("click",moveLeft);
moveBtns[1].addEventListener("click",moveRight);
 
var tankleftMoveCount = 1, tankrightMoveCount = 1;
 
function moveLeft(){  
  if(tankleft.turn === true && tankleftMoveCount<=4)
  {
    if(tankleft.pos_index >= 40)
      tankleft.pos_index-=20;
    tankleftMoveCount++;
  }
  else if(tankright.turn === true && tankrightMoveCount<=4)
  {
    tankright.pos_index-=20;
    tankrightMoveCount++;
  }
}
 
function moveRight(){  
  if(tankleft.turn === true && tankleftMoveCount<=4)
  {
    tankleft.pos_index+=20;
    tankleftMoveCount++;
  }
  else if(tankright.turn === true && tankrightMoveCount<=4)
  {
    if(tankright.pos_index <= canvas.scrollWidth-120)
      tankright.pos_index+=20;
    tankrightMoveCount++;
  }
}
 
//ANGLE BUTTONS EVENT LISTENERS AND FUNCTIONS
angleBtns[0].addEventListener("click",angleAdd);
angleBtns[1].addEventListener("click",angleSub);
 
function angleAdd(){
  if(angleInput.value<90)
    angleInput.value++;
 
  if(tankleft.turn === true)
    tankleft.nozzle.alpha = angleInput.value*Math.PI/180;
  else
    tankright.nozzle.alpha = angleInput.value*Math.PI/180;
}
 
function angleSub(){
  if(angleInput.value>0)
    angleInput.value--;
 
  if(tankleft.turn === true)
    tankleft.nozzle.alpha = angleInput.value*Math.PI/180;
  else
    tankright.nozzle.alpha = angleInput.value*Math.PI/180;
}
 
//FIRE BUTTON EVENT LISTENER
fireBtn.addEventListener("click",fire);
 
//POWER SLIDER EVENT LISTENERS AND FUNCTIONS
powerInput.addEventListener("input",powerInput_in);
powerSlider.addEventListener("input",powerSlider_in);
 
function powerSlider_in(){
  powerInput.value = powerSlider.value;
  if(tankleft.turn === true)
    tankleft.power = powerInput.value;
  else
    tankright.power = powerInput.value;
}
 
function powerInput_in(){
  powerSlider.value = powerInput.value;
  if(tankleft.turn === true)
    tankleft.power = powerInput.value;
  else
    tankright.power = powerInput.value;
}
 
//THE FUNCTION TO UPDATE POWER AND ANGLE OF TANKS (called in switchTurn function)
function updateAnglePower(whichTank){
  if(whichTank === "left"){
    powerInput.value = tankleft.power;
    powerSlider.value = tankleft.power;
    angleInput.value = tankleft.nozzle.alpha * 180/Math.PI;
  }
  else if(whichTank === "right"){
    powerInput.value = tankright.power;
    powerSlider.value = tankright.power;
    angleInput.value = tankright.nozzle.alpha * 180/Math.PI;
  }
}

Run the project and verify if the buttons are working.

Now we create function for updating scores of player and a winning state function.