Open In App

Corona Fighter Game using JavaScript

Last Updated : 12 Apr, 2023
Comments
Improve
Suggest changes
Like Article
Like
Report

In this article, we will create a covid fighter game using HTML, CSS, and JavaScript. In this game, we will create three objects the first object will represent the user which have to cross several hurdles to reach the final object.

Approach: We will create the HTML layout first, style it using CSS, and then write the logic in JavaScript. In our game, the first object represents the earth, the second represents the coronavirus, and the third represents the vaccine.

HTML code: We will use HTML to design the web page structure or layout. Create HTML canvas with id "mycanvas". Include the JavaScript file "covid.js" in the HTML code.

HTML 
<!DOCTYPE html>
<html>

<body>
      <h1>COVID-19 Fighter Game</h1>
      <canvas id="mycanvas"></canvas>
      <script src="covid.js"></script>
</body>

</html>

CSS code: CSS is used to give general styling and make it more visually appealing. Give general styling to the whole page like color, alignment, and background color. We use flex to center canvas and set the background image to the background of our game. Include the following in the above HTML code in the style section of head part of the code.

body {
    text-align: center;
    color: #ffff;
    background: #000;
}
#mycanvas{
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(Assets/bg.gif)
    background-size: cover;
}

Output: The result of the HTML layout and CSS styling looks like the following.

The resultant output does not look like the desired output but we will adjust canvas height and width using JavaScript.

Logic: The main logic part is implemented using JavaScript.

  • According to our logic when the earth object collides with the coronavirus (the second object ) we will decrease the health of the player by 50 points.
  • The initial health of the player will be 100.
  • When the health of the player will be <= 0 our game will get over.
  • When the player will reach the third object player wins.
  • Our game is basically divided into basic six functions.
function load_assets(){
}
function init(){
}
function isOverlap(rect1, rect2){
}
function draw(){
}
function update(){
}
function gameloop(){
}

Step 1:

  • Initially, we will load all the required assets. We will require one enemy, one player, winning sound, losing sound and a third object which is vaccine.
  • We will create the function load_assets() which will load all the required assets.
JavaScript 
function load_assets(){

    // Enemy object
    enemy_img = new Image();
    enemy_img.src = "Assets/enemy.png";
    
    // Main user
    player_img = new Image();
    player_img.src = "Assets/fighter.png";
    
    // Vaccine
    gem_img = new Image;
    gem_img.src = "Assets/vac.gif";
    
    // Winning sound
    win = new Audio();
    win.src = "Audio/won.wav";
    
    // Losing sound
    lose = new Audio();
    lose.src = "Audio/dead.mp3";
}

Step 2:

  • In this step, we will initialize our state of the game. We will set the height and width of the canvas.
  • We will also set the number of second objects. We will create five enemies by setting their general position, speed,height and width.
  • We will also create the player object with properties like position, height, width, speed health, and moving state.
  • Create a gem object which will represent the final state of our game with properties like height, width and positions.
  • At the end, add the event listener with mousedown and mouseup events to move the player and stop the player.
  • We are ready with the initial setup. Let us look at the output below.
JavaScript 
function init(){
    cvs = document.getElementById('mycanvas');

    // Setting the height and width of canvas
    W = cvs.width = 1252;
    H = cvs.height = 516;

    // Getting the context of canvas
    pen = cvs.getContext('2d');

    // Initially setting the variable to false
    game_over = false;

    // Creating the enemies object with
    // coordinates x y width(w) height(h)
    // and speed  

    e1 = {
        x:200,
        y:50,
        w:80,
        h:80,
        speed:20,
    };
     e2 = {
        x:450,
        y:150,
        w:80,
        h:80,
        speed:35,
    };    
   
     e3 = {
        x:700,
        y:300,
        w:80,
        h:80,
        speed:40,
    };
    e4 = {
        x:900,
        y:100,
        w:80,
        h:80,
        speed:30,
    };
    
    // Array of enemies
    enemy = [e1, e2, e3, e4];
    
    // Creating the player object
    player = {
        x:20,
        y:H/2,
        w:110,
        h:110,
        speed:30,
        health:100,
        moving: "false"
    }
    // Creating the vaccine gem
    gem = {
        x:W-150,
        y:H/2,
        w:150,
        h:150,
    }

    // The main part lets move the player
    // using event mouse down and stop 
    //using mouse up
    cvs.addEventListener('mousedown', function(){
        console.log("Mouse Pressed"); 
        player.moving = true;
    });
    cvs.addEventListener('mouseup', function(){
        console.log("Mouse Released"); 
        player.moving = false;
    });
}

