AI game creator

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

No:32623

←

Prev Next

→

Subway run game
Developer User14809｜Date and time 23/12/31 14:54:46
Build time 29.64 sec｜Game capacity 3.694KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Subway Run Game</title>
</head>
<body>
    <canvas id="gameCanvas" width="800" height="400"></canvas>
    <script>
        // Game variables
        const canvas = document.getElementById("gameCanvas");
        const context = canvas.getContext("2d");
        
        const player = {
            x: 50,
            y: 150,
            speed: 5,
            jumpForce: 20,
            isJumping: false,
            width: 50,
            height: 50,
            color: "#0000FF"
        };

const obstacles = [
            { x: 400, y: 370, width: 50, height: 30, color: "#FF0000" },
            { x: 600, y: 370, width: 50, height: 70, color: "#FF0000" }
        ];

let score = 0;

// Functions
        function drawPlayer() {
            context.fillStyle = player.color;
            context.fillRect(player.x, player.y, player.width, player.height);
        }

function drawObstacles() {
            obstacles.forEach(obstacle => {
                context.fillStyle = obstacle.color;
                context.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
            });
        }

function movePlayer(direction) {
            if (direction === "left" && player.x > 0) {
                player.x -= player.speed;
            } else if (direction === "right" && player.x < canvas.width - player.width) {
                player.x += player.speed;
            }
        }

function jump() {
            if (!player.isJumping) {
                player.isJumping = true;
                player.y -= player.jumpForce;
            }
        }

function collisionDetection() {
            obstacles.forEach(obstacle => {
                if (
                    player.x < obstacle.x + obstacle.width &&
                    player.x + player.width > obstacle.x &&
                    player.y < obstacle.y + obstacle.height &&
                    player.y + player.height > obstacle.y
                ) {
                    gameOver();
                }
            });
        }

function updateScore() {
            context.font = "16px Arial";
            context.fillStyle = "#000000";
            context.fillText("Score: " + score, 10, 20);
        }

function gameOver() {
            clearInterval(game);
            alert("Game Over! Your score was: " + score);
            score = 0;
            player.x = 50;
            player.y = 150;
            startGame();
        }

function startGame() {
            game = setInterval(() => {
                context.clearRect(0, 0, canvas.width, canvas.height);
                drawPlayer();
                drawObstacles();
                updateScore();
                moveObstacles();
                collisionDetection();
            }, 20);
        }

// Event Listeners
        document.addEventListener("keydown", function(event) {
            if (event.code === "ArrowLeft") {
                movePlayer("left");
            } else if (event.code === "ArrowRight") {
                movePlayer("right");
            } else if (event.code === "Space") {
                jump();
            }
        });

startGame();
    </script>
</body>
</html>