html5 canvas 扫雷游戏代码
时间: 2023-07-23 08:50:46 浏览: 54
好的,以下是一个简单的HTML5 Canvas 扫雷游戏的示例代码,希望能帮到您:
```html
<!DOCTYPE html>
<html>
<head>
<title>扫雷游戏</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="canvas" width="300" height="300"></canvas>
<script>
// 初始化游戏
var grid = [];
var gridSize = 10;
var bombCount = 10;
var cellSize = 30;
for (var i = 0; i < gridSize; i++) {
var row = [];
for (var j = 0; j < gridSize; j++) {
row.push({
x: j * cellSize,
y: i * cellSize,
width: cellSize,
height: cellSize,
isBomb: false,
isRevealed: false,
isFlagged: false,
neighborCount: 0
});
}
grid.push(row);
}
// 随机布置炸弹
for (var i = 0; i < bombCount; i++) {
var row = Math.floor(Math.random() * gridSize);
var col = Math.floor(Math.random() * gridSize);
var cell = grid[row][col];
if (cell.isBomb) {
i--;
} else {
cell.isBomb = true;
}
}
// 计算每个格子周围的炸弹数量
for (var i = 0; i < gridSize; i++) {
for (var j = 0; j < gridSize; j++) {
var cell = grid[i][j];
if (!cell.isBomb) {
var count = 0;
for (var row = i - 1; row <= i + 1; row++) {
for (var col = j - 1; col <= j + 1; col++) {
if (row >= 0 && row < gridSize && col >= 0 && col < gridSize) {
if (grid[row][col].isBomb) {
count++;
}
}
}
}
cell.neighborCount = count;
}
}
}
// 绘制游戏
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
for (var i = 0; i < gridSize; i++) {
for (var j = 0; j < gridSize; j++) {
var cell = grid[i][j];
context.fillStyle = "gray";
context.fillRect(cell.x, cell.y, cell.width, cell.height);
if (cell.isRevealed) {
if (cell.isBomb) {
context.fillStyle = "red";
context.fillRect(cell.x, cell.y, cell.width, cell.height);
} else {
context.fillStyle = "white";
context.fillRect(cell.x, cell.y, cell.width, cell.height);
if (cell.neighborCount > 0) {
context.font = "20px Arial";
context.fillStyle = "black";
context.fillText(cell.neighborCount, cell.x + cell.width / 2, cell.y + cell.height / 2);
}
}
} else {
if (cell.isFlagged) {
context.font = "20px Arial";
context.fillStyle = "black";
context.fillText("F", cell.x + cell.width / 2, cell.y + cell.height / 2);
}
}
}
}
// 点击格子
canvas.addEventListener("click", function(event) {
var x = event.pageX - canvas.offsetLeft;
var y = event.pageY - canvas.offsetTop;
var cell = getCell(x, y);
if (cell !== null && !cell.isRevealed && !cell.isFlagged) {
if (cell.isBomb) {
revealBombs();
alert("你输了!");
} else {
revealCell(cell);
if (checkWin()) {
alert("你赢了!");
}
}
}
});
// 右击格子
canvas.addEventListener("contextmenu", function(event) {
event.preventDefault();
var x = event.pageX - canvas.offsetLeft;
var y = event.pageY - canvas.offsetTop;
var cell = getCell(x, y);
if (cell !== null && !cell.isRevealed) {
cell.isFlagged = !cell.isFlagged;
drawCell(cell);
}
});
// 根据坐标获取格子
function getCell(x, y) {
for (var i = 0; i < gridSize; i++) {
for (var j = 0; j < gridSize; j++) {
var cell = grid[i][j];
if (cell.x < x && x < cell.x + cell.width &&
cell.y < y && y < cell.y + cell.height) {
return cell;
}
}
}
return null;
}
// 揭开格子
function revealCell(cell) {
cell.isRevealed = true;
drawCell(cell);
if (cell.neighborCount === 0) {
for (var row = cell.row - 1; row <= cell.row + 1; row++) {
for (var col = cell.col - 1; col <= cell.col + 1; col++) {
if (row >= 0 && row < gridSize && col >= 0 && col < gridSize) {
var neighbor = grid[row][col];
if (!neighbor.isRevealed) {
revealCell(neighbor);
}
}
}
}
}
}
// 揭开所有炸弹
function revealBombs() {
for (var i = 0; i < gridSize; i++) {
for (var j = 0; j < gridSize; j++) {
var cell = grid[i][j];
if (cell.isBomb) {
cell.isRevealed = true;
drawCell(cell);
}
}
}
}
// 检查是否胜利
function checkWin() {
for (var i = 0; i < gridSize; i++) {
for (var j = 0; j < gridSize; j++) {
var cell = grid[i][j];
if (!cell.isRevealed && !cell.isBomb) {
return false;
}
}
}
return true;
}
// 绘制格子
function drawCell(cell) {
context.fillStyle = "gray";
context.fillRect(cell.x, cell.y, cell.width, cell.height);
if (cell.isRevealed) {
if (cell.isBomb) {
context.fillStyle = "red";
context.fillRect(cell.x, cell.y, cell.width, cell.height);
} else {
context.fillStyle = "white";
context.fillRect(cell.x, cell.y, cell.width, cell.height);
if (cell.neighborCount > 0) {
context.font = "20px Arial";
context.fillStyle = "black";
context.fillText(cell.neighborCount, cell.x + cell.width / 2, cell.y + cell.height / 2);
}
}
} else {
if (cell.isFlagged) {
context.font = "20px Arial";
context.fillStyle = "black";
context.fillText("F", cell.x + cell.width / 2, cell.y + cell.height / 2);
}
}
}
</script>
</body>
</html>
```
请注意,这只是一个简单的示例代码,您可以根据自己的需求进行修改和扩展。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.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)