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

No:221

244

silvering
Developer User2925｜Date and time 23/6/10 19:54:43
Build time 48.087 sec｜Game capacity 3.646KB｜

silvering

You can play on your phone. Click on the squares to remove the silver foil、Guess where the bombs are!

→ 　

1　

1　

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

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
<head>
	<title>銀剥がし</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			font-size: 2em;
			text-align: center;
		}
		#game {
			margin: auto;
			display: table;
		}
		#grid {
			width: 280px;
			height: 280px;
			display: table;
			border-spacing: 5px;
			background-color: white;
			border: 2px solid black;
		}
		.cell {
			display: table-cell;
			background-color: lightgray;
			border: 1px solid black;
			cursor: pointer;
			font-size: 3em;
			text-align: center;
			vertical-align: middle;
		}
		.cell:hover {
			background-color: silver;
		}
		.bomb {
			color: red;
		}
		.win {
			color: green;
		}
		.lose {
			color: darkred;
		}
	</style>
</head>
<body>
	<h1>銀剥がし</h1>
	<p>スマホで遊べます。マスをクリックして銀の箔を剥がし、爆弾がある場所を当てよう！</p>
	<div id="game">
		<div id="grid"></div>
		<p>
			<button id="start">スタート</button>
			<span id="remaining"></span>
		</p>
	</div>
	<script>
		const grid = document.getElementById('grid');
		const cells = [];
		let bombs = [];
		let remaining = 0;
		let status = null;

function init() {
			for (let i = 0; i < 10; i++) {
				const row = [];
				for (let j = 0; j < 10; j++) {
					const cell = document.createElement('div');
					cell.classList.add('cell');
					cell.dataset.x = j;
					cell.dataset.y = i;
					row.push(cell);
					grid.appendChild(cell);
				}
				cells.push(row);
			}
		}

function generateBombs(cell) {
			const freeCells = [];
			for (const row of cells) {
				for (const cell of row) {
					if (!cell.classList.contains('revealed')) {
						freeCells.push(cell);
					}
				}
			}
			const index = Math.floor(Math.random() * freeCells.length);
			const bombCells = freeCells.splice(index, 10);
			for (const bombCell of bombCells) {
				bombCell.classList.add('bomb');
				bombs.push(bombCell);
				for (let i = -1; i <= 1; i++) {
					for (let j = -1; j <= 1; j++) {
						const x = +bombCell.dataset.x + j;
						const y = +bombCell.dataset.y + i;
						const neighbor = cells[y][x];
						if (neighbor && !neighbor.classList.contains('bomb')) {
							neighbor.dataset.count = (+neighbor.dataset.count || 0) + 1;
						}
					}
				}
			}
			remaining = freeCells.length - 10;
			document.getElementById('remaining').textContent = `残り: ${remaining}`;
		}

function reveal(cell) {
			if (cell.classList.contains('bomb')) {
				status = 'lose';
				for (const bomb of bombs) {
					bomb.classList.add('revealed');
				}
			} else if (!cell.classList.contains('revealed')) {
				cell.classList.add('revealed');
				cell.textContent = cell.dataset.count;
				remaining--;
				document.getElementById('remaining').textContent = `残り: ${remaining}`;
				if (remaining === 0) {
					status = 'win';
				} else if (!cell.dataset.count) {
					const x = +cell.dataset.x;
					const y = +cell.dataset.y;
					for (let i = -1; i <= 1; i++) {
						for (let j = -1; j <= 1; j++) {
							const neighbor = cells[y + i]?.[x + j];
							if (neighbor) {
								reveal(neighbor);
							}
						}
					}
				}
			}
			if (status) {
				for (const row of cells) {
					for (const cell of row) {
						cell.classList.add(status);
					}
				}
			}
		}

document.getElementById('start').addEventListener('click', () => {
			bombs = [];
			remaining = 0;
			status = null;
			for (const row of cells) {
				for (const cell of row) {
					cell.className = 'cell';
					cell.textContent = '';
					cell.dataset.count = '';
				}
			}
			generateBombs();
		});

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