AI game creator

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

No:1635

296

←

Prev Next

→

Maze by addition
Developer User3378｜Date and time 23/6/18 20:29:12
Build time 109.46 sec｜Game capacity 9.148KB｜

Script

をクリアするゲームを作成しました。プレイヤーは数字ボタンをタップして足し算をし、正解を導き出して迷路をクリアしてください。時間内にクリアするとランキングに登録されます。以下が実際のプログラムの例です。

以上が足し算迷路ゲームの実装例です。スマホでも操作しやすいように、数字ボタンを大きく配置し、絵文字を多めに使用しました。また、クリアするとランキングに登録される仕組みも実装しています。

←

Prev　Next

→ 　

Back　

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

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

をクリアするゲームを作成しました。プレイヤーは数字ボタンをタップして足し算をし、正解を導き出して迷路をクリアしてください。時間内にクリアするとランキングに登録されます。

以下が実際のプログラムの例です。

```html
<!DOCTYPE html>
<html>
<head>
	<title>足し算迷路</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style type="text/css">
		body {
			margin: 0;
			padding: 0;
			background-color: #eee;
			font-family: Arial, sans-serif;
		}
		#maze {
			display: grid;
			grid-template-columns: repeat(5, 1fr);
			grid-template-rows: repeat(5, 1fr);
			grid-column-gap: 5px;
			grid-row-gap: 5px;
			padding: 10px;
			margin: 20px auto;
			background-color: #fff;
			border-radius: 10px;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
		}
		#maze div {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30px;
			color: #333;
			background-color: #eee;
			border-radius: 10px;
			box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
			cursor: pointer;
		}
		#maze .start {
			background-color: #6c5ce7;
			color: #fff;
		}
		#maze .end {
			background-color: #d63031;
			color: #fff;
		}
		#timer {
			position: fixed;
			top: 20px;
			right: 20px;
			font-size: 40px;
			color: #d63031;
			text-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
		}
		#score {
			position: fixed;
			bottom: 20px;
			left: 50%;
			transform: translateX(-50%);
			font-size: 30px;
			color: #6c5ce7;
			text-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
		}
	</style>
</head>
<body>
	<div id="maze">
		<div class="start">S</div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div class="end">E</div>
	</div>
	<div id="timer"></div>
	<div id="score"></div>
	<script type="text/javascript">
		// 迷路の情報
		const maze = [
			['S', '2', '+', '4', '', '3', '', '9', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
			['', '', '', '', '', '6', '', '7', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
			['', '', '', '', '', '9', '', '5', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
			['', '', '', '', '', '+', '', '+', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
			['', '', '', '', '', '7', '', '6', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
			['', '', '', '', '', '', '', '8', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
			['', '', '', '', '', '', '', '+', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
			['', '', '', '', '', '', '', '3', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
			['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
			['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
			['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
			['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
			['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
			['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
			['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
			['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
			['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
			['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
			['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
			['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
			['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
			['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
			['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
			['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
			['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
			['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
			['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
			['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '+'],
			['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '5'],
			['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '1'],
			['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '0'],
			['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
			['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
			['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
			['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
			['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
			['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', 'E'],
		];

// タイマーの初期化
		let timerId;
		let seconds = 0;
		const timer = document.getElementById('timer');
		const startTimer = () => {
			timerId = setInterval(() => {
				seconds++;
				timer.textContent = seconds;
			}, 1000);
		}
		const stopTimer = () => {
			clearInterval(timerId);
		}

// スコアの初期化
		let score = 0;
		const scoreElement = document.getElementById('score');
		const updateScore = () => {
			scoreElement.textContent = `スコア: ${score}`;
		}

// ゲームの初期化
		const mazeEl = document.getElementById('maze');
		let currentIndex = findIndex('S');
		let endIndex = findIndex('E');
		let path = [currentIndex];
		const directions = {
			up: -5,
			right: 1,
			down: 5,
			left: -1,
		};
		startTimer();
		updateScore();
		mazeEl.addEventListener('click', e => {
			const target = e.target;
			const value = target.textContent;
			if (/^\d$/.test(value)) { // 数字ボタンの場合
				const num = parseInt(value);
				const result = path.reduce((acc, index) => acc + parseInt(maze[index[0]][index[1]]), 0) + num;
				if (result >= 10) { // 2桁以上の場合は不正解
					score -= 10;
					updateScore();
				} else {
					score += 10;
					updateScore();
					const direction = Object.keys(directions).find(dir => {
						const nextIndex = currentIndex + directions[dir];
						if (path.includes(nextIndex)) { // 既に通った場所はスキップ
							return false;
						}
						if (nextIndex < 0 || nextIndex >= maze.length || // 迷路から出た場合はスキップ
							Math.floor(currentIndex / 5) !== Math.floor(nextIndex / 5) || // 同じ行でない場合はスキップ
							(nextIndex !== endIndex && !/\d/.test(maze[nextIndex[0]][nextIndex[1]]))) { // 不正解かつゴールでない場合はスキップ
							return false;
						}
						return true;
					});
					if (direction) { // 進める場合は追加
						currentIndex += directions[direction];
						path.push(currentIndex);
						target.style.backgroundColor = '#6c5ce7';
						target.style.color = '#fff';
						if (currentIndex === endIndex) { // ゴールについた場合は終了処理
							stopTimer();
							alert(`クリア！\nタイム: ${seconds}秒\nスコア: ${score}`);
						} else {
							const nextTarget = mazeEl.children[currentIndex[0]].children[currentIndex[1]];
							nextTarget.style.backgroundColor = '#6c5ce7';
							nextTarget.style.color = '#fff';
						}
					} else { // 進めない場合は不正解として処理
						score -= 10;
						updateScore();
					}
				}
			}
		});

// 迷路の位置を探す関数
		function findIndex(char) {
			for (let i = 0; i < maze.length; i++) {
				const j = maze[i].indexOf(char);
				if (j >= 0) {
					return [i, j];
				}
			}
			return null;
		}
	</script>
</body>
</html>
```