Corona Fighter Game using JavaScript
Last Updated :
12 Apr, 2023
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_img = new Image();
enemy_img.src = "Assets/enemy.png";
player_img = new Image();
player_img.src = "Assets/fighter.png";
gem_img = new Image;
gem_img.src = "Assets/vac.gif";
win = new Audio();
win.src = "Audio/won.wav";
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');
W = cvs.width = 1252;
H = cvs.height = 516;
pen = cvs.getContext('2d');
game_over = false;
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,
};
enemy = [e1, e2, e3, e4];
player = {
x:20,
y:H/2,
w:110,
h:110,
speed:30,
health:100,
moving: "false"
}
gem = {
x:W-150,
y:H/2,
w:150,
h:150,
}
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() {
for(let i = 0; i < enemy.length; i++) {
pen.drawImage(enemy_img, enemy[i].x,
enemy[i].y, enemy[i].w, enemy[i].h);
}
pen.drawImage(player_img, player.x,
player.y, player.w, player.h);
pen.drawImage(gem_img, gem.x,
gem.y, gem.w, gem.h);
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(game_over){
return;
}
if(player.moving == true){
player.x += player.speed;
player.health += 20;
}
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;
}
}
}
if(isOverlap(player, gem)){
win.play();
alert("You Won " + player.health);
game_over = true;
return;
}
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
Similar Reads
Create a Bingo Game Using JavaScript
Bingo is a fun and popular game that relies on luck and strategy. In this tutorial, we'll show you how to make a simple Bingo game using JavaScript. Whether you're a beginner or just looking for a fun project, this guide will walk you through the process step by step. Prerequisites:HTMLCSSJavaScript
6 min read
Building a Dice Game using JavaScript
We will be building a Dice Game Project using HTML, CSS, and JavaScript. The Dice Game is based on a two-player. Both players roll the dice and the player who gets the highest phase value will win the game. Images of Dice Phases: The list of dice phases images are given below. Save all the images in
5 min read
Create a Reflex Game using JavaScript
A reflex game is a simple fun game that measures your responding speed. It is quite simple to make and understand. We will be designing a reflex game that will calculate your responding speed. The rules are simple just press the stop button when you see the change in background color, and the time y
6 min read
Bubble Game using Javascript
In this article, we will create a Bubble Game using JavaScript. The Bubble Game is a classic interactive web game where players aim to pop bubbles that appear on the screen. It incorporates elements such as a hit counter, timer, and score tracker to enhance the gaming experience. Using JavaScript, p
4 min read
Crack-The-Code Game using JavaScript
It is quite easy to develop with some simple mathematics. A player has to guess the 3 numbers in order to win this game by using 5 simple hints. This is going to be a very interesting game. This game is built using simple mathematics in JavaScript. Prerequisites: Basic knowledge of some front-end te
5 min read
Pig Game Design using JavaScript
In this article, we will be explaining the steps and various logic required in making of the famous Pig Game, which is a virtual dice game. About Game: In this game, User Interface (UI) contains user/player that can do three things, they are as follows: There will be two players in this game. At the
11 min read
Build a Hangman Game using JavaScript
Hangman is a game where we have a hidden word, and we need to guess it by clicking on individual letters. When we click on a correct letter, it fills in a blank space. If we guess the word correctly, we win. But if we don't guess it within a certain number of tries, we lose the game. Each wrong gues
7 min read
Create a Coin Flip using HTML, CSS & JavaScript
We will display the styled INR coin to the user and there will be a styled button (Toss Coin). We will create the entire application structure using HTML and style the application with CSS classes and properties. Here, JavaScript will be used to manage the behavior of the Coin Flip and will be used
4 min read
Create a Colour Flipper using JavaScript
Color flippers are an entertaining way to add a bit of life to a website or application. With the help of JavaScript, it is possible to create a color flipper that will change the background color of an element with a click of a button. In this article, we will guide you through the steps required t
3 min read
Create a Simon Game using HTML CSS & JavaScript
In this article, we will see how to create a Simon Game using HTML, CSS, and JavaScript. In a Simon game, if the player succeeds, the series becomes progressively longer and more complex. Once the user is unable to repeat the designated order of the series at any point, the game is over. Prerequisit
5 min read