In the previous post we have seen how we can build snake game using canvas JavaScript. Today we will see how we can create space invader game by using JavaScript, HTML, CSS in this game we will learn more thing about canvas how we can use image, audio in our game.
Before we start creating the game you will to have some basic knowledge on JavaScript canvas and HTML.
Step 1 : Let create basic HTML code.
<!DOCTYPE html>
<head>
<title>Snake games by simple coder</title>
</head>
<body>
<div id="padd">
<canvas id="canvas" width="700" height="500"></canvas>
<div id="id1">
<h4></h4>
<h5>score</h5>
</div>
<div id="id2">
<h4></h4>
<h5>left</h5>
</div>
</div>
</body>
</html>
We have created div container inside It canvas element of height 500 and width 500 with id as “canvas” and two div elements to display the score and life left.
Player spaceship
The Player can move left and right and fire a rocket to attack the enemy spaceship.
Enemy spaceship
The Enemy can only move forward and fire a rocket to attack the player. Enemy spaceship are created dynamically.
Step 2 :Define player and enemy variables.
Player variable contains x, y and height.
player = {
x: 350,
y: 450,
hx: 50,
hy: 50
};
Enemy is an array to hold enemies having random x and y values, live(determine whether its live or not).
enmy = [];
enmy[0] = {
x: Math.round(Math.random() * 650),
y: 0,
live: 1
};
misslex[0] = enmy[0].x;
missley[0] = enmy[0].y;
explo = [];
explo[0] = {
x: player.x,
y: 450,
used: 1
};
Step 3 : Creation and controlling of Enemy Spaceship
Code to create enemy spaceship
function createenemy() {
newx = Math.round(Math.random() * 650);
newy = 0;
newlive = 1;
var newenemy = {
x: newx,
y: newy,
live: newlive
};
var newmisslex = newenemy.x;
var newmissley = newenemy.y;
misslex.unshift(newmisslex);
missley.unshift(newmissley);
enmy.unshift(newenemy);
}
Code to move the enemy spaceship forward.
function moveenemy() {
for (var i = 0; i < enmy.length; i++) {
if (enmy[i].y <= height) {
enmy[i].y = enmy[i].y + 5;
} else {
enmy.pop();
}
}
}
Code to create enemy spaceship rocket.
function moveenemymissle() {
c3++;
for (var i = 0; i < misslex.length; i++) {
if (c3 == 15) {
var newmisslex = enmy[i].x;
var newmissley = enmy[i].y;
misslex.unshift(newmisslex);
missley.unshift(newmissley);
c3 = 0;
}
if (missley[i] <= height - 10) {
missley[i] = missley[i] + 10;
ctx.drawImage(rockete, misslex[i] + 15, missley[i], 10, 10);
} else {
misslex.pop();
missley.pop();
}
}
}
Code to check is enemy rocket hit player spaceship or not.
function attackplayer() {
for (var i = 0; i < misslex.length; i++) {
if (misslex[i] >= player.x - 20 && misslex[i] <= player.x + 40 && missley[i] >= 450 && missley[i] <= 490) {
ctx.drawImage(expl, player.x, player.y, 40, 40);
live--;
missley.pop();
misslex.pop();
if (live < 0) {
gameover = 0;
gamelost();
clearInterval(game);
}
}
}
}