js+canvas实现简单扫雷小游戏

2024-10-20 12:14:41

扫雷小游戏作为windows自带的一个小游戏，受到很多人的喜爱，今天我们就来尝试使用h5的canvas结合js来实现这个小游戏。

要写游戏，首先要明确游戏的规则，扫雷游戏是一个用鼠标操作的游戏，通过点击方块，根据方块的数字推算雷的位置，标记出所有的雷，打开所有的方块，即游戏成功，若点错雷的位置或标记雷错误，则游戏失败。

具体的游戏操作如下

1.可以通过鼠标左键打开隐藏的方块，打开后若不是雷，则会向四个方向扩展

2.可以通过鼠标右键点击未打开的方块来标记雷，第二次点击取消标记

3.可以通过鼠标右键点击已打开且有数字的方块来检查当前方块四周的标记是否正确

接下来开始编写代码

首先写好HTML的结构，这里我简单地使用一个canvas标签，其他内容的扩展在之后实现（游戏的规则，游戏的难度设置）

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style>
 #canvas {
  display: block;
  margin: 0 auto;
 }
 </style>
</head>

<body>
 <div id="play">
 <canvas id="canvas"></canvas>
 </div>
 <script src="js/game.js"></script>
</body>

</html>

接下来我们来初始化一些内容。包括canvas画布的宽高，游戏共有几行几列，几个雷，每个格子的大小。

//获取canvas画布
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
canvas.width = 480;
canvas.height = 480;

//定义各属性
let R = 3; //格子圆角半径
let L = 15; //每个格子实际长
let P = 16; //每个格子占长
let row = 30; //行数
let col = 30; //列数
let N = 50; //雷数

为了后面的操作，我要用几个数组来储存一些位置，一个方块是否为雷的数组，该数组用于描绘出整个画面每个方块对应的内容；一个数组用于描述方块状态，即是否打开或者被标记；一个数组用来记载生成的雷的位置；一个数组用来记载标记的位置。

var wholeArr = drawInitialize(row, col, N, R, L, P);
var gameArr = wholeArr[0] //位置数组
var bombArr = wholeArr[1] //雷的位置数组
var statusArr = zoneInitialize(row, col); //状态数组 0为未打开且未标记 1为打开 2为标记
var signArr = []; //标记数组

//画出初始界面
function drawInitialize(row, col, n, R, L, P) {
 let arr = initialize(row, col, n);
 for (let r = 0; r < row; r++) {
 for (let c = 0; c < col; c++) {
  drawRct(r * P, c * P, L, R, 'rgb(102,102,102)', context);//该方法用于绘制整个画面，下面会写出声明
 }
 }
 return arr;
}

//初始化
function initialize(row, col, n) {
 let gameArr = zoneInitialize(row, col); //生成没有标记雷的矩阵
 let bomb = bombProduce(n, gameArr, row, col);
 gameArr = signArrNum(bomb[0], bomb[1], n, row, col);
 return [gameArr, bomb[1]];
}

//界面矩阵初始化
function zoneInitialize(row, col) { //生成row行col列的矩阵
 let cArr = new Array(col);
 let rArr = new Array(row);
 cArr = cArr.fill(0); //将行的每个位置用0填充
 for (let i = 0; i < row; i++)
 rArr[i] = [...cArr];
 return rArr;
}

//随机生成雷
function bombProduce(n, arr, row, col) { //随机生成n个雷
 let count = 0;
 let bombArr = [];

 while (true) {
 if (count === n)
  break;
 let r = Math.floor(Math.random() * row);
 let c = Math.floor(Math.random() * col);
 if (arr[c][r] === 0) {
  arr[c][r] = -1;
  bombArr[count] = strProduce(c, r);
  count++;
 }
 }
 return [arr, bombArr];
}

//标记数字
function signArrNum(gArr, bArr, n, row, col) {
 for (let i = 0; i < n; i++) { //为每个雷的四周的非雷的数字标记加一
 let r = parseInt(analyseStr(bArr[i]).row);
 let c = parseInt(analyseStr(bArr[i]).col);
 if (r > 0 && gArr[c][r - 1] != -1)//判断该位置是否为雷，是则不进行操作
  gArr[c][r - 1]++;
 if (r < row - 1 && gArr[c][r + 1] !== -1)
  gArr[c][r + 1]++;
 if (c > 0 && gArr[c - 1][r] !== -1)
  gArr[c - 1][r]++;
 if (c < col - 1 && gArr[c + 1][r] !== -1)
  gArr[c + 1][r]++;
 if (r > 0 && c > 0 && gArr[c - 1][r - 1] != -1)
  gArr[c - 1][r - 1]++;
 if (r < row - 1 && c < col - 1 && gArr[c + 1][r + 1] != -1)
  gArr[c + 1][r + 1]++;
 if (r > 0 && c < col - 1 && gArr[c + 1][r - 1] != -1)
  gArr[c + 1][r - 1]++;
 if (r < row - 1 && c > 0 && gArr[c - 1][r + 1] != -1)
  gArr[c - 1][r + 1]++;
 }
 return gArr;
}

