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

No:4400

2281

←

Prev Next

→

minesweeper
Developer もちきなこ｜Date and time 23/6/27 21:44:11
Build time 58.249 sec｜Game capacity 4.79KB｜

Script

マインスイーパーを作りました！以下がそのコードです：

マインスイーパー

このマインスイーパーゲームは、10行と10列の盤面で15つの地雷を持ちます。右クリックで旗を立て、左クリックで地雷のないセルをクリックして開きます。ゲームオーバーになると、地雷の場所が示されます。すべての地雷が見つかるか、最後のノンマインのセルが開かれるまでゲームをプレイします。

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

マインスイーパーを作りました！
以下がそのコードです：

```html
<!DOCTYPE html>
<html>
<head>
	<title>マインスイーパー</title>
	<meta charset="utf-8">
	<style>
		body {
			font-size: 40px;
			text-align: center;
		}
		button {
			padding: 10px;
			margin: 5px;
			background: #ccc;
			border: none;
			border-radius: 5px;
			outline: none;
			cursor: pointer;
		}
		.gameover {
			background: #f00;
			color: #fff;
		}
		.hidden {
			display: none;
		}
		.visible {
			display: block;
		}
	</style>
</head>
<body>
	<h1>マインスイーパー</h1>
	<p id="message"></p>
	<div id="board"></div>
	<button id="reset">Reset</button>
	<script>
		var ROWS = 10;
		var COLS = 10;
		var MINES = 15;

var board = [];
		var mineLocations = [];
		var revealed = [];
		var flagged = [];
		var gameOver = false;

function init() {
			for (var i = 0; i < ROWS; i++) {
				board[i] = [];
				revealed[i] = [];
				flagged[i] = [];
				for (var j = 0; j < COLS; j++) {
					board[i][j] = 0;
					revealed[i][j] = false;
					flagged[i][j] = false;
				}
			}

for (var k = 0; k < MINES; k++) {
				var row = Math.floor(Math.random() * ROWS);
				var col = Math.floor(Math.random() * COLS);

if (board[row][col] === -1) {
					k--;
				} else {
					board[row][col] = -1;
					mineLocations.push([row, col]);
				}
			}

for (var r = 0; r < ROWS; r++) {
				for (var c = 0; c < COLS; c++) {
					if (board[r][c] !== -1) {
						var count = 0;
						for (var x = -1; x <= 1; x++) {
							for (var y = -1; y <= 1; y++) {
								if (r+x >= 0 && r+x < ROWS && c+y >= 0 && c+y < COLS && board[r+x][c+y] === -1) {
									count++;
								}
							}
						}
						board[r][c] = count;
					}
				}
			}

drawBoard();
		}

function drawBoard() {
			var boardDiv = document.getElementById("board");
			boardDiv.innerHTML = "";

for (var i = 0; i < ROWS; i++) {
				var rowDiv = document.createElement("div");
				rowDiv.classList.add("row");
				boardDiv.appendChild(rowDiv);

for (var j = 0; j < COLS; j++) {
					var cellDiv = document.createElement("div");
					cellDiv.classList.add("cell");

if (revealed[i][j]) {
						cellDiv.classList.add("revealed");
						if (board[i][j] === -1) {
							cellDiv.classList.add("mine");
						} else {
							cellDiv.textContent = board[i][j];
						}
					} else if (flagged[i][j]) {
						cellDiv.classList.add("flagged");
						cellDiv.textContent = "🚩";
					} else {
						cellDiv.textContent = "";
					}

cellDiv.addEventListener("click", revealCell.bind(null, i, j));
					cellDiv.addEventListener("contextmenu", flagCell.bind(null, i, j));

rowDiv.appendChild(cellDiv);
				}
			}
		}

function revealCell(row, col) {
			if (gameOver) {
				return;
			}

if (flagged[row][col]) {
				return;
			}

if (board[row][col] === -1) {
				gameOver = true;
				revealed[row][col] = true;
				drawBoard();
				document.getElementById("message").textContent = "ゲームオーバー！";
				document.getElementById("board").classList.add("gameover");
				return;
			}

reveal(row, col);

for (var i = 0; i < mineLocations.length; i++) {
				var mine = mineLocations[i];
				if (!revealed[mine[0]][mine[1]]) {
					return;
				}
			}

gameOver = true;
			drawBoard();
			document.getElementById("message").textContent = "おめでとう！ゲームクリア！";
		}

function reveal(row, col) {
			if (row < 0 || row >= ROWS || col < 0 || col >= COLS) {
				return;
			}

if (revealed[row][col]) {
				return;
			}

if (flagged[row][col]) {
				return;
			}

revealed[row][col] = true;

if (board[row][col] === 0) {
				reveal(row-1, col-1);
				reveal(row-1, col);
				reveal(row-1, col+1);
				reveal(row, col-1);
				reveal(row, col+1);
				reveal(row+1, col-1);
				reveal(row+1, col);
				reveal(row+1, col+1);
			}
		}

function flagCell(row, col) {
			event.preventDefault();

if (gameOver) {
				return;
			}

flagged[row][col] = !flagged[row][col];
			drawBoard();
		}

function reset() {
			board = [];
			mineLocations = [];
			revealed = [];
			flagged = [];
			gameOver = false;
			document.getElementById("message").textContent = "";
			document.getElementById("board").classList.remove("gameover");
			init();
		}

document.getElementById("reset").addEventListener("click", reset);

init();
	</script>
</body>
</html>
```