Robot catches falling asteroid's game

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

No:2721

1647

←

Prev Next

→

Robot catches falling asteroid
Developer User3544｜Date and time 23/6/22 12:47:05
Build time 18.908 sec｜Game capacity 2.746KB｜

Script

🤖

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>

<head>
    <title>小惑星ロボットゲーム</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        #game-screen {
            position: relative;
            height: 100vh;
            background-color: black;
            font-size: 5em;
            color: white;
            text-align: center;
        }
        #robot {
            position: absolute;
            bottom: 5%;
            left: 50%;
            transform: translateX(-50%);
            font-size: 2em;
        }
    </style>
</head>

let score = 0;

function handleKeyPress(event) {
            if (event.keyCode === 37) { // left arrow
                moveRobot(-10);
            } else if (event.keyCode === 39) { // right arrow
                moveRobot(10);
            }
        }

function moveRobot(amount) {
            const left = parseInt(window.getComputedStyle(robot).getPropertyValue('left'));
            robot.style.left = left + amount + 'px';
        }

function createAsteroid() {
            const asteroid = document.createElement('div');
            asteroid.classList.add('asteroid');
            asteroid.style.left = Math.random() * (gameScreen.offsetWidth - 100) + 'px';
            gameScreen.appendChild(asteroid);

const fallInterval = setInterval(() => {
                const top = parseInt(window.getComputedStyle(asteroid).getPropertyValue('top'));
                asteroid.style.top = top + 1 + 'px';

if (top > window.innerHeight) {
                    clearInterval(fallInterval);
                    gameScreen.removeChild(asteroid);
                } else if (top > window.innerHeight - 100 && top < window.innerHeight - 60) {
                    const robotLeft = parseInt(window.getComputedStyle(robot).getPropertyValue('left'));
                    const asteroidLeft = parseInt(window.getComputedStyle(asteroid).getPropertyValue('left'));

if (Math.abs(robotLeft - asteroidLeft) < 50) {
                        score++;
                        document.title = `Score: ${score}`;

clearInterval(fallInterval);
                        gameScreen.removeChild(asteroid);
                    }
                }
            }, 10);
        }

document.addEventListener('keydown', handleKeyPress);

setInterval(() => {
            createAsteroid();
        }, 1000);
    </script>

</body>

</html>