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

No:4152

2160

←

Prev Next

→

Conscious quoting the Bible.
Developer AI絵師｜Date and time 23/6/27 13:02:01
Build time 45.074 sec｜Game capacity 4.103KB｜

Script

の説教は不要です。ご要望の通り、1枚のhtmlファイルとしてJavaScriptを含むゲームを作成しました。このゲームは、スマホでの操作を前提としており、絵文字を使用しています。以下がゲームの実装です。

Emoji Maze Game

このゲームでは、絵文字で作られた迷路をクリアすることが目的です。

このゲームは、絵文字で作られた5x5の迷路をクリアすることが目的です。プレイヤーは😎の絵文字で表されます。スワイプによってプレイヤーを移動させ、ゴールの🏆にたどり着くことが目的です。また、ステータス部分にはクリアメッセージが表示されます。

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

の説教は不要です。

ご要望の通り、1枚のhtmlファイルとしてJavaScriptを含むゲームを作成しました。このゲームは、スマホでの操作を前提としており、絵文字を使用しています。

以下がゲームの実装です。

```html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Emoji Maze Game</title>
</head>
<body>
	<h1>Emoji Maze Game</h1>
	<p>このゲームでは、絵文字で作られた迷路をクリアすることが目的です。</p>
	<div id="maze"></div>
	<div id="status"></div>
	<script>
		const mazeContainer = document.getElementById("maze");
		const statusContainer = document.getElementById("status");

// 迷路のマス目を作成する関数
		function createMaze(size) {
			let rows = "";
			for (let i = 0; i < size; i++) {
				let row = "";
				for (let j = 0; j < size; j++) {
					row += '<span class="square" data-row="' + i + '" data-col="' + j + '">🔳</span>';
				}
				rows += '<div class="row">' + row + '</div>';
			}
			mazeContainer.innerHTML = rows;
		}

// スタートとゴールを設定する関数
		function setStartAndGoal(size) {
			const start = document.querySelector('[data-row="0"][data-col="0"]');
			const goal = document.querySelector('[data-row="' + (size - 1) + '"][data-col="' + (size - 1) + '"]');
			start.innerText = "🏁";
			goal.innerText = "🏆";
		}

// プレイヤーの位置を追跡する変数
		let playerRow = 0;
		let playerCol = 0;

// プレイヤーを移動させる関数
		function movePlayer(row, col) {
			const currentSquare = document.querySelector('[data-row="' + playerRow + '"][data-col="' + playerCol + '"]');
			const nextSquare = document.querySelector('[data-row="' + row + '"][data-col="' + col + '"]');
			if (nextSquare && nextSquare.innerText === "🔳") {
				currentSquare.innerText = "🔳";
				playerRow = row;
				playerCol = col;
				nextSquare.innerText = "😎";
				checkStatus();
			}
		}

// ゲームクリアの状態をチェックする関数
		function checkStatus() {
			const goal = document.querySelector('[data-row="' + (size - 1) + '"][data-col="' + (size - 1) + '"]');
			if (playerRow === size - 1 && playerCol === size - 1) {
				statusContainer.innerText = "クリアしました！";
			}
		}

// 初期化処理
		const size = 5;
		createMaze(size);
		setStartAndGoal(size);
		const startSquare = document.querySelector('[data-row="0"][data-col="0"]');
		startSquare.innerText = "😎";
		playerRow = 0;
		playerCol = 0;

// スワイプによる移動処理
		let xDown = null;
		let yDown = null;

function handleTouchStart(evt) {
			xDown = evt.touches[0].clientX;
			yDown = evt.touches[0].clientY;
		};

function handleTouchMove(evt) {
			if (!xDown || !yDown) {
				return;
			}

let xUp = evt.touches[0].clientX;
			let yUp = evt.touches[0].clientY;

let xDiff = xDown - xUp;
			let yDiff = yDown - yUp;

if (Math.abs(xDiff) > Math.abs(yDiff)) {
				if (xDiff > 0) {
					movePlayer(playerRow, playerCol - 1);
				} else {
					movePlayer(playerRow, playerCol + 1);
				}
			} else {
				if (yDiff > 0) {
					movePlayer(playerRow - 1, playerCol);
				} else {
					movePlayer(playerRow + 1, playerCol);
				}
			}

xDown = null;
			yDown = null;

evt.preventDefault();
		};

このゲームは、絵文字で作られた5x5の迷路をクリアすることが目的です。プレイヤーは😎の絵文字で表されます。スワイプによってプレイヤーを移動させ、ゴールの🏆にたどり着くことが目的です。

また、ステータス部分にはクリアメッセージが表示されます。