ウサギよけゲーム's game | AI game creator

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

No:48590

112

ウサギよけゲーム
Developer User20650｜Date and time 24/3/2 16:42:54
Build time 7.967 sec｜Game capacity 2.501KB｜

→ 　

0　

0　

　
　

[PR]現在の欲しいものランキング

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rabbit Dodge Game</title>
    <style>
        #player {
            width: 50px;
            height: 50px;
            background-color: red;
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
        }
        
        #rabbit {
            width: 50px;
            height: 50px;
            background-color: green;
            position: absolute;
            top: 10px;
            left: 50%;
            transform: translateX(-50%);
        }
    </style>
</head>
<body>
    <div id="player"></div>
    <div id="rabbit"></div>

<script>
        const player = document.getElementById('player');
        const rabbit = document.getElementById('rabbit');
        let score = 0;
        
        document.addEventListener('keydown', (e) => {
            if (e.key === 'ArrowLeft') {
                movePlayer(-10);
            } else if (e.key === 'ArrowRight') {
                movePlayer(10);
            }
        });
        
        function movePlayer(amount) {
            const left = parseInt(window.getComputedStyle(player).getPropertyValue('left'));
            player.style.left = `${left + amount}px`;
        }
        
        function moveRabbit() {
            let top = parseInt(window.getComputedStyle(rabbit).getPropertyValue('top'));
            if (top > window.innerHeight) {
                top = -50;
                const left = Math.floor(Math.random() * window.innerWidth);
                rabbit.style.left = `${left}px`;
                score++;
            }
            rabbit.style.top = `${top + 10}px`;
        }
        
        function gameLoop() {
            moveRabbit();
            checkCollision();
            if (score < 10) {
                requestAnimationFrame(gameLoop);
            } else {
                alert('Game Over! Your score is ' + score);
            }
        }
        
        function checkCollision() {
            const playerRect = player.getBoundingClientRect();
            const rabbitRect = rabbit.getBoundingClientRect();
            if (playerRect.bottom > rabbitRect.top && 
                playerRect.right > rabbitRect.left &&
                playerRect.left < rabbitRect.right) {
                score = 0;
            }
        }
        
        gameLoop();
    </script>
</body>
</html>