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

No:1501

245

←

Prev Next

→

Drawing cubes instead of wireframes with ruled lin..ALL
Developer User3181｜Date and time 23/6/18 17:41:15
Build time 70.552 sec｜Game capacity 6.179KB｜

Script

絵文字迷路ゲーム

このゲームは、7x7のマス目の中で、スタート位置からゴールのマス目まで移動するゲームです。ゴールのマス目には、旗の絵文字が描かれています。プレイヤーが移動するマス目には、ランダムな順番で動物や食べ物の絵文字が描かれています。スタート位置は左上のマス目です。プレイヤーは、マス目をクリックすることで上下左右に移動します。プレイヤーがゴールのマス目に到着すると、ゲームクリアです。スマートフォンでもプレイすることができます。

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
	<title>絵文字迷路ゲーム</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #fff098;
			color: #000;
			font-family: Arial, sans-serif;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			min-height: 100vh;
		}
		
		#game-container {
			display: grid;
			grid-template-columns: repeat(7, 1fr);
			grid-template-rows: repeat(7, 1fr);
			grid-gap: 10px;
			background-color: #eee;
			padding: 10px;
			border-radius: 20px;
			box-shadow: 0 0 20px rgba(0,0,0,0.5);
		}
		
		.square {
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 2em;
			cursor: pointer;
			transition: all 0.2s ease-in-out;
		}
		
		.square:hover {
			background-color: #ccc;
		}
		
		.square.active {
			background-color: #ff0;
		}
		
		#result {
			margin-top: 20px;
			display: none;
			text-align: center;
			font-size: 2em;
			font-weight: bold;
			color: #f00;
		}
		
		@media (max-width: 640px) {
			#game-container {
				grid-template-columns: repeat(5, 1fr);
				grid-template-rows: repeat(5, 1fr);
				grid-gap: 5px;
			}
			
			.square {
				font-size: 1.5em;
			}
			
			#result {
				font-size: 1.5em;
			}
		}
	</style>
	<script>
		// 絵文字配列
		const emojis = ["🐶", "🐱", "🐭", "🐹", "🐰", "🐻", "🐼", "🐨", "🐯", "🦁", "🐮", "🐷", "🐸", "🐙", "🐵", "🙈", "🙉", "🙊", "🐔", "🐧", "🐦", "🐤", "🦆", "🦉", "🐍", "🐢", "🐬", "🦈", "🐳", "🐙"];
		
		// 現在位置
		let currentRow = 0;
		let currentCol = 0;
		
		// 目的地
		const destinationRow = Math.floor(Math.random() * 7);
		const destinationCol = Math.floor(Math.random() * 7);
		
		// 目的地に到着したかどうか
		let arrived = false;
		
		window.addEventListener("load", function() {
			// マップを生成
			for (let r = 0; r < 7; r++) {
				for (let c = 0; c < 7; c++) {
					const square = document.createElement("div");
					square.classList.add("square");
					if (r === destinationRow && c === destinationCol) {
						square.innerHTML = "🏁";
					} else {
						const emojiIndex = Math.floor(Math.random() * emojis.length);
						square.innerHTML = emojis[emojiIndex];
						emojis.splice(emojiIndex, 1);
					}
					square.dataset.row = r;
					square.dataset.col = c;
					document.getElementById("game-container").appendChild(square);
				}
			}
			
			// 開始位置のマスをアクティブ化
			document.querySelector(`.square[data-row="${currentRow}"][data-col="${currentCol}"]`).classList.add("active");
			
			// マスをクリックした時の処理
			document.querySelectorAll(".square").forEach(function(square) {
				square.addEventListener("click", function() {
					if (this.dataset.row === "" || this.dataset.col === "") {
						return;
					}
					const clickedRow = parseInt(this.dataset.row);
					const clickedCol = parseInt(this.dataset.col);
					if (clickedRow === currentRow && clickedCol === currentCol + 1) {
						moveRight();
					} else if (clickedRow === currentRow && clickedCol === currentCol - 1) {
						moveLeft();
					} else if (clickedRow === currentRow + 1 && clickedCol === currentCol) {
						moveDown();
					} else if (clickedRow === currentRow - 1 && clickedCol === currentCol) {
						moveUp();
					}
				});
			});
		});
		
		// 右に移動する
		function moveRight() {
			if (currentCol !== 6) {
				document.querySelector(`.square[data-row="${currentRow}"][data-col="${currentCol}"]`).classList.remove("active");
				currentCol++;
				document.querySelector(`.square[data-row="${currentRow}"][data-col="${currentCol}"]`).classList.add("active");
				if (currentRow === destinationRow && currentCol === destinationCol) {
					win();
				}
			}
		}
		
		// 左に移動する
		function moveLeft() {
			if (currentCol !== 0) {
				document.querySelector(`.square[data-row="${currentRow}"][data-col="${currentCol}"]`).classList.remove("active");
				currentCol--;
				document.querySelector(`.square[data-row="${currentRow}"][data-col="${currentCol}"]`).classList.add("active");
				if (currentRow === destinationRow && currentCol === destinationCol) {
					win();
				}
			}
		}
		
		// 下に移動する
		function moveDown() {
			if (currentRow !== 6) {
				document.querySelector(`.square[data-row="${currentRow}"][data-col="${currentCol}"]`).classList.remove("active");
				currentRow++;
				document.querySelector(`.square[data-row="${currentRow}"][data-col="${currentCol}"]`).classList.add("active");
				if (currentRow === destinationRow && currentCol === destinationCol) {
					win();
				}
			}
		}
		
		// 上に移動する
		function moveUp() {
			if (currentRow !== 0) {
				document.querySelector(`.square[data-row="${currentRow}"][data-col="${currentCol}"]`).classList.remove("active");
				currentRow--;
				document.querySelector(`.square[data-row="${currentRow}"][data-col="${currentCol}"]`).classList.add("active");
				if (currentRow === destinationRow && currentCol === destinationCol) {
					win();
				}
			}
		}
		
		// ゲームに勝利した時の処理
		function win() {
			arrived = true;
			document.querySelector("#result").innerHTML = "ゲームクリア！";
			document.querySelector("#result").style.display = "block";
		}
	</script>
</head>
<body>
	<h1>絵文字迷路ゲーム</h1>
	<div id="game-container"></div>
	<div id="result"></div>
</body>
</html>