Crea un gioco shooting star's game

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

No:44701

115

←

Prev Next

→

Crea un gioco shooting star
Developer User19399｜Date and time 24/2/19 0:48:29
Build time 11.11 sec｜Game capacity 2.976KB｜

Script

🚀

Score: 0

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>

<head>
    <title>Shooting Star Game</title>
    <style>
        body {
            background-color: black;
            text-align: center;
            margin-top: 20px;
        }

#player {
            position: absolute;
            bottom: 10px;
            left: 50%;
            width: 50px;
            transform: translateX(-50%);
        }

.star {
            position: absolute;
            width: 20px;
            z-index: -1;
        }

#score {
            color: white;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <div id="player">🚀</div>
    <div id="score">Score: 0</div>

function movePlayer(distance) {
            const playerPosition = parseInt(window.getComputedStyle(player).left);
            const newPosition = playerPosition + distance;

if (newPosition >= 0 && newPosition <= window.innerWidth - 50) {
                player.style.left = newPosition + 'px';
            }
        }

function createStar() {
            const star = document.createElement('div');
            star.classList.add('star');
            star.innerHTML = '⭐️';
            star.style.left = Math.floor(Math.random() * window.innerWidth) + 'px';
            document.body.appendChild(star);

moveStar(star);
        }

function moveStar(star) {
            let top = 0;
            const starMove = setInterval(() => {
                top++;
                star.style.top = top + 'px';

if (top > window.innerHeight) {
                    clearInterval(starMove);
                    document.body.removeChild(star);
                }

if (checkCollision(star)) {
                    incrementScore();
                    clearInterval(starMove);
                    document.body.removeChild(star);
                }
            }, 10);
        }

function checkCollision(star) {
            const playerRect = player.getBoundingClientRect();
            const starRect = star.getBoundingClientRect();

return !(
                playerRect.right < starRect.left ||
                playerRect.left > starRect.right ||
                playerRect.bottom < starRect.top ||
                playerRect.top > starRect.bottom
            );
        }

function incrementScore() {
            score++;
            scoreElement.textContent = 'Score: ' + score;
        }

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

</html>