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

No:713

218

←

Prev Next

→

Games like Minesweeper
Developer User3099｜Date and time 23/6/17 14:17:34
Build time 71.559 sec｜Game capacity 5.934KB｜

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 {
			font-size: 2em;
			text-align: center;
		}
		table {
			margin: auto;
		}
		td {
			text-align: center;
			width: 2.5em;
			height: 2.5em;
			border: 1px solid black;
			color: white;
			background-color: gray;
			cursor: pointer;
		}
		td:hover {
			background-color: silver;
		}
		.mine {
			background-color: red;
		}
		.one {
			background-color: blue;
		}
		.two {
			background-color: green;
		}
		.three {
			background-color: yellow;
		}
		.four {
			background-color: orange;
		}
	</style>
</head>
<body>
	<h1>マインスイーパー</h1>
	<table id="board"></table>
	<script>
		const BOARD_SIZE = 10;
		const MINE_COUNT = 10;
		let board = [];
		let isGameOver = false;
		
		function generateBoard() {
			for (let i = 0; i < BOARD_SIZE; i++) {
				board.push([]);
				for (let j = 0; j < BOARD_SIZE; j++) {
					board[i].push(0);
				}
			}
			
			let minesPlaced = 0;
			while (minesPlaced < MINE_COUNT) {
				let row = Math.floor(Math.random() * BOARD_SIZE);
				let col = Math.floor(Math.random() * BOARD_SIZE);
				if (board[row][col] !== "mine") {
					board[row][col] = "mine";
					minesPlaced++;
				}
			}
			
			for (let i = 0; i < BOARD_SIZE; i++) {
				for (let j = 0; j < BOARD_SIZE; j++) {
					if (board[i][j] !== "mine") {
						let mineCount = 0;
						if (i > 0 && board[i-1][j] === "mine") mineCount++;
						if (i < BOARD_SIZE - 1 && board[i+1][j] === "mine") mineCount++;
						if (j > 0 && board[i][j-1] === "mine") mineCount++;
						if (j < BOARD_SIZE - 1 && board[i][j+1] === "mine") mineCount++;
						if (i > 0 && j > 0 && board[i-1][j-1] === "mine") mineCount++;
						if (i > 0 && j < BOARD_SIZE - 1 && board[i-1][j+1] === "mine") mineCount++;
						if (i < BOARD_SIZE - 1 && j > 0 && board[i+1][j-1] === "mine") mineCount++;
						if (i < BOARD_SIZE - 1 && j < BOARD_SIZE - 1 && board[i+1][j+1] === "mine") mineCount++;
						board[i][j] = mineCount;
					}
				}
			}
		}
		
		function revealCell(row, col) {
			if (isGameOver) {
				return;    
			}
			
			if (board[row][col] === "mine") {
				isGameOver = true;
				document.getElementById("message").innerHTML = "You lose!";
				revealBoard();
			} else {
				let cell = document.getElementById("cell" + row + col);
				cell.classList.remove("gray");
				if (board[row][col] === 0) {
					cell.classList.add("white");
					if (row > 0 && document.getElementById("cell" + (row-1) + col).classList.contains("gray")) revealCell(row-1, col);
					if (row < BOARD_SIZE - 1 && document.getElementById("cell" + (row+1) + col).classList.contains("gray")) revealCell(row+1, col);
					if (col > 0 && document.getElementById("cell" + row + (col-1)).classList.contains("gray")) revealCell(row, col-1);
					if (col < BOARD_SIZE - 1 && document.getElementById("cell" + row + (col+1)).classList.contains("gray")) revealCell(row, col+1);
					if (row > 0 && col > 0 && document.getElementById("cell" + (row-1) + (col-1)).classList.contains("gray")) revealCell(row-1, col-1);
					if (row > 0 && col < BOARD_SIZE - 1 && document.getElementById("cell" + (row-1) + (col+1)).classList.contains("gray")) revealCell(row-1, col+1);
					if (row < BOARD_SIZE - 1 && col > 0 && document.getElementById("cell" + (row+1) + (col-1)).classList.contains("gray")) revealCell(row+1, col-1);
					if (row < BOARD_SIZE - 1 && col < BOARD_SIZE - 1 && document.getElementById("cell" + (row+1) + (col+1)).classList.contains("gray")) revealCell(row+1, col+1);
				} else {
					cell.classList.add(getNumberClass(board[row][col]));
				}
				checkWin();
			}
		}
		
		function revealBoard() {
			for (let i = 0; i < BOARD_SIZE; i++) {
				for (let j = 0; j < BOARD_SIZE; j++) {
					let cell = document.getElementById("cell" + i + j);
					if (board[i][j] === "mine") {
						cell.classList.add("mine");
					} else {
						cell.classList.remove("gray");
						cell.classList.add(getNumberClass(board[i][j]));
					}
				}
			}
		}
		
		function checkWin() {
			let allCellsRevealed = true;
			for (let i = 0; i < BOARD_SIZE; i++) {
				for (let j = 0; j < BOARD_SIZE; j++) {
					if (board[i][j] !== "mine" && document.getElementById("cell" + i + j).classList.contains("gray")) {
						allCellsRevealed = false;
					}
				}
			}
			
			if (allCellsRevealed) {
				isGameOver = true;
				document.getElementById("message").innerHTML = "You win!";
				revealBoard();
			}
		}
		
		function getNumberClass(number) {
			switch (number) {
				case 1:
					return "one";
				case 2:
					return "two";
				case 3:
					return "three";
				case 4:
					return "four";
			}
			return "";
		}
		
		function startGame() {
			document.getElementById("board").innerHTML = "";
			board = [];
			isGameOver = false;
			document.getElementById("message").innerHTML = "";
			generateBoard();
			
			for (let i = 0; i < BOARD_SIZE; i++) {
				let row = document.createElement("tr");
				for (let j = 0; j < BOARD_SIZE; j++) {
					let cell = document.createElement("td");
					cell.classList.add("gray");
					cell.id = "cell" + i + j;
					cell.addEventListener("click", function() { revealCell(i, j); });
					row.appendChild(cell);
				}
				document.getElementById("board").appendChild(row);
			}
		}
		
		startGame();
	</script>
	<p id="message"></p>
	<button onclick="startGame()">New game</button>
</body>
</html>