A game where the AI thinks and answers riddle after riddle, another AI creates a maze, and it is impossible not to press a button to solve the maze's game | AI game creator

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

No:1495

269

A game where the AI thinks and answers riddle afte..ALL
Developer User3181｜Date and time 23/6/18 17:36:59
Build time 111.23 sec｜Game capacity 9.147KB｜

のサンプルコードを以下に示します。

なぞなぞ

Q: 世界で一番大きい国は？

迷路ゲーム

このコードは、HTMLの文書の中に2つの要素を含んでいます。1つ目の要素はなぞなぞゲームで、2つ目の要素は迷路ゲームです。なぞなぞゲームは、questionsとanswersという2つの配列を使って、複数の質問を持つことができます。現在の質問はcurrentQuestionという変数に保存されており、次の質問に進むたびに更新されます。ユーザーが答えを入力すると、checkAnswer()関数が呼び出されて回答を検証し、結果を表示します。迷路ゲームは、HTML5のcanvas要素を使用して、迷路を描画します。generateMaze()関数は、深さ優先探索を使用して迷路を生成します。findPath()関数は、幅優先探索を使用して迷路の解答を見つけます。それらを呼び出す2つのボタンがあります。また、迷路を解く前に、canvas要素をクリアして、迷路を生成する必要があります。

→ 　

1　

1　

[PR]現在のフィギュア売れ筋ランキング

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

(C)2023 HisashiApp

のサンプルコードを以下に示します。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>なぞなぞ＆迷路ゲーム</title>
	<style type="text/css">
		body {
			font-size: 18px;
			text-align: center;
		}

button {
			font-size: 18px;
			margin-top: 10px;
			padding: 10px 20px;
			background-color: #5cb85c;
			color: #fff;
			border: none;
			border-radius: 5px;
			cursor: pointer;
		}

button:hover {
			background-color: #4cae4c;
		}

#puzzle {
			width: 80%;
			max-width: 500px;
			margin: 0 auto;
			padding: 50px 20px;
			background-color: #eee;
			border-radius: 10px;
		}

#puzzle h2 {
			font-size: 24px;
			margin-bottom: 20px;
		}

#puzzle input[type="text"] {
			font-size: 18px;
			padding: 10px;
			width: 80%;
			max-width: 400px;
			margin-bottom: 10px;
			border: none;
			border-radius: 5px;
			box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
		}

#maze {
			width: 80%;
			max-width: 500px;
			margin: 0 auto;
			padding: 50px 20px;
			background-color: #eee;
			border-radius: 10px;
		}

#maze canvas {
			margin-bottom: 10px;
			border: 1px solid #ccc;
			border-radius: 5px;
			box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
		}
	</style>
</head>
<body>
	<div id="puzzle">
		<h2>なぞなぞ</h2>
		<p id="question">Q: 世界で一番大きい国は？</p>
		<input type="text" id="answer" placeholder="こたえをにゅうりょくしてね">
		<button onclick="checkAnswer()">せいかい！！</button>
		<p id="result"></p>
	</div>

<div id="maze">
		<h2>迷路ゲーム</h2>
		<canvas id="canvas" width="480" height="320"></canvas>
		<button onclick="solveMaze()">トウロクする</button>
		<p id="maze-result"></p>
	</div>

<script type="text/javascript">
		// なぞなぞゲーム

var questions = ['世界で一番大きい国は？', '東京タワーの高さは？', 'あの農場でこくばんをたくさん作ることができる動物は？'];
		var answers = ['ロシア', '333m', 'こくばん'];
		var currentQuestion = 0;

function checkAnswer() {
			var answer = document.getElementById('answer').value;
			if (answer === answers[currentQuestion]) {
				document.getElementById('result').innerHTML = 'せいかい！';
			} else {
				document.getElementById('result').innerHTML = 'ふせいかい...';
			}
			currentQuestion++;
			if (currentQuestion >= questions.length) {
				currentQuestion = 0;
			}
			document.getElementById('question').innerHTML = 'Q: ' + questions[currentQuestion];
			document.getElementById('answer').value = '';
		}

