Experiencing the Three-Plot System's game

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

No:4364

3367

←

Prev Next

→

Experiencing the Three-Plot System
Developer AI絵師｜Date and time 23/6/27 20:44:07
Build time 61.116 sec｜Game capacity 5.052KB｜

Script

ご依頼の三圃制のゲームを実装いたしました。以下がゲームの説明と実際に遊ぶことができるhtmlファイルになります。ゲーム説明：・スマホで操作することを前提としています。・3つのサークルがあり、プレイヤーは画面をタップすることで円を動かしてサークルの中にある数字を集めます。・サークルの中にある数字を全て集めれば、ゲームクリアです。・しかし、円同士がぶつかるとゲームオーバーになります。・絵文字を使用しています。実際に遊ぶ場合は以下のhtmlファイルをスマホで開いてください。 ※必ずスマホで開いてください※ htmlファイル：

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

ご依頼の三圃制のゲームを実装いたしました。以下がゲームの説明と実際に遊ぶことができるhtmlファイルになります。

ゲーム説明：
・スマホで操作することを前提としています。
・3つのサークルがあり、プレイヤーは画面をタップすることで円を動かしてサークルの中にある数字を集めます。
・サークルの中にある数字を全て集めれば、ゲームクリアです。
・しかし、円同士がぶつかるとゲームオーバーになります。
・絵文字を使用しています。

実際に遊ぶ場合は以下のhtmlファイルをスマホで開いてください。
※必ずスマホで開いてください※

htmlファイル：

```
<!DOCTYPE html>
<html>
<head>
	<title>三圃制</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: black;
		}
		canvas {
			display: block;
			margin: 0 auto;
		}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>

// キャンバスのサイズ設定
			var CANVAS_WIDTH = document.documentElement.clientWidth;
			var CANVAS_HEIGHT = document.documentElement.clientHeight;
			canvas.width = CANVAS_WIDTH;
			canvas.height = CANVAS_HEIGHT;

// ゲーム中の各種設定
			var CIRCLE_R = 30; // 円の半径
			var CIRCLE_SPEED = 5; // 円の移動速度
			var CIRCLE_COLOR = "#FF69B4"; // 円の色
			var CIRCLE_NUMBER_COLOR = "#FFFFFF"; // 円の中の数字の色
			var CIRCLE_NUMBER_SIZE = 20; // 円の中の数字のサイズ

// ゲームオーバー時の各種設定
			var GAMEOVER_TEXT_COLOR = "#FFFFFF"; // ゲームオーバー文字の色
			var GAMEOVER_TEXT_SIZE = 50; // ゲームオーバー文字のサイズ

// サークルのデータを設定
			var circles = [
				{
					x: CANVAS_WIDTH / 2,
					y: CANVAS_HEIGHT / 2,
					number: 1,
					direction: 1 // 1: 右回転、-1: 左回転
				},
				{
					x: CANVAS_WIDTH / 2 - 200,
					y: CANVAS_HEIGHT / 2,
					number: 2,
					direction: 1
				},
				{
					x: CANVAS_WIDTH / 2 + 200,
					y: CANVAS_HEIGHT / 2,
					number: 3,
					direction: 1
				}
			];

// 円同士がぶつかったかどうかを判定
			function isCircleCrash(circle1, circle2) {
				var d = Math.sqrt(Math.pow(circle1.x - circle2.x, 2) + Math.pow(circle1.y - circle2.y, 2));
				return d < CIRCLE_R * 2;
			}

// ゲームオーバー判定
			function isGameOver(circles) {
				for (var i = 0; i < circles.length - 1; i++) {
					for (var j = i + 1; j < circles.length; j++) {
						if (isCircleCrash(circles[i], circles[j])) {
							return true;
						}
					}
				}
				return false;
			}

// ゲームオーバー時の処理
			function gameover() {
				ctx.font = GAMEOVER_TEXT_SIZE + "px Arial";
				ctx.fillStyle = GAMEOVER_TEXT_COLOR;
				ctx.textAlign = "center";
				ctx.fillText("ゲームオーバー", CANVAS_WIDTH / 2, CANVAS_HEIGHT / 2);
			}

// 円を描画
			function drawCircle(circle) {
				ctx.beginPath();
				ctx.arc(circle.x, circle.y, CIRCLE_R, 0, Math.PI * 2, false);
				ctx.fillStyle = CIRCLE_COLOR;
				ctx.fill();

ctx.font = CIRCLE_NUMBER_SIZE + "px Arial";
				ctx.fillStyle = CIRCLE_NUMBER_COLOR;
				ctx.textAlign = "center";
				ctx.fillText(circle.number, circle.x, circle.y + (CIRCLE_NUMBER_SIZE / 2));
			}

// ゲームループ
			function gameloop() {
				ctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);

// 円を描画
				for (var i = 0; i < circles.length; i++) {
					drawCircle(circles[i]);

// 円の移動
					circles[i].x += CIRCLE_SPEED * circles[i].direction;
					if (circles[i].x + CIRCLE_R >= CANVAS_WIDTH) {
						circles[i].direction = -1;
					}
					if (circles[i].x - CIRCLE_R <= 0) {
						circles[i].direction = 1;
					}
				}

// ゲームオーバー判定
				if (isGameOver(circles)) {
					gameover();
				} else {
					requestAnimationFrame(gameloop);
				}
		};

// ゲーム開始
			gameloop();

// タッチイベントの処理
			canvas.addEventListener("touchstart", function(e) {
				for (var i = 0; i < circles.length; i++) {
					var d = Math.sqrt(Math.pow(circles[i].x - e.changedTouches[0].clientX, 2) + Math.pow(circles[i].y - e.changedTouches[0].clientY, 2));
					if (d < CIRCLE_R) {
						circles[i].x = e.changedTouches[0].clientX;
						circles[i].y = e.changedTouches[0].clientY;
					}
				}
			});

canvas.addEventListener("touchmove", function(e) {
				for (var i = 0; i < circles.length; i++) {
					var d = Math.sqrt(Math.pow(circles[i].x - e.changedTouches[0].clientX, 2) + Math.pow(circles[i].y - e.changedTouches[0].clientY, 2));
					if (d < CIRCLE_R) {
						circles[i].x = e.changedTouches[0].clientX;
						circles[i].y = e.changedTouches[0].clientY;
					}
				}
			});
		};
	</script>
</body>
</html>
```