Searching for treasure by sonar's game

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

No:4502

6345

←

Prev Next

→

Searching for treasure by sonar
Developer anonymous｜Date and time 70/1/1 10:01:05
Build time unknown sec｜Game capacity 3.665KB｜

Script

ゲーム「宝探し」

ソナー残数: 5

マスにマウスオーバーしてソナーを使用しましょう。ソナーを使って宝物の位置を見つけてください。

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

ゲーム「宝探し」

<html>
<head>
	<meta charset="UTF-8">
	<title>宝探しゲーム</title>
	<style>
		#game-container {
			width: 100%;
			height: 100vh;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		#board {
			display: grid;
			grid-template-columns: repeat(10, 1fr);
			grid-template-rows: repeat(10, 1fr);
			grid-gap: 5px;
			border: 3px solid black;
			width: calc(100vh - 50px);
			height: calc(100vh - 50px);
			max-width: 500px;
			max-height: 500px;
			background-color: lightblue;
			padding: 10px;
			box-sizing: border-box;
		}
		.cell {
			background-color: white;
			border: 2px solid black;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 20px;
			color: blue;
			cursor: pointer;
			user-select: none;
		}
		.cell:hover {
			background-color: lightgray;
		}
		.cell.treasure {
			color: yellow;
		}
		.cell.sonar {
			color: red;
		}
		@media (max-width: 500px) {
			#board {
				width: calc(100vw - 20px);
				height: calc(100vw - 20px);
			}
		}
	</style>
</head>
<body>
	<div id="game-container">
		<div id="board"></div>
	</div>
	<script>
	// ゲーム変数の初期化
	var board = [], treasureX, treasureY, sonarCount = 5;

// ゲーム盤を作成
	function createBoard() {
		var boardElem = document.getElementById("board");
		// 10x10のマスを割り当てる
		for (var row = 1; row <= 10; row++) {
			board[row] = [];
			for (var col = 1; col <= 10; col++) {
				var cellElem = document.createElement("div");
				cellElem.classList.add("cell");
				cellElem.dataset.row = row;
				cellElem.dataset.col = col;

// マウスオーバーでソナー使用
				cellElem.addEventListener("mouseover", function(event) {
					if (sonarCount > 0) {
						var row = parseInt(event.target.dataset.row),
							col = parseInt(event.target.dataset.col);
						showSonar(row, col);
						sonarCount--;
						updateSonarDisplay();
					}
				});
				boardElem.appendChild(cellElem);

board[row][col] = cellElem;
			}
		}
	}

// 宝物の位置をランダムに割り当てる
	function placeTreasure() {
		treasureX = Math.floor(Math.random() * 10) + 1;
		treasureY = Math.floor(Math.random() * 10) + 1;
		board[treasureY][treasureX].classList.add("treasure");
	}

// ソナーの範囲内に宝物があったら画面に表示する
	function showSonar(row, col) {
		board[row][col].classList.add("sonar");
		var rowDiff = Math.abs(row - treasureY),
			colDiff = Math.abs(col - treasureX),
			distance = Math.sqrt(rowDiff * rowDiff + colDiff * colDiff);
		if (distance <= 2) {
			alert("宝物を発見！");
			resetGame();
		}
	}

// ソナーの残数を画面に反映する
	function updateSonarDisplay() {
		document.getElementById("sonar-count").innerText = "ソナー残数: " + sonarCount;
		if (sonarCount == 0) {
			alert("ソナーを使い切ってしまいました。");
			resetGame();
		}
	}

// ゲームをリセットする
	function resetGame() {
		for (var row = 1; row <= 10; row++) {
			for (var col = 1; col <= 10; col++) {
				board[row][col].classList.remove("sonar");
				board[row][col].classList.remove("treasure");
			}
		}
		placeTreasure();
		sonarCount = 5;
		updateSonarDisplay();
	}

// ゲームを開始する
	function startGame() {
		createBoard();
		placeTreasure();
		updateSonarDisplay();
	}

// ゲームを開始する
	startGame();
	</script>
	<div id="sonar-count">ソナー残数: 5</div>
	<div>マスにマウスオーバーしてソナーを使用しましょう。ソナーを使って宝物の位置を見つけてください。</div>
	<button onclick="resetGame()">リセット</button>
</body>
</html>