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

No:4015

5525

←

Prev Next

→

firework(s) display
Developer anonymous｜Date and time 70/1/1 10:13:19
Build time unknown sec｜Game capacity 4.399KB｜

Script

HTMLファイルを作成し、JavaScriptを挿入することで花火大会ゲームを作成しました。以下がコードです。

花火大会ゲーム

スコア: 0

このゲームは画面上で花火を打ちあげ、画面上部に到達した花火をクリックすることで爆発させ、爆発した花火の点数をゲットするゲームです。画面上に10個の花火を爆発させたらクリアとなり、再度スタートすることができます。スマホでも問題なく操作できるようにしました。また、花火のデザインには絵文字を使用しました。

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

HTMLファイルを作成し、JavaScriptを挿入することで花火大会ゲームを作成しました。以下がコードです。

<!DOCTYPE html>
<html>
<head>
	<title>花火大会ゲーム</title>
	<style>
		body {
			text-align: center
		}
		canvas {
			border: 1px solid black;background-color:#000;
		}
	</style>
</head>
<body>
	<h1>花火大会ゲーム</h1>
	<canvas id="canvas" width="300" height="500"></canvas>
	<p id="score">スコア: 0</p>
	<button id="start">スタート</button>

// 描画する花火のクラス
		class Firework {
			constructor() {
				this.x = Math.random()*canvas.width;
				this.y = canvas.height;
				this.color = "yellow";
				this.speed = -5;
				this.radius = 5;
			}

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

move() {
				this.y += this.speed;
			}

checkHit() {
				if (this.y <= 0) {
					return true;
				} else {
					return false;
				}
			}
		}

// 爆発する花火のクラス
		class Explosion {
			constructor(firework) {
				this.x = firework.x;
				this.y = firework.y;
				this.color = "orange";
				this.radius = 5;
				this.lifeSpan = 30;
			}

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

update() {
				this.radius += 2;
				this.lifeSpan--;
			}

isAlive() {
				if (this.lifeSpan <= 0) {
					return false;
				} else {
					return true;
				}
			}
		}

// クリックした時に花火を発射する関数
		function launchFirework(event) {
			if (!gameOver) {
				let firework = new Firework();
				firework.x = event.clientX - canvas.offsetLeft;
				fireworks.push(firework);
			}
		}

// 毎フレームごとにゲームを更新する関数
		function update() {
			// 画面をクリアする
			ctx.clearRect(0, 0, canvas.width, canvas.height);

// スコアを表示する
			document.getElementById("score").innerHTML = "スコア: " + score;

// 花火を発射する
			if (Math.random() < 0.1) {
				let firework = new Firework();
				fireworks.push(firework);
			}

// 花火を移動させる
			for (let i = 0; i < fireworks.length; i++) {
				let firework = fireworks[i];
				firework.move();
				firework.draw();
				if (firework.checkHit()) {
					let explosion = new Explosion(firework);
					explosions.push(explosion);
					fireworks.splice(i, 1);
				}
			}

// 爆発する花火を移動させる
			for (let i = 0; i < explosions.length; i++) {
				let explosion = explosions[i];
				explosion.update();
				explosion.draw();
				if (!explosion.isAlive()) {
					score++;
					explosions.splice(i, 1);
				}
			}

// ゲームオーバー処理
			if (score >= 10) {
				gameOver = true;
				document.getElementById("score").innerHTML += "<br>ゲームクリア！";
				document.getElementById("start").innerHTML = "もう一度";
			}

// ゲームが続く場合は次のフレームを呼び出す
			if (!gameOver) {
				requestAnimationFrame(update);
			} else { // ゲームオーバーの場合は再スタートする
				document.getElementById("start").addEventListener("click", function() { location.reload(); });
			}
		}

// ゲームスタート時の処理
		document.getElementById("start").addEventListener("click", function() {
			requestAnimationFrame(update);
			canvas.addEventListener("click", launchFirework);
			this.disabled = true;
		});
	</script>
</body>
</html>