make a Runner about Reimu Hakurei's game

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

No:19456

←

Prev Next

→

make a Runner about Reimu Hakurei
Developer User8628｜Date and time 23/10/4 3:31:17
Build time 12.873 sec｜Game capacity 3.253KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Reimu Runner</title>
    <style>
        #game-container {
            position: relative;
            width: 400px;
            height: 600px;
            margin: 0 auto;
            overflow: hidden;
            border: 2px solid #000;
        }
        
        #player {
            position: absolute;
            bottom: 0;
            left: 50px;
            width: 50px;
            height: 50px;
            background-image: url('reimu.png');
            background-size: cover;
        }
        
        #obstacle {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 50px;
            height: 50px;
            background-image: url('obstacle.png');
            background-size: cover;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <div id="player"></div>
        <div id="obstacle"></div>
    </div>
    
    <script>
        var gameContainer = document.getElementById('game-container');
        var player = document.getElementById('player');
        var obstacle = document.getElementById('obstacle');
        
        var playerPos = 0;
        var obstaclePos = 0;
        var score = 0;
        var isGameOver = false;
        
        window.addEventListener('keydown', function(event) {
            if (event.key === 'ArrowUp' && playerPos === 0 && !isGameOver) {
                jump();
            }
            if (event.key === 'ArrowDown' && playerPos === 1 && !isGameOver) {
                slide();
            }
        });
        
        function jump() {
            playerPos = 1;
            player.style.bottom = '50px';
            setTimeout(function() {
                playerPos = 0;
                player.style.bottom = '0';
            }, 500);
        }
        
        function slide() {
            playerPos = 0;
            player.style.bottom = '0';
        }
        
        function checkCollision() {
            var playerRect = player.getBoundingClientRect();
            var obstacleRect = obstacle.getBoundingClientRect();
            
            if (playerRect.bottom > obstacleRect.top && playerRect.left < obstacleRect.right && !isGameOver) {
                gameOver();
            }
        }
        
        function gameOver() {
            isGameOver = true;
            alert('¡Juego terminado! Puntuación: ' + score);
            resetGame();
        }
        
        function updateScore() {
            score++;
            document.title = 'Reimu Runner - Puntuación: ' + score;
        }
        
        function resetGame() {
            playerPos = 0;
            player.style.bottom = '0';
            isGameOver = false;
            score = 0;
            document.title = 'Reimu Runner';
        }
        
        function gameLoop() {
            if (!isGameOver) {
                checkCollision();
                updateScore();
                obstaclePos -= 10;
                if (obstaclePos < -50) {
                    obstaclePos = 400;
                }
                obstacle.style.right = obstaclePos + 'px';
            }
            requestAnimationFrame(gameLoop);
        }
        
        gameLoop();
    </script>
</body>
</html>