Catch the flying pineapples's game

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

No:50744

←

Prev Next

→

Catch the flying pineapples
Developer User21395｜Date and time 24/3/9 13:38:02
Build time 3.972 sec｜Game capacity 1.498KB｜

Script

Catch the Flying Pineapples!

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
    <head>
        <title>Catch the Flying Pineapples Game</title>
        <style>
            #game {
                width: 100%;
                height: 100vh;
                background-color: skyblue;
                text-align: center;
                font-size: 30px;
            }
        </style>
    </head>
    <body>
        <div id="game">Catch the Flying Pineapples!</div>
        
        <script>
            const game = document.getElementById('game');
            let score = 0;

game.onclick = function() {
                score++;
            }

function createPineapple() {
                const pineapple = document.createElement('img');
                pineapple.src = '🍍'; // Pictogram of a pineapple
                pineapple.style.position = 'absolute';
                pineapple.style.left = Math.random() * 90 + '%';
                pineapple.style.top = Math.random() * 90 + 'vh';
                pineapple.style.fontSize = '50px';
                pineapple.onclick = function() {
                    this.remove();
                    score++;
                }

game.appendChild(pineapple);

setTimeout(() => {
                    pineapple.remove();
                }, 3000);
            }

setInterval(createPineapple, 1000);

setInterval(() => {
                game.innerHTML = `Score: ${score}`;
            }, 1000);
        </script>
    </body>
</html>