AI game creator

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

No:24737

←

Prev Next

→

particle
Developer User11833｜Date and time 23/11/11 21:53:53
Build time 71.59 sec｜Game capacity 3.95KB｜

Script

Sure, here's an example of a simple game implemented as a single HTML file using JavaScript, enclosed in script tags. It can be played on a smartphone and uses pictograms:

Score: 0

Time: 30

In this game, particles (represented by pictograms) will randomly appear on the screen, and the player's goal is to click on as many particles as possible within a time limit of 30 seconds. Each click will increase the player's score. After the time is up, an alert will display the final score, and the game can be reset by clicking the "Start Game" button again. Note: You may need to replace the `emozi_himawari.png` image file with your own pictogram image or use a suitable placeholder image.

←

Prev　Next

→ 　

Back　

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

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

Sure, here's an example of a simple game implemented as a single HTML file using JavaScript, enclosed in script tags. It can be played on a smartphone and uses pictograms:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Particle Game</title>
    <script>
        // Define game variables
        var score = 0;
        var timeLeft = 30;
        var gameStarted = false;

// Function to start the game
        function startGame() {
            gameStarted = true;
            document.getElementById("startBtn").style.display = "none";
            document.getElementById("score").innerHTML = "Score: " + score;
            document.getElementById("timer").innerHTML = "Time: " + timeLeft;
            generateParticles();
            startTimer();
        }

function generateParticles() {
            var gameArea = document.getElementById("gameArea");
            gameArea.innerHTML = "";

for (var i = 0; i < 10; i++) {
                var particle = document.createElement("img");
                particle.src = "particle.png";
                particle.className = "particle";
                particle.style.top = Math.floor(Math.random() * 70) + "vh";
                particle.style.left = Math.floor(Math.random() * 70) + "vw";
                gameArea.appendChild(particle);
            }

// Add click event listener to particles
            var particles = document.getElementsByClassName("particle");
            for (var j = 0; j < particles.length; j++) {
                particles[j].addEventListener("click", function() {
                    if (gameStarted) {
                        score++;
                        document.getElementById("score").innerHTML = "Score: " + score;
                        this.remove();
                    }
                });
            }
        }

function resetGame() {
            score = 0;
            timeLeft = 30;
            document.getElementById("score").innerHTML = "Score: " + score;
            document.getElementById("timer").innerHTML = "Time: " + timeLeft;
        }
    </script>
    <style>
        #gameArea {
            position: relative;
            height: 100vh;
            width: 100vw;
            background-color: lightblue;
        }

.particle {
            position: absolute;
            width: 50px;
            height: 50px;
            object-fit: contain;
        }

#startBtn {
            display: block;
            margin: 10px;
        }

#score {
            font-weight: bold;
            margin: 10px;
        }

#timer {
            font-weight: bold;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div id="gameArea">
        <button id="startBtn" onclick="startGame()">Start Game</button>
    </div>
    <div id="score">Score: 0</div>
    <div id="timer">Time: 30</div>
</body>
</html>
```

Note: You may need to replace the `particle.png` image file with your own pictogram image or use a suitable placeholder image.