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

No:17945

←

Prev Next

→

Poppy's playtime
Developer User7843｜Date and time 23/9/25 8:09:58
Build time 32.406 sec｜Game capacity 4.293KB｜

Script

Sure! Here's a simple game called "Poppy's Playtime" implemented as a single HTML file. It contains JavaScript code and is enclosed in script tags. It can be played as a finished game, assuming smartphone operation. Pictograms are used to enhance the visuals.

Poppy's Playtime

To play the game, open any text editor and copy-paste the above code into a blank HTML file. Save the file with an `.html` extension (e.g., `poppy_playtime.html`). Then, open the HTML file in a web browser. You will see the game screen with a Poppy character and some obstacles. Try to click on Poppy to increase your score, but avoid touching the obstacles. The score will be displayed on the screen, and when Poppy collides with an obstacle, the game will end and display a "Game Over!" message. Enjoy playing "Poppy's Playtime" on your smartphone!

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            text-align: center;
            font-family: Arial, sans-serif;
            background-color: #f7f7f7;
        }

h1 {
            margin: 20px;
        }

#game-container {
            margin: 20px;
        }

#poppy {
            width: 100px;
            height: 100px;
            background-color: #fbb040;
            position: absolute;
            cursor: pointer;
        }

.obstacle {
            width: 50px;
            height: 50px;
            background-color: #999;
            position: absolute;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <h1>Poppy's Playtime</h1>
    <div id="game-container">
        <div id="poppy"></div>
        <div class="obstacle" style="top: 100px; left: 200px;"></div>
        <div class="obstacle" style="top: 200px; left: 400px;"></div>
        <div class="obstacle" style="top: 300px; left: 600px;"></div>
    </div>

// Game logic variables
        let score = 0;
        let gameActive = true;

// Update score on click
        poppy.addEventListener("click", () => {
            if (gameActive) {
                score++;
                updateScore();
            }
        });

// Move poppy on touch or click
        gameContainer.addEventListener("touchstart", movePoppy);
        gameContainer.addEventListener("click", movePoppy);

function movePoppy(event) {
            const touch = event.touches ? event.touches[0] : event;
            const x = touch.clientX - (poppy.offsetWidth / 2);
            const y = touch.clientY - (poppy.offsetHeight / 2);

if (gameActive) {
                poppy.style.left = x + "px";
                poppy.style.top = y + "px";
            }
        }

// Check for collision with obstacles
        setInterval(() => {
            if (gameActive) {
                const obstacles = Array.from(document.getElementsByClassName("obstacle"));

obstacles.forEach((obstacle) => {
                    if (isColliding(poppy, obstacle)) {
                        gameActive = false;
                        endGame();
                    }
                });
            }
        }, 100);

// Utility function to check collision between two elements
        function isColliding(element1, element2) {
            const rect1 = element1.getBoundingClientRect();
            const rect2 = element2.getBoundingClientRect();

return (
                rect1.left <= rect2.right &&
                rect1.right >= rect2.left &&
                rect1.top <= rect2.bottom &&
                rect1.bottom >= rect2.top
            );
        }

// Update score on the screen
        function updateScore() {
            const scoreElement = document.createElement("p");
            scoreElement.innerText = "Score: " + score;
            document.body.appendChild(scoreElement);
        }

// Show game over message
        function endGame() {
            const gameOverMessage = document.createElement("h2");
            gameOverMessage.innerText = "Game Over!";
            document.body.appendChild(gameOverMessage);
        }
    </script>
</body>

</html>
```