打ち上げ花火画面をタップすると、JavaScriptによって線画された綺麗な花火が表示されます。たくさん画面をタップして、たくさんの花火を打ち上げましょう！'s game

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

No:4262

5144

←

Prev Next

→

打ち上げ花火画面をタップすると、JavaScriptによって線画された綺麗な花火が表示されます。..ALL
Developer もちきなこ｜Date and time 23/6/27 16:28:35
Build time 27.888 sec｜Game capacity 2.4KB｜

Script

以下が、打ち上げ花火のHTMLプログラムです。

このプログラムは、画面をタップすることで花火を打ち上げ、クリックした座標を中心に、ランダムな方向へパーティクルを発生させます。パーティクルは時間とともにフェードアウトしていきます。このゲームは、スマホでも遊ぶことができ、絵文字は使用していませんが、比較的簡単にゲーム化することができたと思います。

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

以下が、打ち上げ花火のHTMLプログラムです。

```
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>打ち上げ花火</title>
	<style>
		canvas {
			width: 100%;
			height: 100%;
			background-color: black;
			position: absolute;
			top: 0;
			left: 0;
		}
	</style>
</head>
<body>
	<canvas id="fireworks"></canvas>
	<script>
		var canvas = document.getElementById("fireworks");
		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;
		var ctx = canvas.getContext("2d");

var particles = [];
		var numParticles = 100;
		var hue = 120;
		var centerX = canvas.width / 2;
		var centerY = canvas.height / 2;

function Particle(x, y) {
			this.x = x;
			this.y = y;
			this.radius = 6;
			this.vx = Math.random() * 10 - 5;
			this.vy = Math.random() * 10 - 5;
			this.alpha = 1;
			this.color = "hsla(" + hue + ", 100%, 50%, " + this.alpha + ")";
		}

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

Particle.prototype.update = function() {
			this.x += this.vx;
			this.y += this.vy;
			this.alpha -= 0.01;
			this.color = "hsla(" + hue + ", 100%, 50%, " + this.alpha + ")";
		};

function createParticles(x, y) {
			for (var i = 0; i < numParticles; i++) {
				var particle = new Particle(x, y);
				particles.push(particle);
			}
		}

canvas.addEventListener("click", function(event) {
			createParticles(event.clientX, event.clientY);
			hue += 5;
			if (hue > 360) {
				hue = 0;
			}
		});

animate();
	</script>
</body>
</html>
```