用JavaScript写一个扫雷
时间: 2023-12-29 22:19:31 浏览: 44
好的,以下是一个简单的JavaScript扫雷游戏的实现:
HTML部分:
```html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript 扫雷游戏</title>
<style>
.cell {
width: 20px;
height: 20px;
border: 1px solid black;
text-align: center;
vertical-align: middle;
font-size: 14px;
cursor: pointer;
}
.hidden {
background-color: gray;
}
.bomb {
background-color: red;
}
</style>
</head>
<body>
<h1>JavaScript 扫雷游戏</h1>
<table id="gameboard"></table>
<button onclick="init()">开始游戏</button>
<script src="game.js"></script>
</body>
</html>
```
JavaScript部分:
```javascript
var boardSize = 10; // 游戏区域大小
var numBombs = 10; // 炸弹数量
var board = []; // 游戏区域数组
var gameOver = false; // 游戏是否结束
// 初始化游戏区域
function init() {
// 生成游戏区域
var gameboard = document.getElementById("gameboard");
gameboard.innerHTML = "";
for (var i = 0; i < boardSize; i++) {
var row = document.createElement("tr");
board[i] = [];
for (var j = 0; j < boardSize; j++) {
var cell = document.createElement("td");
cell.className = "cell hidden";
cell.setAttribute("x", i);
cell.setAttribute("y", j);
cell.onclick = cellClicked;
row.appendChild(cell);
board[i][j] = {
bomb: false,
open: false,
cell: cell
};
}
gameboard.appendChild(row);
}
// 随机生成炸弹
var bombs = 0;
while (bombs < numBombs) {
var x = Math.floor(Math.random() * boardSize);
var y = Math.floor(Math.random() * boardSize);
if (!board[x][y].bomb) {
board[x][y].bomb = true;
bombs++;
}
}
// 更新方格周围的数字
for (var i = 0; i < boardSize; i++) {
for (var j = 0; j < boardSize; j++) {
if (!board[i][j].bomb) {
var count = 0;
for (var x = Math.max(0, i - 1); x <= Math.min(boardSize - 1, i + 1); x++) {
for (var y = Math.max(0, j - 1); y <= Math.min(boardSize - 1, j + 1); y++) {
if (board[x][y].bomb) {
count++;
}
}
}
board[i][j].cell.innerHTML = count;
}
}
}
// 重置游戏状态
gameOver = false;
}
// 方格点击事件处理函数
function cellClicked() {
if (gameOver) {
return;
}
var x = parseInt(this.getAttribute("x"));
var y = parseInt(this.getAttribute("y"));
if (board[x][y].open) {
return;
}
if (board[x][y].bomb) {
this.className = "cell bomb";
gameOver = true;
alert("你输了!");
} else {
this.className = "cell";
board[x][y].open = true;
if (this.innerHTML == "0") {
for (var i = Math.max(0, x - 1); i <= Math.min(boardSize - 1, x + 1); i++) {
for (var j = Math.max(0, y - 1); j <= Math.min(boardSize - 1, y + 1); j++) {
if (!board[i][j].open) {
board[i][j].cell.click();
}
}
}
}
if (checkWin()) {
gameOver = true;
alert("你赢了!");
}
}
}
// 检查是否胜利
function checkWin() {
for (var i = 0; i < boardSize; i++) {
for (var j = 0; j < boardSize; j++) {
if (!board[i][j].open && !board[i][j].bomb) {
return false;
}
}
}
return true;
}
```
以上代码实现了一个简单的扫雷游戏,包括生成游戏区域、随机生成炸弹、更新方格周围的数字、方格点击事件处理、检查胜利等功能。你可以将其保存为game.js文件并在HTML中引用。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)