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

No:1175

140

←

Prev Next

→

Mine clearance game
Developer User3258｜Date and time 23/6/18 7:05:42
Build time 65.753 sec｜Game capacity 5.328KB｜

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>
		body {
			background-color: #eee;
			text-align: center;
		}
		button {
			background-color: #33cc99;
			border: none;
			color: white;
			padding: 15px 32px;
			text-align: center;
			text-decoration: none;
			display: inline-block;
			font-size: 16px;
			margin: 4px 2px;
			cursor: pointer;
		}
	</style>
	<script>
		// 地雷除去ゲームの実装
		// 変数宣言
		var gridSize = 10; // マス目の大きさ
		var bombCount = 10; // 地雷の数
		var board = new Array(gridSize);
		var gameOver = false;

// マスの状態
		const STATE_COVERED = 0;
		const STATE_FLAGGED = 1;
		const STATE_UNCOVERED = 2;

// ボードの初期化
		function initBoard() {
			for (var i = 0; i < gridSize; i++) {
				board[i] = new Array(gridSize);
				for (var j = 0; j < gridSize; j++) {
					board[i][j] = { bomb: false, state: STATE_COVERED, value: 0 };
				}
			}

// 地雷の配置
			var bombs = 0;
			while (bombs < bombCount) {
				var row = Math.floor(Math.random() * gridSize);
				var col = Math.floor(Math.random() * gridSize);
				if (!board[row][col].bomb) {
					board[row][col].bomb = true;
					bombs++;
				}
			}

// マスの数字の計算
			for (var i = 0; i < gridSize; i++) {
				for (var j = 0; j < gridSize; j++) {
					if (board[i][j].bomb) {
						// このマスに地雷がある場合は数字を計算しない
						continue;
					}
					var count = 0;
					if (i > 0 && j > 0 && board[i - 1][j - 1].bomb) count++; // 上左
					if (i > 0 && board[i - 1][j].bomb) count++; // 上
					if (i > 0 && j < gridSize - 1 && board[i - 1][j + 1].bomb) count++; // 上右
					if (j > 0 && board[i][j - 1].bomb) count++; // 左
					if (j < gridSize - 1 && board[i][j + 1].bomb) count++; // 右
					if (i < gridSize - 1 && j > 0 && board[i + 1][j - 1].bomb) count++; // 下左
					if (i < gridSize - 1 && board[i + 1][j].bomb) count++; // 下
					if (i < gridSize - 1 && j < gridSize - 1 && board[i + 1][j + 1].bomb) count++; // 下右
					board[i][j].value = count;
				}
			}
		}

// ボードの表示
		function drawBoard() {
			var html = '';
			html += '<table>';
			for (var i = 0; i < gridSize; i++) {
				html += '<tr>';
				for (var j = 0; j < gridSize; j++) {
					var cell = board[i][j];
					var value = '';
					var style = '';
					if (cell.state == STATE_COVERED) {
						value = '';
						style = 'background-color:#ddd;color:#ddd;';
					} else if (cell.state == STATE_FLAGGED) {
						value = '🚩';
						style = 'background-color:#33cc99;color:white;';
					} else if (cell.state == STATE_UNCOVERED) {
						style = 'background-color:#fff;border:1px solid black;';
						if (cell.bomb) {
							if (gameOver) {
								value = '💣';
								style += 'color:red;';
							} else {
								value = '';
							}
						} else if (cell.value > 0) {
							value = cell.value;
						}
					}
					html += '<td style="' + style + '" onclick="onClick(' + i + ',' + j + ')" oncontextmenu="onFlag(' + i + ',' + j + ');return false;">' + value + '</td>';
				}
				html += '</tr>';
			}
			html += '</table>';
			document.getElementById('board').innerHTML = html;
		}

// ゲームの開始
		function startGame() {
			initBoard();
			drawBoard();
			gameOver = false;
		}

// マスをクリックしたとき
		function onClick(row, col) {
			if (gameOver) {
				return;
			}
			var cell = board[row][col];
			if (cell.state != STATE_COVERED) {
				return;
			}
			if (cell.bomb) {
				gameOver = true;
				drawBoard();
				alert('ゲームオーバー');
			} else {
				cell.state = STATE_UNCOVERED;
				if (cell.value == 0) {
					uncoverCells(row, col);
				}
				drawBoard();
				if (checkWin()) {
					gameOver = true;
					drawBoard();
					alert('おめでとうございます！');
				}
			}
		}

// フラグを立てたとき
		function onFlag(row, col) {
			if (gameOver) {
				return;
			}
			var cell = board[row][col];
			if (cell.state == STATE_COVERED) {
				cell.state = STATE_FLAGGED;
			} else if (cell.state == STATE_FLAGGED) {
				cell.state = STATE_COVERED;
			}
			drawBoard();
		}

// 空白のマスを自動的に開く
		function uncoverCells(row, col) {
			if (row < 0 || col < 0 || row >= gridSize || col >= gridSize) {
				return;
			}
			var cell = board[row][col];
			if (cell.state != STATE_COVERED) {
				return;
			}
			cell.state = STATE_UNCOVERED;
			if (cell.value > 0) {
				return;
			}
			uncoverCells(row - 1, col - 1);
			uncoverCells(row - 1, col);
			uncoverCells(row - 1, col + 1);
			uncoverCells(row, col - 1);
			uncoverCells(row, col + 1);
			uncoverCells(row + 1, col - 1);
			uncoverCells(row + 1, col);
			uncoverCells(row + 1, col + 1);
		}

// 勝利条件のチェック
		function checkWin() {
			for (var i = 0; i < gridSize; i++) {
				for (var j = 0; j < gridSize; j++) {
					var cell = board[i][j];
					if (cell.bomb) {
						if (cell.state != STATE_FLAGGED) {
							return false;
						}
					} else {
						if (cell.state == STATE_COVERED) {
							return false;
						}
					}
				}
			}
			return true;
		}
	</script>
</head>
<body onload="startGame();">
	<h1>地雷除去ゲーム</h1>
	<div id="board"></div>
	<br>
	<button onclick="startGame();">再試行する</button>
</body>
</html>