Output:

Step 3:

  • In this step, we will see the overlap function which we will use to check if our player is colliding with some other object may be an enemy or a gem(vaccine).
JavaScript 
function isOverlap(rect1, rect2) {
    if (rect1.x < rect2.x + rect2.w &&
        rect1.x + rect1.w > rect2.x &&
        rect1.y < rect2.y + rect2.h &&
        rect1.y + rect1.h > rect2.y) {
            return true;
    }
    return false;
}

Step 4:

  • We will see the draw() function which will help in drawing graphical images of the enemy player and gem in their respective position.
JavaScript 
function draw() {

    // Drawing the images
    for(let i = 0; i < enemy.length; i++) {
        pen.drawImage(enemy_img, enemy[i].x, 
          enemy[i].y, enemy[i].w, enemy[i].h);
    }

    // Draw the player
    pen.drawImage(player_img, player.x, 
        player.y, player.w, player.h);

    // Draw the vaccine
    pen.drawImage(gem_img, gem.x, 
        gem.y, gem.w, gem.h);

    // Displaying score
    pen.fillStyle = "white";
    pen.font = "30px Roboto";
    pen.fillText("Score " + 
        player.health, 30, 30);
}

Step 5: 

  • The following implements the update() function.
  • It returns when the game is over.
  • If the player is still moving, it will increase the player's speed and health.
  • If our player is colliding with any of the enemies, it will play the losing sound and decrease the health by 50 points.
  • If health goes negative or 0, the game is over and it returns.
  • If the game is still not over we will see if our player is colliding with the vaccine(gem). In this case the game is over which plays the winning sound, and alert the score.
  • If the game is still not over, it will adjust the speed and positions of the enemy.
JavaScript 
function update() {

    // If player is moving
    if(game_over){
        return;
    }
    if(player.moving == true){
        player.x += player.speed;
        player.health += 20;
    }

    // Checking collision of player
    // with all enemies
    for(let i = 0; i < enemy.length; i++){
        if(isOverlap(enemy[i], player)){
            lose.play();
            player.health -= 50;
            if(player.health < 0){
                draw();
                lose.play();
                alert("You Lose ");
                game_over = true;
                return;
            }
        }
    }

    // checking the player and vaccine
    // collision for the win.
    if(isOverlap(player, gem)){
        win.play();
        alert("You Won " + player.health);
        game_over = true;
        return;
    }

    // Adjusting the speed and positions
    // of enemy
    for(let i = 0; i<enemy.length; i++){
        enemy[i].y += enemy[i].speed;
        if(enemy[i].y > H-enemy[i].h || enemy[i].y <= 0){
            enemy[i].speed *= -1;
        }
    }
}

Step 6:

  • Let us complete the gameloop() function which we will use to run the game.
  • If the state of the game is over, it will clear the whole interval which we are calling in the end.
  • We will draw the object and update the things according to the user's action.
JavaScript 
function gameloop(){
    if(game_over){
        clearInterval(f);
    }
    draw();
    update();
}

Step 7:

  • Note: We call all the functions together in the JavaScript file "covid.js".
  • First, we will call the load_assets() and init() function.
  • We will call the gameloop() function in an interval of every 100ms.
JavaScript 
load_assets();
init();
var f = setInterval(gameloop, 100);

Output:

Source Code:

https://github.com/Nandini-72/Covid_Fighter_Game

Next Article
Introduction to JavaScript

N
NANDINIJAIN
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox