微信小程序游戏类demo：经典扫雷，绘制一张 10*10 的地图

柿霖不是林

undefined不会玩扫雷 作者：jixiaod 微信小程序这几天很火，9号正式发布，今天19号过了10天，到现在略有降温的趋势。个大厂商对微信小程序的态度很不看好，最激进的要数[罗辑思维]，直接下架了自己的[得到APP]。滴滴、京东等APP也只保留了最精简的功能，某些担心过于完善的功能会抢夺APP本身的用户。不过这也印证了小程序的初衷，小而精、用完即走。（并不否认腾讯微信平台确实流氓的事实） PS：墨迹天气也开发了微信小程序版本，并且在1月9号第一时间发布，欢迎使用。 作为技术人员，怎能不亲手试试小程序开发呢？扫雷 Minesweeper 实现思路： 如果不了解扫雷的游戏规则，请自行 Google 绘制一张 10*10 的地图，并且标注地雷和非地雷，并且需要用数字表示每个点周围地雷的数量 用 mineMap[x][y] 表示一个点位 mineMap[x][y] < 0 (代码中 == -1) 初始状态 0 < mineMap[x][y] < 9 该点周围地雷的数量 mineMap[x][y] == 9 表示该点是地雷 mineMap[x][y] > 9 （代码中 == 10）表示该点插旗 如何跑起来？ 下载&安装微信小程序开发工具 配置 wechat-app-minesweeper 代码目录到开发工具即可 玩法 需要注意的是，由于没有鼠标右键标记Flag，简单做了 Flag 切换，开启后，方可标记Flag 最初的想法是通过 tap 和 longtap 来区分扫雷和Flag，但是开发工具不能区分这俩个事件，只能作罢 [HTML] 纯文本查看 复制代码 //index.js //获取应用实例 var app = getApp() Page({ data: { mineMap: {}, timesGo: 0, minesLeft: 0 }, mineMap: {}, mineMapMapping: {}, rowCount: 10, colCount: 10, mineCount: 10, minMineCount: 10, maxMineCount: 20, minesLeft: 0, timesGo: 0, timeInterval: null, flagOn: false, flags: 0, endOfTheGame: false, safeMinesGo: 0, onLoad: function() { this.setData({ minesLeft: 0, timesGo: 0 }); this.drawMineField(); }, setGame: function() { this.drawMineField(); this.createMinesMap(); this.setMinesLeft(); this.timeGoReset(); this.timeGoClock(); this.endOfTheGame = false; this.safeMinesGo = 0; }, setMinesLeft: function() { this.minesLeft = this.mineCount; this.setData({minesLeft: this.minesLeft}); }, timeGoClock: function() { var self = this; this.timeInterval = setInterval(function () { // console.log(self.data.timesGo); self.timesGo = self.timesGo + 1; self.setData({timesGo: self.timesGo}); }, 1000); }, timeGoStop: function() { clearInterval(this.timeInterval); }, timeGoReset: function() { clearInterval(this.timeInterval); this.timesGo = 0; this.setData({timesGo: this.timesGo}); }, createMinesMap: function() { var tmpMineMap = {}; // initalize mine map with 0. for (var row = 0; row < this.rowCount; row++) { tmpMineMap[row] = []; for (var col = 0; col < this.colCount; col++) { tmpMineMap[row][col] = 0; } } //console.log(tmpMineMap); // laying mines with 9 this.mineCount = this.rangeRandom(this.minMineCount, this.maxMineCount); var tmpCount = this.mineCount; //console.log("Mine count: ", tmpCount); while (tmpCount > 0) { var row = this.rangeRandom(0, this.rowCount - 1); var col = this.rangeRandom(0, this.colCount - 1); if (tmpMineMap[row][col] != 9) { tmpMineMap[row][col] = 9; tmpCount--; } } // calculate numbers around mines. for (var row = 0; row < this.rowCount; row++) { for (var col = 0; col < this.colCount; col++) { var startRow = row - 1; var startCol = col - 1; //console.log("check====== r" +startRow +"c"+startCol ); for (var r = row-1; r < row+2; r++) { for (var c = col-1; c < col+2; c++) { //console.log("go: r"+r+":c"+c); if (c >= 0 && c < this.colCount && r >= 0 && r < this.rowCount && !(r === row && c === col) && tmpMineMap[r][c] == 9 && tmpMineMap[row][col] != 9) { tmpMineMap[row][col]++; } } } } } this.mineMapMapping = tmpMineMap; }, drawMineField: function() { var tmpMineMap = {}; for (var row = 0; row < this.rowCount; row++) { tmpMineMap[row] = []; for (var col = 0; col < this.colCount; col++) { tmpMineMap[row][col] = -1; } } this.mineMap = tmpMineMap; //console.log(this.mineMap); this.setData({ mineMap: this.mineMap }) }, demining: function(event) { if (JSON.stringify(this.mineMapMapping) == "{}") return; var x = parseInt(event.target.dataset.x); var y = parseInt(event.target.dataset.y); var value = parseInt(event.target.dataset.value); //console.log("value:" + value +" x:"+x +" y:"+y); //flag this field as mine. if (this.flagOn) { this.flag(x, y, value); return; } // if field has been opened, return. if (value > 0) return; var valueMapping = this.mineMapMapping[x][y]; //console.log(this.mineMapMapping); //console.log(valueMapping); if (valueMapping < 9) { this.mineMap[x][y] = valueMapping; this.setData({mineMap: this.mineMap}); this.safeMinesGo++; console.log("Safe mine go: " + this.safeMinesGo); if ((this.safeMinesGo + this.mineCount) == (this.rowCount * this.colCount)) { this.success(); } } // When digg the mine. if (valueMapping == 9) { this.failed(); } // Open the fields with 0 mines arround. if (valueMapping == 0) { this.openZeroArround(x, y); this.setData({mineMap:this.mineMap}); } }, success: function() { wx.showToast({ title: 'GOOD!', duration: 3000 }) this.timeGoStop(); this.endOfTheGame = true; }, failed: function() { wx.showToast({ title: 'SORRY!', duration: 3000 }) this.showAll(); this.timeGoStop(); this.endOfTheGame = true; }, // Open the fields arround 0 field recursively. openZeroArround: function(row, col) { //console.log("click" + row + " " + col) for (var r = (row-1); r < (row+2); r++) { for (var c = (col-1); c < (col+2); c++) { //console.log("go: r"+r+":c"+c); if (r >= 0 && r < this.rowCount && c >= 0 && c < this.colCount && !(r === row && c === col) && this.mineMap[r][c] < 0) { this.mineMap[r][c] = this.mineMapMapping[r][c]; this.safeMinesGo++; if (this.mineMapMapping[r][c] == 0) { this.openZeroArround(r, c); } } } } console.log("Safe mine go: " + this.safeMinesGo); if ((this.safeMinesGo + this.mineCount) == (this.rowCount * this.colCount)) { this.success(); } }, flagSwitch: function(e) { if (e.detail.value) { this.flagOn = true; } else { this.flagOn = false; } }, flag: function(x, y, value) { if (value > 0 && value < 10) return; // if flaged already, set the original state. if (value == 10) { this.pullUpFlag(x, y); return; } if (this.minesLeft <= 0) return; this.minesLeft = this.minesLeft - 1; this.mineMap[x][y] = 10; this.setData({mineMap: this.mineMap, minesLeft: this.minesLeft}); }, pullUpFlag: function(x, y) { if (this.minesLeft < this.mineCount) { this.minesLeft = this.minesLeft + 1; } this.mineMap[x][y] = -1; this.setData({mineMap: this.mineMap, minesLeft: this.minesLeft}); }, rangeRandom: function(x, y) { var z = y - x + 1; return Math.floor(Math.random() * z + x); }, showAll: function() { this.mineMap = this.mineMapMapping; this.setData({mineMap: this.mineMap}); } }); 游客，如果您要查看本帖隐藏内容请回复

正需要，支持楼主大人了！

谢谢楼主的分享

十分感谢楼主的分享，课程作业很需要参照。

参考一下