// 迷路ゲーム

var canvas = document.getElementById('canvas');
		var ctx = canvas.getContext('2d');
		var mazeWidth = canvas.width;
		var mazeHeight = canvas.height;
		var cellSize = 20;
		var cols = Math.floor(mazeWidth/cellSize);
		var rows = Math.floor(mazeHeight/cellSize);
		var visited = new Array(rows);

for (var i = 0; i < rows; i++) {
			visited[i] = new Array(cols);
			for (var j = 0; j < cols; j++) {
				visited[i][j] = false;
			}
		}

generateMaze();

function generateMaze() {
			ctx.clearRect(0, 0, mazeWidth, mazeHeight);
			for (var i = 0; i < rows; i++) {
				for (var j = 0; j < cols; j++) {
					drawCell(i, j);
				}
			}

var stack = [];
			var current = [0, 0];
			visited[0][0] = true;

while (true) {
				var unvisitedNeighbors = getUnvisitedNeighbors(current[0], current[1]);

if (unvisitedNeighbors.length > 0) {
					stack.push(current);
					var next = unvisitedNeighbors[Math.floor(Math.random() * unvisitedNeighbors.length)];
					removeWall(current, next);
					current = next;
					visited[current[0]][current[1]] = true;
				} else if (stack.length > 0) {
					current = stack.pop();
				} else {
					break;
				}
			}
			ctx.strokeRect(0, 0, mazeWidth, mazeHeight);
		}

function drawCell(row, col) {
			var x = col * cellSize;
			var y = row * cellSize;
			ctx.beginPath();
			if (visited[row][col]) {
				ctx.fillStyle = '#fff';
				ctx.fillRect(x, y, cellSize, cellSize);
			}
			ctx.strokeStyle = '#000';

if (row === 0) {
				ctx.moveTo(x, y);
				ctx.lineTo(x + cellSize, y);
			}

if (!hasNeighbor(row, col, 'bottom')) {
				ctx.moveTo(x, y + cellSize);
				ctx.lineTo(x + cellSize, y + cellSize);
			}

if (!hasNeighbor(row, col, 'right')) {
				ctx.moveTo(x + cellSize, y);
				ctx.lineTo(x + cellSize, y + cellSize);
			}

if (col === 0) {
				ctx.moveTo(x, y);
				ctx.lineTo(x, y + cellSize);
			}

ctx.stroke();
		}

function getUnvisitedNeighbors(row, col) {
			var neighbors = [];

if (row > 0 && !visited[row-1][col]) {
				neighbors.push([row-1, col]);
			}

if (col > 0 && !visited[row][col-1]) {
				neighbors.push([row, col-1]);
			}

if (row < rows-1 && !visited[row+1][col]) {
				neighbors.push([row+1, col]);
			}

if (col < cols-1 && !visited[row][col+1]) {
				neighbors.push([row, col+1]);
			}

return neighbors;
		}

function hasNeighbor(row, col, direction) {
			if (direction === 'top') {
				return row === 0 || visited[row-1][col];
			}
			if (direction === 'bottom') {
				return row === rows-1 || visited[row+1][col];
			}
			if (direction === 'left') {
				return col === 0 || visited[row][col-1];
			}
			if (direction === 'right') {
				return col === cols-1 || visited[row][col+1];
			}
		}

