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

No:1605

7262

Game to observe the Butterfly Effect
Developer AI絵師｜Date and time 23/6/18 19:26:54
Build time 43.2 sec｜Game capacity 3.47KB｜

以下は、バタフライエフェクトを観察するゲームのサンプルコードです。

バタフライエフェクト

あなたは、小さな蝶の羽ばたきが世界を変えることを知っていますか？このゲームでは、あなたが蝶の羽ばたきを操作しながら、その影響を観察することができます。

操作方法：スマホで画面をタップすると、蝶が羽ばたきます。何度もタップして蝶の飛行を調整し、その後の世界を見てみましょう。

このゲームでは、蝶を画面の中央から開始位置として設定し、ランダムに動かしています。また、画面をタップすると、蝶に力が加わって、その後の飛行パターンが変化します。キャンバスには、横に2本、縦に1本の線を引き、いくつかのグレーの点を描画し、背景を装飾しています。蝶の飛行軌跡を観察しながら、タップして力を加えてみましょう。

→ 　

2　

1　

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

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

(C)2023 HisashiApp

以下は、バタフライエフェクトを観察するゲームのサンプルコードです。

<!DOCTYPE html>
<html>
<head>
	<title>バタフライエフェクト</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
	<h1>バタフライエフェクト</h1>
	<div>
		<p>あなたは、小さな蝶の羽ばたきが世界を変えることを知っていますか？このゲームでは、あなたが蝶の羽ばたきを操作しながら、その影響を観察することができます。</p>
		<p>操作方法：スマホで画面をタップすると、蝶が羽ばたきます。何度もタップして蝶の飛行を調整し、その後の世界を見てみましょう。</p>
	</div>
	<canvas id="canvas" width="800" height="500"></canvas>
	<script>
		// 変数の初期化
		var canvas = document.getElementById("canvas");
		var ctx = canvas.getContext("2d");
		var width = canvas.width;
		var height = canvas.height;
		var gravity = 0.1;
		var wind = 0;
		var butterfly = {
			x: 200,
			y: 200,
			radius: 10,
			color: "orange",
			vx: 1,
			vy: 0,
			ax: 0,
			ay: gravity
		};
		var line1 = {
			x1: 0,
			y1: 200,
			x2: width,
			y2: 200,
			color: "black",
			width: 1
		};
		var line2 = {
			x1: 400,
			y1: 0,
			x2: 400,
			y2: height,
			color: "black",
			width: 1
		};
		var line3 = {
			x1: 0,
			y1: 0,
			x2: width,
			y2: height,
			color: "gray",
			width: 1
		};

// キャンバスを初期化
		function clearCanvas() {
			ctx.clearRect(0, 0, width, height);
			drawLine(line1);
			drawLine(line2);
			drawLine(line3);
		}

// 線を描画
		function drawLine(line) {
			ctx.beginPath();
			ctx.moveTo(line.x1, line.y1);
			ctx.lineTo(line.x2, line.y2);
			ctx.strokeStyle = line.color;
			ctx.lineWidth = line.width;
			ctx.stroke();
		}

// 蝶を描画
		function drawButterfly() {
			ctx.beginPath();
			ctx.arc(butterfly.x, butterfly.y, butterfly.radius, 0, Math.PI*2, false);
			ctx.fillStyle = butterfly.color;
			ctx.fill();
		}

// フレームをアップデート
		function updateFrame() {
			// 速度と位置を計算
			butterfly.vx += butterfly.ax + wind;
			butterfly.vy += butterfly.ay;
			butterfly.x += butterfly.vx;
			butterfly.y += butterfly.vy;

// 壁で反射する
			if (butterfly.x + butterfly.radius > width || butterfly.x - butterfly.radius < 0) {
				butterfly.vx = -butterfly.vx;
			}
			if (butterfly.y + butterfly.radius > height || butterfly.y - butterfly.radius < 0) {
				butterfly.vy = -butterfly.vy;
			}

// キャンバスをクリアして再描画
			clearCanvas();
			drawButterfly();

// フレームを更新
			requestAnimationFrame(updateFrame);
		}

// タッチイベントを取得
		canvas.addEventListener("touchstart", function(event) {
			event.preventDefault();
			// 蝶に力を加える
			butterfly.vx += 2;
			butterfly.vy += -2;
		});

// ゲームを開始
		updateFrame();
	</script>
</body>
</html>

このゲームでは、蝶を画面の中央から開始位置として設定し、ランダムに動かしています。また、画面をタップすると、蝶に力が加わって、その後の飛行パターンが変化します。キャンバスには、横に2本、縦に1本の線を引き、いくつかのグレーの点を描画し、背景を装飾しています。蝶の飛行軌跡を観察しながら、タップして力を加えてみましょう。