Square Jumper

Square Jumper Game

Press space to jump
3 lives
Game Over Screen
Classes as external files

index.html

<html>

<head>

</head>

<body>

</body>

</html>

sketch.js

//create global variables

var p; //store player instance

let obs = []; //array - to store instance of obstacles

let score = 0; //int -set lives

let lives = 3; //int set lives

let play = true; //boolean - game playing

let resetButton;

function preload() {

}

function setup() {

createCanvas(640, 360); // set canvas size

background(200); //set background colour

p = new player(); //create a player instance

buildObs();

}

function draw() {

if (frameCount % 120 == 0 && play == true) { //create a new obstacle every second 120/s

buildObs(); // create a new obstacle with function

}

background(200); //draw background

p.show(); //show player

p.move(); //check for player movement

p.jump(); //check for player jump

drawScore(); //update and draw score

moveObs(); //move the obstacles in the array

endGame(); //check for end of game

}

//draw the score and lives every frame

function drawScore() {

if (play == true) {

textSize(15);

text("Score: " + score, 10, 10, 200, 200);

text("Lives: " + lives, 550, 10, 200, 200);

}

//create an instance of obstacle and move item

function buildObs() {

let o = new obstacle(); //create an obstacle

obs.push(o); //push instance on obstacle to the array

}

//loop through and move obstacles and check for collision

function moveObs() {

for (var i = 0; i < obs.length; i++) { //loop through the array of obstacles

obs[i].move(); //move object

if (collideRectRect(p.x, p.y, 50, 50, obs[i].x, obs[i].y, 25, 25)) { //check for collision

console.log("hit"); //check for hit and print console

obs.splice(i, 1); //remove obstacle from array -remove screen

lives--; //deduct lives

} else if (obs[i].checkOff()) { //check to see if off screen

obs.splice(i, 1); //remove item from array

score++; //If passed - update score by 1

}

//check for end of game

function endGame() {

if (lives <= 0) {

play = false; //change play to false, this will stop timer

textSize(40);

text("GAME OVER", width / 3, height / 2, 400, 200); // print game over message

textSize(20);

text("Score:" + score, width / 2, 220, 400, 200); //print score message

resetButton = createButton('Restart'); //create a button

resetButton.position(width / 2, 10, 65); //set position button

resetButton.mousePressed(reset); //add event listener for reset function

}

//restart the game

function reset() {

lives = 3;

score = 0;

play = true;

}

player.js

class player {

constructor() {

this.x = 50;

this.y = height-50;

this.gravity = 2;

this.vy =0;

}

//listen for jump

jump() {

if (keyIsDown(32)) {

this.vy = -20;

}

//update location of the player

move() {

this.y += this.vy

this.vy += this.gravity;

this.y = constrain(this.y,0,height-50);

}

//display the player

show(){

fill(100);

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

}

obstacle.js

class obstacle{

constructor(){

this.x = width-25;

this.y= height-25;

this.off = false; //keep track of when on and off the screen

}

//move the obstacle along the screen

move(){

if(this.x>0){

this.x -=10;

}else{

this.off = true;

}

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

}

//return the boolean off

checkOff(){

return this.off

}