Overview Player Platform Tube Block Goomba Background

%%html
<!DOCTYPE html>
<html>
<head>
    <style>
        #canvas {
            margin: 0;
            border: 1px solid white;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script>
        // Create empty canvas
        let canvas = document.getElementById('canvas');
        let c = canvas.getContext('2d');
        // Set the canvas dimensions
        canvas.width = 650;
        canvas.height = 400;
        // Define gravity value
        let gravity = 1.5;
        // Define the Player class
        class Player {
            constructor() {
                // Initial position and velocity of the player
                this.position = {
                    x: 100,
                    y: 100
                };
                this.velocity = {
                    x: 0,
                    y: 0
                };
                // Dimensions of the player
                this.width = 30;
                this.height = 30;
            }
            // Method to draw the player on the canvas
            draw() {
                c.fillStyle = 'red';
                c.fillRect(this.position.x, this.position.y, this.width, this.height);
            }
            // Method to update the player's position and velocity
            update() {
                this.draw();
                this.position.y += this.velocity.y;
                this.position.x += this.velocity.x;
                // Apply gravity if the player is not at the bottom
                if (this.position.y + this.height + this.velocity.y <= canvas.height)
                    this.velocity.y += gravity;
                else
                    this.velocity.y = 0;
            }
        }
        //--
        // NEW CODE - PLATFORM
        //--
        // Define the Platform class
        class Platform {
            constructor() {
                // Initial position of the platform
                this.position = {
                    x: 0,
                    y: 300
                }
                this.width = 650;
                this.height = 10;
            }
            // Method to draw the platform on the canvas
            draw() {
                c.fillStyle = 'blue';
                c.fillRect(this.position.x, this.position.y, this.width, this.height);
            }
        }
        // Create a platform object
        let platform = new Platform();
        // Create a player object
        let player = new Player();
        // Define keyboard keys and their states
        let keys = {
            right: {
                pressed: false
            },
            left: {
                pressed: false
            },
        }
        // Define the death pit
        let deathPit = {
            x: 250,
            y: 295,
            width: 150,
            height: 150,
        };
        // Animation function to continuously update and render the canvas
        function animate() {
            requestAnimationFrame(animate);
            c.clearRect(0, 0, canvas.width, canvas.height);
            //--
            // NEW CODE - DRAW PLATFORM
            //--
            platform.draw();
            //--
            // NEW CODE - DRAW DEATH PIT
            //--
            c.fillStyle = 'black';
            c.fillRect(deathPit.x, deathPit.y, deathPit.width, deathPit.height);
            // Control player's horizontal movement
            if (keys.right.pressed) {
                player.velocity.x = 5;
            } else if (keys.left.pressed) {
                player.velocity.x = -5;
            } else {
                player.velocity.x = 0;
            }
            //--
            // NEW CODE - PLATFORM COLLISIONS
            //--
            // Check for collision between player and platform
            if (
                player.position.y + player.height <= platform.position.y &&
                player.position.y + player.height + player.velocity.y >= platform.position.y &&
                player.position.x + player.width >= platform.position.x &&
                player.position.x <= platform.position.x + platform.width
            ) {
                player.velocity.y = 0;
                // Place the player on the platform
                player.position.y = platform.position.y - player.height;
            } else {
                // Apply gravity
                player.velocity.y += gravity;
            }
            // Check for collision between player and death pit
            if (
                player.position.x + player.width > deathPit.x &&
                player.position.x < deathPit.x + deathPit.width &&
                player.position.y + player.height > deathPit.y &&
                player.position.y < deathPit.y + deathPit.height
            ) {
                // Reset player position
                player.position.x = 100;
                player.position.y = 100;
            }
            // Update the player's position
            player.update();
        }
        // Start the animation loop
        animate();
        // Event listener for keydown events
        addEventListener('keydown', ({ keyCode }) => {
            switch (keyCode) {
                case 65:
                    keys.left.pressed = true;
                    break;
                case 68:
                    keys.right.pressed = true;
                    break;
                case 87:
                    // Check if the player is on the platform before allowing jumps
                    if (player.position.y + player.height === platform.position.y) {
                        player.velocity.y = -20;
                    }
                    break;
            }
        });
        // Event listener for keyup events
        addEventListener('keyup', ({ keyCode }) => {
            switch (keyCode) {
                case 65:
                    keys.left.pressed = false;
                    break;
                case 68:
                    keys.right.pressed = false;
                    break;
            }
        });
    </script>
</body>
</html>

<!DOCTYPE html>

Specific Hack

  • Add creative “death pits” (gap between platforms) that restart game if fallen through

Open Ended Hack

  • Experiment with different terrains (ice could cause sliding)