Shooter

Shooter Game

Example of a basic shooting game with a bullet and enemy class.
Instructions: Click the mouse to shoot
Classes internal to index.html file
No Game Over in this instance - how would you add?

index.html

<html>

<head>

</head>

<body>

///////////////////////////////

// enemy class constructor

class enemy{

constructor(){

this.x = random(400);

this.y = 10;

this.width = 20;

this.speed = 5;

this.remove = false;

}

// enemy update

update(){

if(this.y&<height){

this.y += this.speed;

fill(0,0,100);

rect(this.x,this.y,this.width,this.width);

}else{

this.remove = true;

}

///////////////////////////////

// bullet class constructor

class bullet{

constructor(x,y){

this.x = x;

this.y = y;

this.width = 20;

this.speed = 10;

this.remove = false;

}

// bullet update

update(){

if(this.y>0){

this.y-=this.speed;

fill(100,0,0);

rect(this.x,this.y,this.width,this.width);

}

else{

this.remove=true;

}

//////////////////////////////////////////////////

//sketch.js

//create empty arrays to store bullets and enemies

var bullets = [];

var enemies = [];

//initialise player position

player_x = 150;

player_y = 360;

//initialise score and lives

var score =0;

var lives = 3;

//setup canvas size and interval (1 second) to run the addEnemy function

//this time limit could also be a variable, reducing as the game levels up

function setup() {

createCanvas(400, 400);

setInterval(addEnemy,1000);

}

function draw() {

background(220);

//move bullets

//this concept is complex!

//loop through bullet array, update each bullet if the local variable remove is false

//if remove is true, splice the bullet from the array

for(var i = bullets.length-1>=0;i--){

if(bullets[i].remove == true){ //if bullet.remove becomes true

bullets.splice(i,1); //splice it from the array, which removes it from the screen

}else{

bullets[i].update(); //if bullet.remove stays false, keep updating the bullet

}

//move enemies

//similar to the bullet loop, but the if/else statements

//are opposite to the above just to show you how it can be done

//in a slightly different manner

for(var i = enemies.length-1>=0;i--){

if(enemies[i].remove != false){

enemies[i].update();

}else{

enemies.splice(i,1);

}

//draw player

fill(0,100,100)

player_x=mouseX;

rect(player_x,player_y,30,30);

checkHit(); //check for all collisions

//update score

fill(100,100,100);

text('Score: ' + score, 10,10);

//update lives

text('Lives: ' + lives, 300,10);

}

//remove all bullets and enemies when player hits bullet

function clearScreen(){

for(var i = bullets.length-1>=0;i--){

bullets.splice(i,1);

}

for(var j = enemies.length-1>=0;j--){

enemies.splice(j,1);

}

//check for collisions between bullets and enemies

function checkHit(){

//loop to check every enemy as there can be more than one on the screen

for(var j = enemies.length-1>=0;j--){

//check enemy collision on player

if(hit =collideRectRect(player_x,player_y,30,30,enemies[j].x,enemies[j].y,enemies[j].width,enemies[j].width)){

lives--;

clearScreen();

break; // this stops the loop as the player has lost a life

}

//for every enemy check to see if any bullet is hitting it

for(var i = bullets.length-1;i>=0;i--){

if(hit =collideRectRect(bullets[i].x,bullets[i].y,bullets[i].width,bullets[i].width,enemies[j].x,enemies[j].y,enemies[j].width,enemies[j].width)){

bullets.splice(i,1)

enemies.splice(j,1);

score++;

break;

}

//create a new instance of the enemy in a random position

function addEnemy(){

var e = new enemy();

enemies.push(e);

}

//when mouse clicked create a new bullet at the player x and y position

function mouseClicked(){

var b = new bullet(player_x+5 ,player_y+20);

bullets.push(b);

console.log('SHOOT!!!');

}

</script>

</body>

</html>