//生成字符串
function strProduce(r, c) {
 return `row:${c}|col:${r}`;
}

//解析雷数组字符串
function analyseStr(str) {
 str = str.split('|');
 str[0] = str[0].split(':');
 str[1] = str[1].split(':');
 return { row: str[0][1], col: str[1][1] };
}

接下来将绘制的方法写出来，这里我使用红色的方块来代表雷

//画出单个方块
function drawRct(x, y, l, r, color, container = context) {//x,y为绘制的位置，l为方块的边长，r为方块圆角半径，color为方块的填充颜色
 container.beginPath();
 container.moveTo(x + r, y);
 container.lineTo(x + l - r, y);
 container.arcTo(x + l, y, x + l, y + r, r);
 container.lineTo(x + l, y + l - r);
 container.arcTo(x + l, y + l, x + l - r, y + l, r);
 container.lineTo(x + r, y + l);
 container.arcTo(x, y + l, x, y + l - r, r);
 container.lineTo(x, y + r);
 container.arcTo(x, y, x + r, y, r);
 container.fillStyle = color;
 container.closePath();
 container.fill();
 container.stroke();
}

//画出方块上对应的数字
function drawNum(x, y, l, r, alPha, color = 'rgb(0,0,0)', container = context) {//参数含义与上面的方法一样，alPha为要写的数字
 if (alPha === 0)
 alPha = "";
 container.beginPath();
 container.fillStyle = color;
 container.textAlign = 'center';
 container.textBaseline = 'middle';
 container.font = '8Px Adobe Ming Std';
 container.fillText(alPha, x + l / 2, y + l / 2);
 container.closePath();
}

//画出游戏结束界面
function drawEnd(row, col, R, L, P) {
 for (let r = 0; r < row; r++) {
 for (let c = 0; c < col; c++) {//将整个界面绘制出来
  let num = gameArr[r][c];
  let color;
  if (num === -1)
  color = 'rgb(255,0,0)';
  else
  color = 'rgb(255,255,255)';
  drawRct(r * P, c * P, L, R, color, context);
  drawNum(r * P, c * P, L, R, num);
 }
 }
}

接下来写出点击事件的处理，这里对于点击后的向四个方向扩展，我采用了以下图片所示的扩展

如上图片，在点击时在点击位置往四周扩散，之后上下的按上下方向继续扩散，左右的除本方向外还有往上下方向扩散，在遇到数字时停下。

canvas.onclick = function(e) {
 e = e || window.e;
 let x = e.clientX - canvas.offsetLeft;
 let y = e.clientY - canvas.offsetTop; //获取鼠标在canvas画布上的坐标
 let posX = Math.floor(x / P);
 let posY = Math.floor(y / P);//将坐标转化为数组下标
 if (gameArr[posX][posY] === -1 && statusArr[posX][posY] !== 2) { //点到雷
 alert('error');
 drawEnd(row, col, R, L, P);
 } else if (statusArr[posX][posY] === 0) {
 this.style.cursor = "auto";
 statusArr[posX][posY] = 1;//重置状态
 drawRct(posX * P, posY * P, L, R, 'rgb(255,255,255)', context);
 drawNum(posX * P, posY * P, L, R, gameArr[posX][posY]);
 outNum(gameArr, posY, posX, row, col, 'middle');
 }
 gameComplete();//游戏成功，在下面代码定义
}

//右键标记雷，取消标记，检查四周
canvas.oncontextmenu = function(e) {
 e = e || window.e;
 let x = e.clientX - canvas.offsetLeft;
 let y = e.clientY - canvas.offsetTop; //获取鼠标在canvas画布上的坐标
 let posX = Math.floor(x / P);
 let posY = Math.floor(y / P);
 let str = strProduce(posX, posY);
 if (gameArr[posX][posY] > 0 && statusArr[posX][posY] === 1) //检查四周雷数
 checkBomb(posX, posY);
 if (statusArr[posX][posY] === 0) { //标记雷
 drawRct(posX * P, posY * P, L, L / 2, 'rgb(255,0,0)');
 statusArr[posX][posY] = 2;
 signArr[signArr.length] = str;
 } else if (statusArr[posX][posY] === 2) { //取消标记
 drawRct(posX * P, posY * P, L, R, 'rgb(102,102,102)');
 statusArr[posX][posY] = 0;
 signArr = signArr.filter(item => {//使用过滤器方法将当前位置的坐标标记清除
  if (item === str)
  return false;
  return true;
 })
 }
 gameComplete();
 return false; //阻止事件冒泡
}

//自动跳出数字
function outNum(arr, x, y, row, col, status) {//arr为传入的数组，x,y为处理的位置，row,col为游戏的行列，status用于储存扩展的方向
 if (status === 'middle') {
 outNumHandle(arr, x - 1, y, row, col, 'left');
 outNumHandle(arr, x + 1, y, row, col, 'right');
 outNumHandle(arr, x, y - 1, row, col, 'top');
 outNumHandle(arr, x, y + 1, row, col, 'down');
 } else if (status === 'left') {
 outNumHandle(arr, x - 1, y, row, col, 'left');
 outNumHandle(arr, x, y - 1, row, col, 'top');
 outNumHandle(arr, x, y + 1, row, col, 'down');
 } else if (status === 'right') {
 outNumHandle(arr, x + 1, y, row, col, 'right');
 outNumHandle(arr, x, y - 1, row, col, 'top');
 outNumHandle(arr, x, y + 1, row, col, 'down');
 } else if (status === 'top') {
 outNumHandle(arr, x, y - 1, row, col, 'top');
 } else {
 outNumHandle(arr, x, y + 1, row, col, 'down');
 }
}

//跳出数字具体操作
function outNumHandle(arr, x, y, row, col, status) {
 if (x < 0 || x > row - 1 || y < 0 || y > col - 1) //超出边界的情况
 return;
 if (arr[y][x] !== 0) {
 if (arr[y][x] !== -1) {
  drawRct(y * P, x * P, L, R, 'rgb(255,255,255)', context);
  drawNum(y * P, x * P, L, R, arr[y][x]);
  statusArr[y][x] = 1;
 }
 return;
 }
 drawRct(y * P, x * P, L, R, 'rgb(255,255,255)', context);
 drawNum(y * P, x * P, L, R, arr[y][x]);
 statusArr[y][x] = 1;
 outNum(arr, x, y, row, col, status);
}

//检查数字四周的雷的标记并操作
function checkBomb(r, c) {
 //1.检查四周是否有被标记确定的位置
 //2.记下标记的位置数count
 //3.若count为0，则return；若count大于0，检查是否标记正确
 //4.如果标记错误，提示游戏失败，若标记正确但数量不够，则return跳出，若标记正确且数量正确，将其余位置显示出来
 let bombNum = gameArr[r][c];
 let count = 0;
 if (r > 0 && statusArr[r - 1][c] === 2) {
 if (!(bombArr.includes(strProduce(r - 1, c)))) {
  alert('error');
  drawEnd(row, col, R, L, P);
  return;
 }
 count++;
 }
 if (r < row - 1 && statusArr[r + 1][c] === 2) {
 if (!(bombArr.includes(strProduce(r + 1, c)))) {
  alert('error');
  drawEnd(row, col, R, L, P);
  return;
 }
 count++;
 }
 if (c > 0 && statusArr[r][c - 1] === 2) {
 if (!(bombArr.includes(strProduce(r, c - 1)))) {
  alert('error');
  drawEnd(row, col, R, L, P);
  return;
 }
 count++;
 }
 if (c < col - 1 && statusArr[r][c + 1] === 2) {
 if (!(bombArr.includes(strProduce(r, c + 1)))) {
  alert('error');
  drawEnd(row, col, R, L, P);
  return;
 }
 count++;
 }
 if (r > 0 && c > 0 && statusArr[r - 1][c - 1] === 2) {
 if (!(bombArr.includes(strProduce(r - 1, c - 1)))) {
  alert('error');
  drawEnd(row, col, R, L, P);
  return;
 }
 count++;
 }
 if (r < row - 1 && c < col - 1 && statusArr[r + 1][c + 1] === 2) {
 if (!(bombArr.includes(strProduce(r + 1, c + 1)))) {
  alert('error');
  drawEnd(row, col, R, L, P);
  return;
 }
 count++;
 }
 if (r > 0 && c < col - 1 && statusArr[r - 1][c + 1] === 2) {
 if (!(bombArr.includes(strProduce(r - 1, c + 1)))) {
  alert('error');
  drawEnd(row, col, R, L, P);
  return;
 }
 count++;
 }
 if (r < row - 1 && c > 0 && statusArr[r + 1][c - 1] === 2) {
 if (!(bombArr.includes(strProduce(r + 1, c - 1)))) {
  alert('error');
  drawEnd(row, col, R, L, P);
  return;
 }
 count++;
 }

 if (count !== bombNum)
 return;
 else {

 outNotBomb(c, r);
 }
}

//跳出四周非雷的方块
function outNotBomb(c, r) {
 if (r > 0 && statusArr[r - 1][c] === 0) {
 drawRct((r - 1) * P, c * P, L, R, 'rgb(255,255,255)', context);
 drawNum((r - 1) * P, c * P, L, R, gameArr[r - 1][c]);
 statusArr[r - 1][c] = 1;
 }
 if (r < row - 1 && statusArr[r + 1][c] === 0) {
 drawRct((r + 1) * P, c * P, L, R, 'rgb(255,255,255)', context);
 drawNum((r + 1) * P, c * P, L, R, gameArr[r + 1][c]);
 statusArr[r + 1][c] = 1;
 }
 if (c > 0 && statusArr[r][c - 1] === 0) {
 drawRct(r * P, (c - 1) * P, L, R, 'rgb(255,255,255)', context);
 drawNum(r * P, (c - 1) * P, L, R, gameArr[r][c - 1]);
 statusArr[r][c - 1] = 1;
 }
 if (c < col - 1 && statusArr[r][c + 1] === 0) {
 drawRct(r * P, (c + 1) * P, L, R, 'rgb(255,255,255)', context);
 drawNum(r * P, (c + 1) * P, L, R, gameArr[r][c + 1]);
 statusArr[r][c + 1] = 1;
 }
 if (r > 0 && c > 0 && statusArr[r - 1][c - 1] === 0) {
 drawRct((r - 1) * P, (c - 1) * P, L, R, 'rgb(255,255,255)', context);
 drawNum((r - 1) * P, (c - 1) * P, L, R, gameArr[r - 1][c - 1]);
 statusArr[r - 1][c - 1] = 1;
 }
 if (r < row - 1 && c < col - 1 && statusArr[r + 1][c + 1] === 0) {
 drawRct((r + 1) * P, (c + 1) * P, L, R, 'rgb(255,255,255)', context);
 drawNum((r + 1) * P, (c + 1) * P, L, R, gameArr[r + 1][c + 1]);
 statusArr[r + 1][c + 1] = 1;
 }
 if (r > 0 && c < col - 1 && statusArr[r - 1][c + 1] === 0) {
 drawRct((r - 1) * P, (c + 1) * P, L, R, 'rgb(255,255,255)', context);
 drawNum((r - 1) * P, (c + 1) * P, L, R, gameArr[r - 1][c + 1]);
 statusArr[r - 1][c + 1] = 1;
 }
 if (r < row - 1 && c > 0 && statusArr[r + 1][c - 1] === 0) {
 drawRct((r + 1) * P, (c - 1) * P, L, R, 'rgb(255,255,255)', context);
 drawNum((r + 1) * P, (c - 1) * P, L, R, gameArr[r + 1][c - 1]);
 statusArr[r + 1][c - 1] = 1;
 }
}

接着写出找到所有雷的情况，即游戏成功通关

//成功找出所有的雷
function gameComplete() {
 var count = new Set(signArr).size;
 if (count != bombArr.length) //雷的数量不对
 {
 return false;
 }
 for (let i of signArr) { //雷的位置不对
 if (!(bombArr.includes(i))) {
  return false;
 }
 }
 for (let i of statusArr) {
 if (i.includes(0)) {
  return false;
 }
 }
 alert('恭喜你成功了');
 canvas.onclick = null;
 canvas.onmouseover = null;
 canvas.oncontextmenu = null;
}

最后调用方法画出游戏界面，这个调用要放在数组声明之前，因为数组那里也有绘制的方法，这个方法会覆盖绘制方块的画面。

drawRct(0, 0, 800, 0, 'rgb(0,0,0)', context);

一个简单的扫雷游戏就这样实现了（说实话我觉得是简陋不是简单。。。。）

