Make a game where there’s a ten minute timer and when it ends you win and confetti comes over the screen for 20 seconds's game

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

No:15072

←

Prev Next

→

Make a game where there’s a ten minute timer and w..ALL
Developer User6499｜Date and time 23/9/6 1:06:15
Build time 48.338 sec｜Game capacity 4.994KB｜

Script

Sure! Here's a simple example of a game implemented as a single HTML file using JavaScript. It includes a ten-minute timer where you win and confetti appears on the screen after the timer ends:

10:00

To play the game, simply open the HTML file on your smartphone browser. The timer starts at 10:00 and counts down until it reaches 00:00. Once the timer ends, confetti will appear on the screen for 20 seconds. Note: For the confetti effect, I've used a simple canvas-based implementation. The confetti particles are generated randomly and animated falling from the top of the screen.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

Sure! Here's a simple example of a game implemented as a single HTML file using JavaScript. It includes a ten-minute timer where you win and confetti appears on the screen after the timer ends:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Timer Game</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            font-family: Arial, sans-serif;
        }
        
        #timer {
            font-size: 48px;
            margin-bottom: 20px;
        }
        
        #confetti {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            pointer-events: none;
            z-index: 9999;
        }
    </style>
</head>
<body>
    <div id="timer">10:00</div>
    <canvas id="confetti"></canvas>

// Start the game
        function startGame() {
            let secondsLeft = 10 * 60; // 10 minutes converted to seconds

const timer = setInterval(() => {
                const minutes = Math.floor(secondsLeft / 60);
                const seconds = secondsLeft % 60;

timerDisplay.innerHTML = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;

secondsLeft--;

if (secondsLeft < 0) {
                    clearInterval(timer);
                    winGame();
                }
            }, 1000);
        }

// Win the game
        function winGame() {
            confettiCanvas.style.display = 'block';

// Confetti settings
            const colors = ['#FF0000', '#00FF00', '#0000FF']; // Add more colors if needed
            const confettiCount = 100;
            const confettiSize = 10;

// Generate random confetti particles
            function createConfettiParticle() {
                return {
                    x: confettiCanvas.width * Math.random(),
                    y: confettiCanvas.height,
                    color: colors[Math.floor(Math.random() * colors.length)],
                    rotation: Math.random() * 360,
                    speed: 1 + Math.random() * 5
                };
            }

// Draw confetti particles on the canvas
            function drawConfetti() {
                confettiCtx.clearRect(0, 0, confettiCanvas.width, confettiCanvas.height);

for (let i = 0; i < confettiParticles.length; i++) {
                    const particle = confettiParticles[i];

confettiCtx.beginPath();
                    confettiCtx.fillStyle = particle.color;
                    confettiCtx.moveTo(particle.x + Math.cos(particle.rotation) * confettiSize / 2, particle.y + Math.sin(particle.rotation) * confettiSize / 2);
                    confettiCtx.lineTo(particle.x - Math.sin(particle.rotation) * confettiSize / 2, particle.y + Math.cos(particle.rotation) * confettiSize / 2);
                    confettiCtx.lineTo(particle.x - Math.cos(particle.rotation) * confettiSize / 2, particle.y - Math.sin(particle.rotation) * confettiSize / 2);
                    confettiCtx.lineTo(particle.x + Math.sin(particle.rotation) * confettiSize / 2, particle.y - Math.cos(particle.rotation) * confettiSize / 2);
                    confettiCtx.closePath();
                    confettiCtx.fill();

particle.y -= particle.speed;

if (particle.y < -confettiSize) {
                        confettiParticles.splice(i, 1);
                    }
                }

if (confettiParticles.length > 0) {
                    requestAnimationFrame(drawConfetti);
                }
            }

// Generate confetti particles and start animation
            const confettiParticles = [];
            for (let i = 0; i < confettiCount; i++) {
                confettiParticles.push(createConfettiParticle());
            }

const animationDuration = 20; // 20 seconds
            drawConfetti();
            setTimeout(() => {
                confettiCanvas.style.display = 'none';
            }, animationDuration * 1000);
        }

// Start the game when the page loads
        document.addEventListener('DOMContentLoaded', startGame);
    </script>
</body>
</html>
```

Note: For the confetti effect, I've used a simple canvas-based implementation. The confetti particles are generated randomly and animated falling from the top of the screen.