ご依頼ありがとうございます。以下が、要望に沿って作成したマインスイーパーのコードです。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>マインスイーパー</title>
</head>
<body>
<h1>マインスイーパー</h1>
<table>
<tr>
<td id="00" onclick="clickCell('00')"></td>
<td id="01" onclick="clickCell('01')"></td>
<td id="02" onclick="clickCell('02')"></td>
</tr>
<tr>
<td id="10" onclick="clickCell('10')"></td>
<td id="11" onclick="clickCell('11')"></td>
<td id="12" onclick="clickCell('12')"></td>
</tr>
<tr>
<td id="20" onclick="clickCell('20')"></td>
<td id="21" onclick="clickCell('21')"></td>
<td id="22" onclick="clickCell('22')"></td>
</tr>
</table>
<script>
// ボムを配置しておく
var bombs = ['01', '11', '12', '20'];
// セルがクリックされた時の処理
function clickCell(cellId) {
// クリックされたセルがボムだった場合、ゲームオーバー
if (bombs.indexOf(cellId) !== -1) {
alert('Game Over');
return;
}
// クリックされたセルから周りのセルを取得
var row = parseInt(cellId[0]);
var col = parseInt(cellId[1]);
var cells = [
[row-1, col-1], [row-1, col], [row-1, col+1],
[row, col-1], [row, col+1],
[row+1, col-1], [row+1, col], [row+1, col+1]
];
// 周りのボムの数を取得し、セルに表示する
var count = 0;
for (var i = 0; i < cells.length; i++) {
var r = cells[i][0];
var c = cells[i][1];
if (r >= 0 && r < 3 && c >= 0 && c < 3 && bombs.indexOf(r.toString()+c.toString()) !== -1) {
count++;
}
}
document.getElementById(cellId).innerHTML = count;
// クリックされたセルが周りにボムがない場合、周りのセルも再帰的にクリック
if (count === 0) {
for (var i = 0; i < cells.length; i++) {
var r = cells[i][0];
var c = cells[i][1];
if (r >= 0 && r < 3 && c >= 0 && c < 3 && document.getElementById(r.toString()+c.toString()).innerHTML === '') {
clickCell(r.toString()+c.toString());
}
}
}
}
</script>
</body>
</html>
```
このマインスイーパーは、指定されたセルをクリックすると周囲にボムがないセルを一度に削除します。削除されたセルには、周囲1マスに何個のボムがあるか表示されます。クリックされたセルが周囲にボムがない場合は、周りのセルも再帰的にクリックされます。
また、クリックされたセルがボムだった場合は、「Game Over」とアラートで表示されます。
ご参考までに、ジョークとしてセルの中に「地雷」と表示することもできますが、セキュリティ上の理由からここでは避けています。
