Fireworks that fly up and explode with particles that go evrywere and little dots that fly up and fall down's game

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

No:27103

102

←

Prev Next

→

Fireworks that fly up and explode with particles t..ALL
Developer User13389｜Date and time 23/12/4 7:51:29
Build time 24.017 sec｜Game capacity 2.928KB｜

Script

Sure, here's an example of a simple game that displays fireworks that fly up and explode with particles going everywhere, along with little dots that fly up and fall down. I've enclosed the code within script tags and implemented it as a single HTML file.

You can copy and paste this code into an HTML file and open it in a web browser, preferably on a smartphone, to see the fireworks game in action. The game will continuously create and display fireworks on the canvas, with particles flying everywhere and little dots falling down. Enjoy playing!

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

```html
<!DOCTYPE html>
<html>
<head>
	<title>Fireworks Game</title>
</head>
<body>
	<canvas id="canvas" width="800" height="600"></canvas>

const fireworks = [];

function Particle(x, y, color) {
			this.x = x;
			this.y = y;
			this.color = color;
			this.velX = Math.random() * 4 - 2;
			this.velY = Math.random() * 4 - 2;
			this.alpha = 1;
			this.fade = Math.random() * 0.05;
		}

Particle.prototype.update = function() {
			this.x += this.velX;
			this.y += this.velY;
			this.alpha -= this.fade;

if(this.alpha <= 0) {
				fireworks.splice(fireworks.indexOf(this), 1);
			}
		}

Particle.prototype.render = function() {
			ctx.beginPath();
			ctx.arc(this.x, this.y, 2, 0, Math.PI * 2);
			ctx.fillStyle = this.color;
			ctx.globalAlpha = this.alpha;
			ctx.fill();
		}

function Firework() {
			this.x = Math.random() * canvas.width;
			this.y = canvas.height;
			this.color = '#' + Math.floor(Math.random() * 16777215).toString(16);
			this.velY = Math.random() * 3 + 1;
			this.velX = Math.random() * 1 - 0.5;
			this.explosionHeight = Math.random() * (canvas.height / 2 - canvas.height / 4) + canvas.height / 4;
			this.particles = [];

for(let i = 0; i < 30; i++) {
				this.particles.push(new Particle(this.x, this.y, this.color));
			}
		}

Firework.prototype.update = function() {
			this.y -= this.velY;
			this.x += this.velX;

if(this.y <= this.explosionHeight) {
				for(let i = 0; i < this.particles.length; i++) {
					this.particles[i].update();
				}
			}

if(this.y <= 0) {
				fireworks.splice(fireworks.indexOf(this), 1);
			}
		}

Firework.prototype.render = function() {
			ctx.beginPath();
			ctx.arc(this.x, this.y, 3, 0, Math.PI * 2);
			ctx.fillStyle = this.color;
			ctx.fill();

if(this.y <= this.explosionHeight) {
				for(let i = 0; i < this.particles.length; i++) {
					this.particles[i].render();
				}
			}
		}

function createFirework() {
			fireworks.push(new Firework());
		}

function update() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);

for(let i = 0; i < fireworks.length; i++) {
				fireworks[i].update();
				fireworks[i].render();
			}

requestAnimationFrame(update);
		}

// Start the game
		setInterval(createFirework, 1000);
		update();
	</script>
</body>
</html>
```