Untitled

<!DOCTYPE html>
<html>
<head>
    <title>Empire Plates Game</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="800" height="600"></canvas>
    <script>
        // Set up the game canvas
        const canvas = document.getElementById("gameCanvas");
        const ctx = canvas.getContext("2d");

        // Define colors
        const green = "#00FF00";
        const red = "#FF0000";

        // Load the player image
        const playerImage = new Image();
        playerImage.src = "player.png";
        const playerWidth = 64;
        const playerHeight = 64;

        // Load the plate images
        const suitablePlateImage = new Image();
        suitablePlateImage.src = "suitable_plate.png";
        const unsuitablePlateImage = new Image();
        unsuitablePlateImage.src = "unsuitable_plate.png";
        const plateWidth = 64;
        const plateHeight = 64;

        // Set the player's starting position
        let playerX = (canvas.width - playerWidth) / 2;
        let playerY = canvas.height - playerHeight;

        // Set the plate's initial position
        let plateX = Math.floor(Math.random() * (canvas.width - plateWidth));
        let plateY = -plateHeight;

        // Initialize player score
        let score = 0;

        // Handle keyboard input
        document.addEventListener("keydown", movePlayer);

        function movePlayer(event) {
            const keyPressed = event.keyCode;
            if (keyPressed === 37 && playerX > 0) { // Left arrow key
                playerX -= 5;
            } else if (keyPressed === 39 && playerX < canvas.width - playerWidth) { // Right arrow key
                playerX += 5;
            }
        }

        // Update the game state
        function update() {
            // Clear the canvas
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // Move the plate
            plateY += 5;

            // Check for plate-player collision
            if (plateY + plateHeight >= playerY && playerX <= plateX && plateX <= playerX + playerWidth) {
                // Player caught the plate
                if (plateImage === suitablePlateImage) {
                    score += 1;
                } else {
                    score -= 1;
                }

                // Respawn the plate
                plateX = Math.floor(Math.random() * (canvas.width - plateWidth));
                plateY = -plateHeight;
            }

            // Draw the player
            ctx.drawImage(playerImage, playerX, playerY, playerWidth, playerHeight);

            // Randomly select the plate's image
            plateImage = Math.random() < 0.5 ? suitablePlateImage : unsuitablePlateImage;

            // Draw the plate
            ctx.drawImage(plateImage, plateX, plateY, plateWidth, plateHeight);

            // Display the score
            ctx.font = "24px Arial";
            ctx.fillStyle = score >= 0 ? green : red;
            ctx.fillText("Score: " + score, 10, 30);

            // Check for game over
            if (score >= 10 || score <= -
Editor is loading...