Repository

PabloJs

My GitHub Profile

Tank Fire Game Using HTML SVG (Part-4)

What Will I Learn?

• You will learn how to build games using HTML5 SVG.
• You will learn to create svg objects more easily using Pablojs.
• You will learn to move the svg object.
• You will learn splice() function in javascript.
• You will learn clearInterval() in javascript.
• You will learn confirm() function in javascript.
• You will learn window.location.reload(false) function in javascript.

Requirements

Visual Studio Code in GitHub

Difficulty

• Basic

Tutorial Contents

In my previous article, I placed independent balls on the playing field.

In this article, I'll set the tank to hit these balls and set the end of the game when the balls are on the tank and I will split the game into levels.

The game will start with 5 and when all the balls are hit, the next level will be 6 balls. When you hit all the balls the game will become even more difficult and the player will suffer from the fear of losing the game.

Since the balls start from any one of the playgrounds, the balls will have more balls in the environment and the probability of a ball being born in the area of the tank will increase. This also means that the game is over game before the player starts.

To overcome this problem, let's set a time at the beginning of the level and set the time the tank can be hit when this time is over.

Thus, if the ball occurs on the tank, we will prevent the game from ending.

Let's start to complete the game now.

I'm going to split this article into 3 parts so it's easy to understand:

• Hit the Balls
• Hit the Tank
• Level Skip and Immortality

Hit the Balls

I will create function to hit balls because we have divided the shot in 4 directions. We must provide this control for each of these aspects.

In this function, I should check the coordinates of the balls with the bullet coordinates for each ball.

I will call this function in every aspect of the bullet, so I can get the coordinates of the bullet as a parameter.

//hitting the ball
function ballShot(x,y){
}

Let us use the this function in each direction control in fireBuilder() function.

function fireBuilder(direction,x,y){

  if(direction=="up"){
…
ballShot(x,y);
}
  if(direction=="down"){
…
ballShot(x,y);
}
  if(direction=="left"){
…
ballShot(x,y);
}
  if(direction=="right"){
…
ballShot(x,y);
}
}

Now our function is ready for use. We can write the function.

Since we created the projectile with the rect() function, it is rectangular and drawn according to the initial coordinates. These initial coordinates differ in the direction they touch the ball.

The following picture describes it.

Screenshot 1

In this screenshot, the starting points are shown according to the direction of the projectile when the bullet hits the ball.

We need the coordinates of the projectile and the coordinates and radius of the ball to capture the moment when it hits the ball.

We create the balls using the circle() method and have center points. When the bullet hits the perimeter of the ball, we must destroy the balls. We use the radius of the balls to find their surroundings.

The following picture describes this situation.

Screenshot 2

With this information, we can catch the moment when bullet hits the ball.

We will use the ballNumber variable to find out how many balls are in the playing field. We have to reduce this ballNumber by one when the bullet hits the ball.

We were holding the properties of the ball in an array. When the bullet hits the ball, we must delete the svg elements of that ball and delete the ball itself.

We use the splice() method to delete the element from the array. The splice () method deletes elements from a given index, starting from a certain index. We want to delete one element here we need to set 1 index.

Since we moved the projectile over a certain period of time, we were moving in the setInterval() method.

When the bullet strikes the ball, we must stop it in this movement and destroy the bullet.

function ballShot(x,y){
  for (var i = 0; i < ballNumber; i++) {

    if (x>ballArray[i].ballX-ballArray[i].ballR&&x<ballArray[i].ballX+ballArray[i].ballR&&y>ballArray[i].ballY-ballArray[i].ballR&&y<ballArray[i].ballY+ballArray[i].ballR) {

      ballArray[i].ballObj.remove();
      ballArray.splice(i,1);//delete element
      ballNumber=ballNumber-1;
      clearInterval(fireinterval);//stop the movement of the bullet.
      fire.remove();
      fireFlag=1;//tank can fire
    }

  }
}

The picture below shows the tank hitting the balls.

Screenshot 3

Hit the Tank

When the balls come on the tank, we have to finish the game. We must control it in the interval we move the balls.

When we created the tank, we created more than one svg by combining the object so we can think of the tank as a square consisting of 25px.

The following screenshot explains how we should do a check.

Screenshot 4

If the center coordinates and radius of these balls touch the tank rectangle, we must finish the game.

We will provide this statement with the code below.

//hitting the tank
      if (tankX-25<ballArray[i].ballX+ballArray[i].ballR && tankX+25>ballArray[i].ballX-ballArray[i].ballR && tankY-25<ballArray[i].ballY+ballArray[i].ballR && tankY+25>ballArray[i].ballY-ballArray[i].ballR) {
      }

Let's check if the ball hits all sides and ask the player a question if ball's hit.

With javascript, we use the confirm() method to ask a question with answer is yes or no. If yes, it will enter the if block.
If the answer is no, it will enter into the else block.

If the user answer is yes, we need to reload the page.

To refresh the page, we need to run the window.location.reload(false) method.

  if (confirm('Would you like to play again')) {
               window.location.reload(false)
            } else {

            }
      }

Screenshot 5

Level Skip and Immortality

Let us first consider the concept of immortality.

I mentioned that the tank should be untouchable for a certain time when the level starts. If I define a variable and this variable is over a certain value, I do what I want if I don't put it in a collision field.

Let's define an eternity variable.

var eternity=100;// for immortality

if I decrease this variable every time the setInterval() method is run, and this value is greater than zero, I get 3 seconds if I prevent the collision.

eternity=eternity-1;
…
if ((eternity<0)&&(tankX-25<ballArray[i].ballX+ballArray[i].ballR && tankX+25>ballArray[i].ballX-ballArray[i].ballR && tankY-25<ballArray[i].ballY+ballArray[i].ballR && tankY+25>ballArray[i].ballY-ballArray[i].ballR))
{
…
}

Screenshot 6

We were reducing the ballNumber variable when the balls were shot.

When the ballNumber variable is zero, if we create the balls again as an excess of the initial value, we will pass the level.

Let's create a variable to hold the number of initial balls.

var ballNumberCopy=5;

To get to the next level, increase this variable and assign it to the value of ballNumber, and set theeternity` variable back to 100.

//next level
  if(ballNumber==0){
    ballNumberCopy=ballNumberCopy+1;
    ballNumber=ballNumberCopy;
    ballsBuilder();
    eternity=100;
  }

Screenshot 7

So we finished our game and made a game that would never end. We can print levels on the screen if you want.

Curriculum

Tank Fire Game Using HTML SVG (Part-1)

Tank Fire Game Using HTML SVG (Part-2)

Tank Fire Game Using HTML SVG (Part-3)

Proof of Work Done

Tank Fire Game Using HTML SVG (Part-4)