function removeWall(current, next) {
			var x1 = current[1] * cellSize;
			var y1 = current[0] * cellSize;
			var x2 = next[1] * cellSize;
			var y2 = next[0] * cellSize;

if (current[0] === next[0]) {
				if (current[1] > next[1]) {
					ctx.clearRect(x1, y1, cellSize, cellSize);
					ctx.strokeRect(x2, y2, cellSize, cellSize);
				} else {
					ctx.clearRect(x2, y2, cellSize, cellSize);
					ctx.strokeRect(x1, y1, cellSize, cellSize);
				}
			} else {
				if (current[0] > next[0]) {
					ctx.clearRect(x1, y1, cellSize, cellSize);
					ctx.strokeRect(x2, y2, cellSize, cellSize);
				} else {
					ctx.clearRect(x2, y2, cellSize, cellSize);
					ctx.strokeRect(x1, y1, cellSize, cellSize);
				}
			}
		}

function solveMaze() {
			ctx.clearRect(0, 0, mazeWidth, mazeHeight);
			for (var i = 0; i < rows; i++) {
				for (var j = 0; j < cols; j++) {
					drawCell(i, j);
				}
			}
			ctx.fillStyle = '#f00';
			var path = findPath([0, 0], [rows-1, cols-1]);
			if (path.length > 0) {
				for (var i = 0; i < path.length; i++) {
					ctx.fillRect(path[i][1] * cellSize, path[i][0] * cellSize, cellSize, cellSize);
				}
				document.getElementById('maze-result').innerHTML = 'こたえ: ' + path.length + 'マス';
			} else {
				document.getElementById('maze-result').innerHTML = 'こたえ: むり...(－＝＝)';
			}
		}

function findPath(start, end) {
			var stack = [start];
			var visited = new Array(rows);
			var prev = {};
			var path = [];
			for (var i = 0; i < rows; i++) {
				visited[i] = new Array(cols);
				for (var j = 0; j < cols; j++) {
					if (i === start[0] && j === start[1]) {
						visited[i][j] = true;
					} else {
						visited[i][j] = false;
					}
				}
			}

while (stack.length > 0) {
				var current = stack.pop();
				if (current[0] === end[0] && current[1] === end[1]) {
					while (!(current[0] === start[0] && current[1] === start[1])) {
						path.push(current);
						current = prev[current[0] + ',' + current[1]];
					}
					path.push(current);
					break;
				}
				var neighbors = getNeighbors(current[0], current[1]);
				for (var i = 0; i < neighbors.length; i++) {
					var neighbor = neighbors[i];
					if (!visited[neighbor[0]][neighbor[1]]) {
						stack.push(neighbor);
						prev[neighbor[0] + ',' + neighbor[1]] = current;
						visited[neighbor[0]][neighbor[1]] = true;
					}
				}
			}
			return path.reverse();
		}

function getNeighbors(row, col) {
			var neighbors = [];

if (row > 0 && hasNeighbor(row, col, 'top')) {
				neighbors.push([row-1, col]);
			}

if (row < rows-1 && hasNeighbor(row, col, 'bottom')) {
				neighbors.push([row+1, col]);
			}

if (col > 0 && hasNeighbor(row, col, 'left')) {
				neighbors.push([row, col-1]);
			}

if (col < cols-1 && hasNeighbor(row, col, 'right')) {
				neighbors.push([row, col+1]);
			}

return neighbors;
		}
	</script>
</body>
</html>

このコードは、HTMLの文書の中に2つの要素を含んでいます。1つ目の要素はなぞなぞゲームで、2つ目の要素は迷路ゲームです。

なぞなぞゲームは、questionsとanswersという2つの配列を使って、複数の質問を持つことができます。現在の質問はcurrentQuestionという変数に保存されており、次の質問に進むたびに更新されます。ユーザーが答えを入力すると、checkAnswer()関数が呼び出されて回答を検証し、結果を表示します。

迷路ゲームは、HTML5のcanvas要素を使用して、迷路を描画します。generateMaze()関数は、深さ優先探索を使用して迷路を生成します。findPath()関数は、幅優先探索を使用して迷路の解答を見つけます。それらを呼び出す2つのボタンがあります。また、迷路を解く前に、canvas要素をクリアして、迷路を生成する必要があります。