Hi guys, im just trying to learn basics on JavaScript and this game code i have no problem understanding, but i thought now lets add more things and make it interesting and this is how i hit a wall...
this code below is simple cross game with blocks and goal which 6-blocks i have set on one array and now i was thinking to add another array for goals to like have 4 goals on the 4 corner of the square, but as soon as i add 2nd array for my goals the page crashes and it shows nothing but my back ground, could anyone see why i cant add 2nd set of array here and have them on draw function! also if u have any good tips for levels pls do let me know, im thinking to add levels like speed up the blocks and so on as player reaches the goal each time so its harder next level...
<!DOCTYPE html>
<html>
<head>
<title>Crossing Game</title>
<style type="text/css">
canvas {
border: 5px solid rgb(251, 241, 105);
background-color: rgb(59, 138, 246);
}
</style>
</head>
<body>
<h2>My Game</h2>
<canvas id='myCanvas' width='600' height='600'></canvas>
<script type="text/javascript">
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
const screenWidth = 600;
const screenHeight = 600;
var isGameLive = true;
class GameCharacter {
constructor (x, y, width, height, color, xSpeed, ySpeed){
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.color = color;
this.xSpeed = xSpeed;
this.ySpeed = ySpeed;
this.maxSpeed = 4;
}
move(){
this.x += this.xSpeed;
if (this.x < 0) {
this.x = 0;
} else if (this.x > screenWidth - 10) {
this.x = 590;
}
this.y += this.ySpeed;
if (this.y > screenHeight - 35 || this.y < screenTop) {
this.ySpeed = -this.ySpeed;
}
}
}
document.onkeydown = function(event) {
switch(event.key) {
case 'ArrowRight':
player.xSpeed = player.maxSpeed;
break;
}
switch(event.key) {
case 'ArrowLeft':
player.xSpeed = -player.maxSpeed;
break;
}
switch(event.key) {
case 'ArrowUp':
player.ySpeed = -player.maxSpeed;
break;
}
switch(event.key) {
case 'ArrowDown':
player.ySpeed = player.maxSpeed;
break;
}
}
document.onkeyup = function(event) {
player.xSpeed = 0;
player.ySpeed = 0;
}
var checkCollisions = function(rect1, rect2) {
let rect1x2 = rect1.x + rect1.width;
let rect2x2 = rect2.x + rect2.width;
let rect1y2 = rect1.y + rect1.height;
let rect2y2 = rect2.y + rect2.height;
return rect1.x < rect2x2 && rect1x2 > rect2.x && rect1.y < rect2y2 && rect1y2 > rect2.y;
}
var draw = function() {
ctx.clearRect(0, 0, screenWidth, screenHeight);
ctx.fillStyle = player.color;
ctx.fillRect(player.x, player.y, player.width, player.height);
ctx.fillStyle = goalOne.color;
ctx.fillRect(goalOne.x, goalOne.y, goalOne.width, goalOne.height);
enemies.forEach(function(element){
ctx.fillStyle = element.color;
ctx.fillRect(element.x, element.y, element.width, element.height);
});
}
var update = function() {
player.move();
enemies.forEach(function(element) {
if (checkCollisions(player, element)) {
endGameLogic("Game Over!");
}
if (checkCollisions(player, goalOne)) {
endGameLogic("You Win!");
}
element.move();
});
}
var enemies = [
new GameCharacter (24, 75, 72, 35, "rgb(251, 241, 105)", 0, 2),
new GameCharacter (120, screenHeight - 110, 72, 35, "rgb(251, 241, 105)", 0, 1.5),
new GameCharacter (216, 75, 72, 35, "rgb(251, 241, 105)", 0, 1),
new GameCharacter (312, screenHeight - 110, 72, 35, "rgb(251, 241, 105)", 0, 1),
new GameCharacter (408, 75, 72, 35, "rgb(251, 241, 105)", 0, 1.5),
new GameCharacter (504, screenHeight - 110, 72, 35, "rgb(251, 241, 105)", 0, 2),
];
var player = new GameCharacter (295, 295, 10, 10, "rgb(0, 255, 0)", 0, 0);
var goalOne = new GameCharacter (0, 0, 15, 15, "rgb(0, 255, 0)", 0, 0);
var endGameLogic = function(text) {
isGameLive = false;
alert(text);
window.location = "";
}
var step = function() {
update();
draw();
if (isGameLive) {
window.requestAnimationFrame(step);
}
}
step();
</script>
</body>
</html>
Top comments (1)
ok i just found what caused the error here, just thought to explain in case anyone comes to revisit this:
found out when i was making the 2nd set of array for goals i made a stupid mistake to seperate the elements between arrays with semicolon ; instead of comma ,
as soon as i put the comma between the array element it went fine