AI game creator

Click here for free DL of the app version that can save data.

No:20764

←

Prev Next

→

Racing game
Developer User9149｜Date and time 23/10/10 23:41:05
Build time 22.241 sec｜Game capacity 3.287KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
    <title>Racing Game</title>
</head>
<body>
    <canvas id="gameCanvas" width="480" height="320"></canvas>

// Game variables
        let carX = 220;
        const carWidth = 50;
        const carHeight = 100;
        let speed = 5;
        let score = 0;

// Keyboard input handling
        document.addEventListener("keydown", keyDownHandler);
        document.addEventListener("keyup", keyUpHandler);

let leftKey = false;
        let rightKey = false;

function keyDownHandler(event) {
            if (event.key === "ArrowLeft") {
                leftKey = true;
            } else if (event.key === "ArrowRight") {
                rightKey = true;
            }
        }

function keyUpHandler(event) {
            if (event.key === "ArrowLeft") {
                leftKey = false;
            } else if (event.key === "ArrowRight") {
                rightKey = false;
            }
        }

// Main game loop
        function gameLoop() {
            // Clear canvas
            context.clearRect(0, 0, canvas.width, canvas.height);

// Draw the car
            context.fillStyle = "red";
            context.fillRect(carX, canvas.height - carHeight, carWidth, carHeight);

// Move the car based on keyboard input
            if (leftKey && carX > 0) {
                carX -= speed;
            }
            if (rightKey && carX + carWidth < canvas.width) {
                carX += speed;
            }
            
            // Increase score
            score++;

// Display the score
            context.fillStyle = "black";
            context.font = "20px Arial";
            context.fillText("Score: " + score, 10, 30);

// Check for game over condition
            if (score > 1000) {
                endGame();
            } else {
                // Continue the game loop
                requestAnimationFrame(gameLoop);
            }
        }

// Start the game
        function startGame() {
            // Display game instructions
            context.fillStyle = "black";
            context.font = "25px Arial";
            context.fillText("Use the left and right arrow keys to move the car", 20, canvas.height / 2 - 20);
            context.fillText("Avoid obstacles and reach a score of 1000 to win!", 30, canvas.height / 2 + 20);

// Wait for user to start the game
            setTimeout(() => {
                // Clear canvas
                context.clearRect(0, 0, canvas.width, canvas.height);
                // Start the game loop
                gameLoop();
            }, 3000);
        }

// End the game
        function endGame() {
            // Display game over message
            context.clearRect(0, 0, canvas.width, canvas.height);
            context.fillStyle = "black";
            context.font = "30px Arial";
            context.fillText("Game Over", canvas.width / 2 - 75, canvas.height / 2);
        }

// Start the game when the page loads
        window.onload = startGame;

</script>
</body>
</html>