I need some help with a project I'm working on. I am busy trying to code my first canvas game ever. I'm pretty happy with the result so far but I can't for the life of me add a High score system into the game. I tried a few things and have determined that it would probably be easiest to use localStorage to save the scores but I'm a complete noob. If anyone could point me in the right direction That would be great.
This is my first time posting anything here so sorry if I left out something important.
You can see what I have done so far here: https://jsfiddle.net/Heino/hkwog58j/2/
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 512;
canvas.height = 480;
document.body.appendChild(canvas);
// Load the background image
var bgReady = false;
var bgImage = new Image();
var paused = false;
var collisionL = false;
var collisionR = false;
var collisionT = false;
var collisionB = false;
var again = false;
var available = false;
var double = false;
var spawn = false;
var coins = 0;
var finalScore = 0;
var wallImage = new Image();
wallImage.src = "https://heinostobbia.github.io/CATCHem/wall.jpg";
bgImage.onload = function() {
// show the background image
bgReady = true;
};
bgImage.src = "https://heinostobbia.github.io/CATCHem/background.png";
// Load the hero image
var heroReady = false;
var heroImage = new Image();
heroImage.onload = function() {
// show the hero image
heroReady = true;
};
if (coins <= 10) {
heroImage.src = "https://heinostobbia.github.io/CATCHem/hero.png";
}
// Load the monster image
var monsterReady = false;
var monsterImage = new Image();
var monster1Ready = false;
var monster1Image = new Image();
var monster2Ready = false;
var monster2Image = new Image();
monsterImage.onload = function() {
// show the monster image
monsterReady = true;
};
monster1Image.onload = function() {
// show the monster1 image
monster1Ready = true;
};
monster2Image.onload = function() {
// show the monster2 image
monster2Ready = true;
};
monsterImage.src = "https://heinostobbia.github.io/CATCHem/monster.png";
monster1Image.src = "https://heinostobbia.github.io/CATCHem/monster.png";
monster2Image.src = "https://heinostobbia.github.io/CATCHem/monster1.png";
// Load the coin image
var coinReady = false;
var coinImage = new Image();
coinImage.onload = function() {
// show the coin image
coinReady = true;
};
coinImage.src = "https://heinostobbia.github.io/CATCHem/coin.png";
// Create the game objects
var hero = {
speed: 256, // movement speed of hero in pixels per second
};
var monster = {};
var monster1 = {};
var monster2 = {};
var monstersCaught = 0;
var walls = {};
var coin = {};
// Handle keyboard controls
var keysDown = {};
var keysPress = {};
// Check for keys pressed where key represents the keycode captured
addEventListener(
"keydown",
function(key) {
keysDown[key.keyCode] = true;
},
false
);
addEventListener(
"keyup",
function(key) {
delete keysDown[key.keyCode];
},
false
);
addEventListener(
"keypress",
function(key) {
// pauses game when spacebar is pressed
if (key.keyCode == 32) {
if (paused) {
paused = false;
} else {
paused = true;
}
}
// starts new game when spacebar is pressed when game is finished
if (key.keyCode == 32 && finished) {
location.reload();
}
},
false
);
// Place the player in center of canvas
hero.x = canvas.width / 2;
hero.y = canvas.height / 2;
// Reset the monster and coin positions when player catches a monster
var reset = function() {
// Place the monster somewhere on the canvas randomly
monster.x = 32 + Math.random() * (canvas.width - 72);
monster.y = 32 + Math.random() * (canvas.height - 72);
if (monstersCaught >= 5) {
// Place the monster somewhere on the canvas randomly
monster1.x = 32 + Math.random() * (canvas.width - 72);
monster1.y = 32 + Math.random() * (canvas.height - 72);
}
fifth = monstersCaught % 10;
if (fifth == 9) {
// Place the monster somewhere on the canvas randomly
monster2.x = 32 + Math.random() * (canvas.width - 72);
monster2.y = 32 + Math.random() * (canvas.height - 72);
} else {
monster2.x = 600;
monster2.y = 600;
}
// Outer Walls
walls.x = canvas.width - 8;
walls.y = canvas.height - 8;
// Place the coin somewhere on the canvas randomly
if (coinReady) {
coin.x = 32 + Math.random() * (canvas.width - 72);
coin.y = 32 + Math.random() * (canvas.height - 72);
}
};
// Update game objects - change player position based on key pressed
var update = function(modifier) {
if (!paused && !finished) {
// arrow keys
if (38 in keysDown && !collisionT) {
// Player is holding UP arrow
hero.y -= hero.speed * modifier;
}
if (40 in keysDown && !collisionB) {
// Player is holding DOWN arrow
hero.y += hero.speed * modifier;
}
if (37 in keysDown && !collisionL) {
// Player is holding LEFT arrow
hero.x -= hero.speed * modifier;
}
if (39 in keysDown && !collisionR) {
// Player is holding RIGHT arrow
hero.x += hero.speed * modifier;
}
// W A S D keys
if (87 in keysDown && !collisionT) {
// Player is holding W key
hero.y -= hero.speed * modifier;
}
if (83 in keysDown && !collisionB) {
// Player is holding S key
hero.y += hero.speed * modifier;
}
if (65 in keysDown && !collisionL) {
// Player is holding A key
hero.x -= hero.speed * modifier;
}
if (68 in keysDown && !collisionR) {
// Player is holding D key
hero.x += hero.speed * modifier;
}
}
// Check if player and monster collide
if (hero.x <= monster.x + 32 && monster.x <= hero.x + 32 && hero.y <= monster.y + 32 && monster.y <= hero.y + 32) {
if (double) {
monstersCaught = monstersCaught + 2;
} else {
++monstersCaught;
}
available = false;
reset();
}
// places coin when monstersCaught in even number
var remainder = monstersCaught % 2;
if (remainder == 1) {
coinReady = true;
} else {
coinReady = false;
}
// Check if player and monster1 collide
if (hero.x <= monster1.x + 32 && monster1.x <= hero.x + 32 && hero.y <= monster1.y + 32 && monster1.y <= hero.y + 32) {
if (double) {
monstersCaught = monstersCaught + 2;
} else {
++monstersCaught;
}
available = false;
reset();
}
// Check if player and monster2 collide
if (hero.x <= monster2.x + 32 && monster2.x <= hero.x + 32 && hero.y <= monster2.y + 32 && monster2.y <= hero.y + 32 && !available) {
monster2.x = 32 + Math.random() * (canvas.width - 72);
monster2.y = 32 + Math.random() * (canvas.height - 72);
available = true;
}
if (hero.x <= monster2.x + 32 && monster2.x <= hero.x + 32 && hero.y <= monster2.y + 32 && monster2.y <= hero.y + 32 && available) {
if (double) {
monstersCaught = monstersCaught + 6;
} else {
monstersCaught = monstersCaught + 3;
}
available = false;
reset();
}
// Check if player and coin collide
if (coinReady) {
if (hero.x <= coin.x + 25 && coin.x <= hero.x + 25 && hero.y <= coin.y + 25 && coin.y <= hero.y + 25) {
++coins;
if (coins >= 5 && coins <= 6) {
heroImage.src = "https://heinostobbia.github.io/CATCHem/hero2.png";
double = true;
} else {
double = false;
}
if (coins >= 6 && !double) {
heroImage.src = "https://heinostobbia.github.io/CATCHem/hero.png";
double = false;
}
reset();
}
}
// Check if player and RIGHT Wall collide
if (hero.x > walls.x - 37) {
collisionR = true;
} else {
collisionR = false;
}
// Check if player and LEFT Wall collide
if (hero.x < (walls.x - 487)) {
collisionL = true;
} else {
collisionL = false;
}
// Check if player and TOP Wall collide
if (hero.y < (walls.y - 452)) {
collisionT = true;
} else {
collisionT = false;
}
// Check if player and BOTTOM Wall collide
if (hero.y > walls.y - 43) {
collisionB = true;
} else {
collisionB = false;
}
// Check if player and HORIZONTAL TOP maze collide
if (hero.y < walls.y - 333 && hero.y > walls.y - 385 && hero.x < walls.x - 124 && hero.x > walls.x - 126) {
collisionL = true;
}
if (hero.x < walls.x - 124) {
if (hero.y > walls.y - 385 && hero.y < walls.y - 380) {
collisionB = true;
}
if (hero.y > walls.y - 333 && hero.y < walls.y - 328) {
collisionT = true;
}
}
// Check if player and HORIZONTAL BOTTOM maze collide
if (hero.y > walls.y - 195 && hero.y < walls.y - 139 && hero.x > walls.x - 185 && hero.x < walls.x - 180) {
collisionR = true;
}
if (hero.x > walls.x - 185) {
if (hero.y > walls.y - 195 && hero.y < walls.y - 190) {
collisionB = true;
}
if (hero.y > walls.y - 140 && hero.y < walls.y - 135) {
collisionT = true;
}
}
// Check if player and VERTICAL MIDDLE maze collide
if (hero.x > walls.x - 290 && hero.x < walls.x - 243 && hero.y < walls.y - 333 && hero.y > walls.y - 447) {
collisionB = true;
}
if (hero.y < walls.y - 380 && hero.y > walls.y - 447) {
if (hero.x > walls.x - 297 && hero.x < walls.x - 292) {
collisionR = true;
}
if (hero.x > walls.x - 245 && hero.x < walls.x - 240) {
collisionL = true;
}
}
// Check if player and VERTICAL RIGHT maze collide
if (hero.x > walls.x - 184 && hero.x < walls.x - 132 && hero.y < walls.y - 70 && hero.y > walls.y - 75) {
collisionT = true;
}
if (hero.y > walls.y - 190 && hero.y < walls.y - 77) {
if (hero.x > walls.x - 187 && hero.x < walls.x - 182) {
collisionR = true;
}
if (hero.x < walls.x - 132 && hero.x > walls.x - 137) {
collisionL = true;
}
}
// Check if player and VERTICAL LEFT maze collide
if (hero.x > walls.x - 390 && hero.x < walls.x - 344 && hero.y > walls.y - 305 && hero.y < walls.y - 300) {
collisionB = true;
}
if (hero.y > walls.y - 305) {
if (hero.x > walls.x - 390 && hero.x < walls.x - 385) {
collisionR = true;
}
if (hero.x < walls.x - 344 && hero.x > walls.x - 349) {
collisionL = true;
}
}
// Check if monster and Horizontal Top maze Wall collide
if (monster.y < walls.y - 333 && monster.y > walls.y - 385 && monster.x < walls.x - 124) {
monster.y = monster.y - 12;
}
// Check if monster and Horizontal Bottom maze Wall collide
if (monster.y > walls.y - 190 && monster.y < walls.y - 140 && monster.x > walls.x - 185) {
monster.y = monster.y + 12;
}
// Check if monster and vertical Middle maze Wall collide
if (monster.x > walls.x - 297 && monster.x < walls.x - 245 && monster.y < walls.y - 333 && monster.y > walls.y - 447) {
monster.y = monster.y + 20;
monster.x = monster.x - 20;
}
// Check if monster and vertical right maze Wall collide
if (monster.x > walls.x - 184 && monster.x < walls.x - 132 && monster.y < walls.y - 70 && monster.y > walls.y - 195) {
monster.x = monster.x + 12;
}
// Check if monster and vertical left maze Wall collide
if (monster.x > walls.x - 390 && monster.x < walls.x - 344 && monster.y > walls.y - 305) {
monster.x = monster.x - 12;
}
// Check if monster1 and Horizontal Top maze Wall collide
if (monster1.y < walls.y - 333 && monster1.y > walls.y - 385 && monster1.x < walls.x - 124) {
monster1.y = monster.y + 12;
}
// Check if monster1 and Horizontal Bottom maze Wall collide
if (monster1.y > walls.y - 190 && monster1.y < walls.y - 140 && monster1.x > walls.x - 185) {
monster1.y = monster1.y + 12;
}
// Check if monster1 and vertical Middle maze Wall collide
if (monster1.x > walls.x - 297 && monster1.x < walls.x - 245 && monster1.y < walls.y - 333 && monster1.y > walls.y - 447) {
monster1.x = monster1.x - 20;
monster1.y = monster1.y - 20;
}
// Check if monster1 and vertical right maze Wall collide
if (monster1.x > walls.x - 184 && monster1.x < walls.x - 132 && monster1.y < walls.y - 70 && monster1.y > walls.y - 195) {
monster1.x = monster1.x + 12;
}
// Check if monster1 and vertical left maze Wall collide
if (monster1.x > walls.x - 390 && monster1.x < walls.x - 344 && monster1.y > walls.y - 305) {
monster1.x = monster1.x - 12;
}
// Check if monster2 and Horizontal Top maze Wall collide
if (monster2.y < walls.y - 333 && monster2.y > walls.y - 385 && monster2.x < walls.x - 124) {
monster2.y = monster.y + 12;
}
// Check if monster2 and Horizontal Bottom maze Wall collide
if (monster2.y > walls.y - 190 && monster2.y < walls.y - 140 && monster2.x > walls.x - 185) {
monster2.y = monster2.y + 12;
}
// Check if monster2 and vertical Middle maze Wall collide
if (monster2.x > walls.x - 297 && monster2.x < walls.x - 245 && monster2.y < walls.y - 333 && monster2.y > walls.y - 447) {
monster2.x = monster2.x - 20;
monster2.y = monster2.y - 20;
}
// Check if monster2 and vertical right maze Wall collide
if (monster2.x > walls.x - 184 && monster2.x < walls.x - 132 && monster2.y < walls.y - 70 && monster2.y > walls.y - 195) {
monster2.x = monster2.x + 12;
}
// Check if monster2 and vertical left maze Wall collide
if (monster2.x > walls.x - 390 && monster2.x < walls.x - 344 && monster2.y > walls.y - 305) {
monster2.x = monster2.x - 12;
}
// Check if coin and Horizontal Top maze Wall collide
if (coin.y < walls.y - 333 && coin.y > walls.y - 385 && coin.x < walls.x - 124) {
coin.y = coin.y - 15;
}
// Check if coin and Horizontal Bottom maze Wall collide
if (coin.y > walls.y - 190 && coin.y < walls.y - 140 && coin.x > walls.x - 185) {
coin.y = coin.y + 15;
}
// Check if coin and vertical Middle maze Wall collide
if (coin.x > walls.x - 297 && coin.x < walls.x - 245 && coin.y < walls.y - 333 && coin.y > walls.y - 447) {
coin.x = coin.x - 15;
}
// Check if coin and vertical right maze Wall collide
if (coin.x > walls.x - 184 && coin.x < walls.x - 132 && coin.y < walls.y - 70 && coin.y > walls.y - 195) {
coin.x = coin.x + 15;
}
// Check if coin and vertical left maze Wall collide
if (coin.x > walls.x - 390 && coin.x < walls.x - 344 && coin.y > walls.y - 305) {
coin.x = coin.x - 15;
}
};
// Draws everything on canvas
function render() {
if (bgReady) {
ctx.drawImage(bgImage, 0, 0);
}
if (heroReady) {
ctx.drawImage(heroImage, hero.x, hero.y);
}
if (monsterReady) {
ctx.drawImage(monsterImage, monster.x, monster.y);
}
if (monster1Ready) {
ctx.drawImage(monster1Image, monster1.x, monster1.y);
}
if (monster2Ready) {
ctx.drawImage(monster2Image, monster2.x, monster2.y);
}
if (coinReady && !finished) {
ctx.drawImage(coinImage, coin.x, coin.y);
}
// OUTER Walls
texture = ctx.createPattern(wallImage, "repeat");
ctx.strokeStyle = texture;
ctx.strokeRect(5.5, 9, 501, 463);
ctx.lineWidth = 18;
// MAZE Walls
ctx.beginPath();
//MAZE wall horizontal top
ctx.moveTo(8, 130);
ctx.lineTo(380, 130);
ctx.stroke();
// MAZE Wall horizontal bottom
ctx.moveTo(500, 320);
ctx.lineTo(350, 320);
ctx.stroke();
// MAZE wall vertical middle
ctx.moveTo(250, 130);
ctx.lineTo(250, 60);
ctx.stroke();
// MAZE wall Vertical Right
ctx.moveTo(150, 200);
ctx.lineTo(150, 500);
ctx.stroke();
// MAZE wall Vertical left
ctx.moveTo(359, 320);
ctx.lineTo(359, 400);
ctx.stroke();
// Display score and time
ctx.fillStyle = "rgb(250, 250, 250)";
ctx.font = "20px Helvetica";
ctx.textAlign = "left";
ctx.textBaseline = "top";
ctx.fillText("Score: " + monstersCaught, 20, 20);
ctx.fillText("Time: " + count, 20, 45);
ctx.textAlign = "right";
ctx.textBaseline = "top";
ctx.fillText("Coins: " + coins, 495, 20);
// Display game over message when timer finished
if (finished) {
ctx.fillText("Game over!", 300, 220);
ctx.fillText("Press SPACE to play again", 365, 250);
}
// display paused message when paused
if (paused == true && finished == false) {
ctx.fillText("Paused", 300, 220);
}
};
var count = 30; // Game Length in seconds (Default = 30)
var finished = false;
var counter = function() {
// stops timer while hame is paused
if (paused) {
count = count;
} else {
count = count - 1;
}
// when count reaches 0 clear the timer, hide the monster and hero and finish the game
if (count <= 0) {
// stop the timer
clearInterval(counter);
// set game to finished
finished = true;
count = 0;
finalScore = monstersCaught;
// hide monster, hero and coin
monsterReady = false;
monster1Ready = false;
monster2Ready = false;
heroReady = false;
coinReady = false;
}
};
// timer interval is every second (1000ms)
setInterval(counter, 1000);
// THE MAIN GAME LOOP
var main = function() {
// run the update function
update(0.02); // DO NOT CHANGE!!! (character speed default = 0.02)
// run the render function
render();
// Request to do this again ASAP
requestAnimationFrame(main);
};
// Cross-browser support for requestAnimationFrame
requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || window.mozRequestAnimationFrame;
// Let's play this game!
reset();
main();
