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

No:1554

502

←

Prev Next

→

About 20 quotes from philosophers are prepared, an..ALL
Developer User3181｜Date and time 23/6/18 18:32:23
Build time 83.571 sec｜Game capacity 5.82KB｜

Script

哲学者の名言と迷路ゲーム

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>哲学者の名言と迷路ゲーム</title>
	<style>
		#mazeCanvas {
			border: 1px solid black;
			background-color: white;
		}
	</style>
</head>
<body>
	<h1>哲学者の名言と迷路ゲーム</h1>
	<p id="quote1"></p>
	<p id="quote2"></p>
	<canvas id="mazeCanvas" width="300" height="300"></canvas>
	<p id="weather"></p>

// ランダムに名言を2つ取得して表示
		const quoteIdx1 = Math.floor(Math.random() * quotes.length);
		const quoteIdx2 = Math.floor(Math.random() * quotes.length);
		document.getElementById("quote1").textContent = quotes[quoteIdx1];
		document.getElementById("quote2").textContent = quotes[quoteIdx2];

// 迷路の設定
		const mazeWidth = 10;
		const mazeHeight = 10;
		const mazeData = [
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
			[0, 1, 0, 1, 1, 1, 1, 1, 1, 0],
			[0, 1, 0, 1, 0, 1, 0, 0, 1, 0],
			[0, 1, 0, 1, 0, 1, 1, 0, 1, 0],
			[0, 1, 1, 1, 0, 0, 0, 0, 1, 0],
			[0, 1, 0, 1, 1, 1, 1, 0, 1, 0],
			[0, 1, 0, 0, 0, 0, 1, 0, 1, 0],
			[0, 1, 1, 1, 1, 1, 1, 0, 1, 0],
			[0, 0, 0, 0, 0, 0, 0, 0, 1, 0],
			[0, 1, 1, 1, 1, 1, 1, 1, 1, 0],
		];

// 迷路を描画
		const canvas = document.getElementById("mazeCanvas");
		const ctx = canvas.getContext("2d");
		const cellWidth = canvas.width / mazeWidth;
		const cellHeight = canvas.height / mazeHeight;
		for (let y = 0; y < mazeHeight; y++) {
			for (let x = 0; x < mazeWidth; x++) {
				if (mazeData[y][x] === 0) { // 壁の場合
					ctx.fillRect(x * cellWidth, y * cellHeight, cellWidth, cellHeight);
				}
			}
		}

// 正解ルートを自動で塗りつぶし
		ctx.fillStyle = "rgba(0, 0, 255, 0.3)";
		ctx.fillRect(0, 0, cellWidth, cellHeight); // スタート地点を塗りつぶし
		let x = 0, y = 1;
		while (y < mazeHeight - 1) {
			if (mazeData[y][x + 1] === 1) { // 右に進める場合
				ctx.fillRect((x + 1) * cellWidth, y * cellHeight, cellWidth, cellHeight);
				x++;
			} else if (mazeData[y - 1][x] === 1) { // 上に進める場合
				ctx.fillRect(x * cellWidth, (y - 1) * cellHeight, cellWidth, cellHeight);
				y--;
			} else if (mazeData[y][x - 1] === 1) { // 左に進める場合
				ctx.fillRect((x - 1) * cellWidth, y * cellHeight, cellWidth, cellHeight);
				x--;
			} else { // 下に進める場合
				ctx.fillRect(x * cellWidth, (y + 1) * cellHeight, cellWidth, cellHeight);
				y++;
			}
		}
		
		// 東京の天気情報を取得して表示
		fetch("https://weather.tsukumijima.net/api/forecast?city=130010")
			.then(response => response.json())
			.then(data => {
				const weather = data.forecasts[0].telop;
				document.getElementById("weather").textContent = `東京の天気：${weather}`;
			})
			.catch(error => console.error(error));
	</script>
</body>
</html>