Cyber punk arcade runner's game

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

No:19488

←

Prev Next

→

Cyber punk arcade runner
Developer User8646｜Date and time 23/10/4 10:03:39
Build time 10.32 sec｜Game capacity 2.785KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Cyber Punk Arcade Runner</title>
</head>
<body>
    <canvas id="gameCanvas" width="800" height="400" style="border:1px solid #000000;"></canvas>

// Pictograms for the game characters and obstacles
        const playerImage = new Image();
        playerImage.src = "player.png";
        const obstacleImage = new Image();
        obstacleImage.src = "obstacle.png";

// Player object
        const player = {
            x: 50,
            y: canvas.height / 2 - 50,
            width: 50,
            height: 50,
            speedX: 0,
            speedY: 0
        };

// Obstacle object
        const obstacle = {
            x: canvas.width,
            y: canvas.height / 2 - 50,
            width: 50,
            height: 50,
            speed: -5
        };

// Keyboard controls for player movement
        document.addEventListener("keydown", keyDownHandler, false);
        document.addEventListener("keyup", keyUpHandler, false);

let rightPressed = false;
        let leftPressed = false;

function keyDownHandler(event) {
            if (event.keyCode === 39) {
                rightPressed = true;
            } else if (event.keyCode === 37) {
                leftPressed = true;
            }
        }

function keyUpHandler(event) {
            if (event.keyCode === 39) {
                rightPressed = false;
            } else if (event.keyCode === 37) {
                leftPressed = false;
            }
        }

function drawPlayer() {
            context.drawImage(playerImage, player.x, player.y, player.width, player.height);
        }

function drawObstacle() {
            context.drawImage(obstacleImage, obstacle.x, obstacle.y, obstacle.width, obstacle.height);
        }

function updateGame() {
            context.clearRect(0, 0, canvas.width, canvas.height);

if (rightPressed) {
                player.x += 5;
            } else if (leftPressed) {
                player.x -= 5;
            }

obstacle.x += obstacle.speed;

drawPlayer();
            drawObstacle();

// Collision detection
            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
            ) {
                alert("Game Over");
                window.location.reload();
            }

requestAnimationFrame(updateGame);
        }

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