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

No:12638

108

←

Prev Next

→

Fire works simulator
Developer User4910｜Date and time 23/8/21 5:14:49
Build time 16.117 sec｜Game capacity 4.806KB｜

Script

Sure! Here's an example of a simple firework simulator game implemented as a single HTML file using JavaScript. This game assumes smartphone operation and uses pictograms for a better user experience.

Fireworks Simulator

Score:

To play the game: 1. Copy the above code and save it as a single HTML file (e.g., "fireworks_simulator.html"). 2. Open the HTML file in a web browser (preferably on a smartphone). 3. Click the "Start Game" button to start the game. 4. Fireworks will start appearing on the screen from the bottom and rise upwards. 5. Click on the fireworks to remove them and score points. 6. The score will be displayed at the top. 7. Enjoy the fireworks simulation game! Note: The game logic provided here is a basic example and can be extended further to include more features and improve the gameplay experience.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Fireworks Simulator</title>
    <style>
        body {
            text-align: center;
            font-family: Arial, sans-serif;
        }
        
        canvas {
            border: 1px solid black;
            margin: 10px auto;
        }
        
        .button {
            display: inline-block;
            margin: 10px;
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            text-align: center;
        }
        
        .score {
            font-weight: bold;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <h1>Fireworks Simulator</h1>
    <canvas id="canvas" width="400" height="300"></canvas>
    <div class="score">Score: <span id="score"></span></div>
    
    <script>
        // Get canvas element
        const canvas = document.getElementById("canvas");
        const ctx = canvas.getContext("2d");
        
        // Initialize variables
        let score = 0;
        let fireworks = [];
        let fireworkInterval;
        
        // Function to create a firework
        function Firework() {
            this.x = Math.random() * canvas.width;
            this.y = canvas.height;
            this.vx = Math.random() * 2 - 1;
            this.vy = -Math.random() * 5 - 2;
            this.color = '#' + (Math.random() * 0xFFFFFF << 0).toString(16);
            
            this.update = function() {
                this.x += this.vx;
                this.y += this.vy;
                this.vy += 0.1;
                
                if (this.y <= canvas.height / 2) {
                    fireworks.splice(fireworks.indexOf(this), 1);
                    score++;
                    document.getElementById("score").textContent = score;
                }
            }
            
            this.draw = function() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, 3, 0, Math.PI*2);
                ctx.fillStyle = this.color;
                ctx.fill();
            }
        }
        
        // Function to start the game
        function startGame() {
            clearInterval(fireworkInterval);
            fireworks = [];
            score = 0;
            document.getElementById("score").textContent = score;
            
            // Create fireworks at regular intervals
            fireworkInterval = setInterval(function() {
                fireworks.push(new Firework());
            }, 1000);
            
            // Update and draw the fireworks
            function update() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                
                for (let i = 0; i < fireworks.length; i++) {
                    fireworks[i].update();
                    fireworks[i].draw();
                }
                
                requestAnimationFrame(update);
            }
            
            update();
        }
        
        // Event listener for canvas click
        canvas.addEventListener("click", function(event) {
            const rect = canvas.getBoundingClientRect();
            const clickX = event.clientX - rect.left;
            const clickY = event.clientY - rect.top;
            
            for (let i = 0; i < fireworks.length; i++) {
                const firework = fireworks[i];
                const dx = clickX - firework.x;
                const dy = clickY - firework.y;
                const distance = Math.sqrt(dx * dx + dy * dy);
                
                if (distance <= 10) {
                    fireworks.splice(i, 1);
                    score--;
                    document.getElementById("score").textContent = score;
                    break;
                }
            }
        });
    </script>
    
    <button class="button" onclick="startGame()">Start Game</button>
</body>
</html>
```

To play the game:
1. Copy the above code and save it as a single HTML file (e.g., "fireworks_simulator.html").
2. Open the HTML file in a web browser (preferably on a smartphone).
3. Click the "Start Game" button to start the game.
4. Fireworks will start appearing on the screen from the bottom and rise upwards.
5. Click on the fireworks to remove them and score points.
6. The score will be displayed at the top.
7. Enjoy the fireworks simulation game!

Note: The game logic provided here is a basic example and can be extended further to include more features and improve the gameplay experience.