Simple Game, issue with adding 2nd set of array

Commodore-1 — Wed, 30 Sep 2020 15:04:29 +0000

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>

problem with this Javascript code, im noob btw

Commodore-1 — Tue, 22 Sep 2020 16:30:43 +0000

we have an array of numbers and we only want to print out the even ones: (part of code is missing in the note i have and i cant figure it out!)

let numbers = [1, 2, 3, 4, 5, 6]
var i = 0;
while (i 
    if (numbers[i] % 2 != 0) { continue; }    print(numbers[i]);}

DEV Community: Commodore-1

Simple Game, issue with adding 2nd set of array

problem with this Javascript code, im noob btw