当然这个只是游戏的初步实现，其实这个游戏还可以增加难度设置，用图片来表示雷，在点到雷的时候增加声音等等，当然这些也并不难，如果大家有兴趣的话可以尝试优化这个游戏。

希望这篇博客能对大家有所帮助，也希望大神能指出我的不足。

附上一张丑爆的游戏界面

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

HTML+JavaScript实现扫雷小游戏

本文实例为大家分享了JavaScript实现扫雷小游戏的具体代码,供大家参考,具体内容如下工具:Sublime Text / Dreamweaver /Hbuilder <!doctype html> <html> <head> <meta charset="utf-8"> <title>SaoLei</title> <style type="text/css"> table {
js版扫雷实现代码原理不错

效果图:以下代码复制粘贴到记事本后保存为.html文件,打开后会出现提示,右击允许即可: 寻雷-----by 魅月 var data=new Array( [0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0
JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】

本文实例讲述了JavaScript扫雷游戏.分享给大家供大家参考,具体如下: 翻出年初写的游戏贴上来,扫雷相信大家都玩过,先上图: 源码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.or
使用纯javascript实现经典扫雷游戏

很久以前写的当时都没写注释的刚加上了 (尼玛,好多自己都不认识了 ... ) 不足的地方就是本来想写个游戏排名的统计的,等有空了再加上(好像每次都这么说然后就等好久好久...) 还有就是没有实现:点击第一个格子不能是雷的功能 <style> ul{padding:0;list-style:none;} #mine{overflow:hidden;width:30px;height:30px;border:1px solid #966;} #mine li{float:left;width
js实现扫雷小程序的示例代码

初学javascript,写了一个扫雷程序练练手! 扫雷规则及功能扫雷想必大家都不陌生,就是windows上点击排雷的小游戏,它的主要规则有 1.左键点击显示当前格子是否为雷,如果为雷的话,GameOver啦,如果不是雷的话,这个格子会显示周围八个格子内的雷数量. 2.鼠标右键标记,标记可能的雷,标记了之后取消需要再次右键点击该格子,左键无效果. 3.鼠标中键(滚轮)按下后,快捷扫雷(如果周围雷数和未被标记且未被翻开的格子相等,会将这些格子一并翻开) 主要功能基本完全复刻了windows7扫雷
JavaScript制作windows经典扫雷小游戏

代码其实很简单,这里就不多废话了 <html> <head> <meta http-equiv="Content-Language" content="zh-cn"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>扫雷-JavaScript Mine Sweeper
javascript 扫雷游戏

"); for (var i = 0; i "); for(var j = 0; j "); buffer.append(" "); } buffer.append(" "); var workarea = document.getElementById("workarea"); workarea.innerHTML = buffer.toString(); mine(); // lay mines at the
分享自己用JS做的扫雷小游戏

引用了jQuery,节省了很多鼠标点击上的判断.界面显然都是照搬Windows的扫雷啦,详细的内容注释里都有,我就不啰嗦啦~ 先上截图~ 引用了jQuery,节省了很多鼠标点击上的判断界面显然都是照搬Windows的扫雷啦详细的内容注释里都有,我就不啰嗦啦~ JS部分 var mineArray, //地雷数组 lastNum, //剩余雷数 countNum, //未被揭开的方块数 inGame = 0, //游戏状态,0为结束,1为进行中,2为初始化完毕但未开始 startTime; /
通过javascript实现扫雷游戏代码实例

这篇文章主要介绍了通过javascript实现扫雷游戏代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 html代码: <div id="mine"> <div class="level"> <button type="button">初级</button> <button type="button">中级&l
js+canvas实现简单扫雷小游戏

扫雷小游戏作为windows自带的一个小游戏,受到很多人的喜爱,今天我们就来尝试使用h5的canvas结合js来实现这个小游戏. 要写游戏,首先要明确游戏的规则,扫雷游戏是一个用鼠标操作的游戏,通过点击方块,根据方块的数字推算雷的位置,标记出所有的雷,打开所有的方块,即游戏成功,若点错雷的位置或标记雷错误,则游戏失败. 具体的游戏操作如下 1.可以通过鼠标左键打开隐藏的方块,打开后若不是雷,则会向四个方向扩展 2.可以通过鼠标右键点击未打开的方块来标记雷,第二次点击取消标记 3.可以通过鼠标右键
JS+Canvas实现贪吃蛇小游戏

今天呢,主要和小伙伴们分享一下一个贪吃蛇游戏从构思到实现的过程~因为我不是很喜欢直接PO代码,所以只copy代码的童鞋们请出门左转不谢. 按理说canvas与其应用是老生常谈了,可我在准备阶段却搜索不到有用的资料(不是代码!),所以说呢,只能自力更生 -_- 首先是大致要考虑的东西: 1.要有蛇(没蛇怎么叫贪吃蛇). 2.然后要有地图(蛇是不能上天的). 3.不能水平\垂直掉头(如果想掉头,需要至少变换方位并且至少移动一格才可). 4.食物(不然怎么贪吃). 5.吃了食物要变长(这才是精髓).
C++实现简单扫雷小游戏

本文实例为大家分享了C++实现简单扫雷小游戏的具体代码,供大家参考,具体内容如下头文件Mine_Sweep.h #include <iostream> #include <ctime> #include <cstdlib> #include <algorithm> #include <queue> #include <Windows.h> using namespace std; typedef pair<int, int&g
C语言实现简单扫雷小游戏

本文实例为大家分享了C语言实现扫雷小游戏的具体代码,供大家参考,具体内容如下 #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include <windows.h> #include <time.h> /* 用 C 语言写一个简单的扫雷游戏 */ // 1.写一个游戏菜单 Menu() // 2.开始游戏 // 1.初始化二维数组 Init_Interface() // 2.打印游戏界面 Print_Interfa
java实现简单扫雷小游戏

本文实例为大家分享了java实现扫雷游戏的具体代码,供大家参考,具体内容如下 import java.awt.BorderLayout; import java.awt.Color; import java.awt.Container; import java.awt.GridLayout; import java.awt.Insets; import java.awt.Label; import java.awt.event.ActionEvent; import java.awt.event
C语言代码实现简单扫雷小游戏

用C语言写一个简单的扫雷,供大家参考,具体内容如下 1.所需要的知识 c语言的基本语法,简单的二维数组,一点简单的递归知识. 2.总体思路扫雷游戏主要由3个部分组成,埋雷子,扫雷,判断输赢. 扫雷游戏的主体是两个个字符类型的二维数组.一个是mine[][]它的构成是'0'和'1',其中'0'表示无雷,'1'表示有雷.一个是show[][]它的构成是'*'和'数字'.星号表示未开启的地方,数字表示周围的雷数.这里要注意的是:mine和show的实际大小是11x11,但是展示的效果是 9x9.这样
用C语言实现简单扫雷小游戏

前言今天学习了制作简易扫雷游戏,代码如下提示:以下是本篇文章正文内容,下面案例可供参考一.函数头文件(函数声明) 代码如下(示例): #pragma once #define ROW 9 #define COL 9 #define ROWS ROW+2 #define COLS COL+2 #define EASY_COUNT 10 #include<stdlib.h> #include<time.h> //初始化棋盘 void initboard(char board[RO
C语言简单实现扫雷小游戏

本文实例为大家分享了C语言简单实现扫雷小游戏的具体代码,供大家参考,具体内容如下游戏规则: 以9*9棋盘为例,棋盘上随机分布着10个地雷,玩家在棋盘上进行点击,如果被点击的格子是地雷,则玩家被炸"死",游戏结束:如果被点击的格子上没有地雷,与被点击的格子相邻的格子(被点击格子的上下左右还有斜向,共八个格子)有地雷,则在被点击的格子上显示这些地雷的总数,如果与被点击的格子相邻的八个格子都没有地雷,则棋盘自动展开,直到与展开的格子相邻的格子有地雷才停止.此时最后被展开的格子显示其相邻格
用C语言实现简单版9*9扫雷小游戏

一.扫雷的规则玩家通过点击棋盘上的格子来探雷,如果此处不是雷,则会显示出一个数字代表以此格为中心的3×3的区域的雷数:而如果此处是雷,玩家被炸死,游戏结束.当玩家点击完所有非雷区时,玩家胜利. 二.代码实现前的一些问题 1.棋盘尺寸=数组尺寸? 显然我们会用数组来模拟棋盘.首先我们知道,当玩家点了非雷区时,该区域要反馈附近区域雷数的信息,这就意味着程序需要对以此格为中心的3×3区域的空间进行排查.而这个过程存在一个问题:当程序对以棋盘边角为中心的区域进行搜查时,会出现数组越界的情况. 对于这个

js+canvas实现简单扫雷小游戏

相关推荐

随机推荐