Cocos扫雷游戏核心算法思想

一、 扫雷游戏实现核心思路解析

数据和视图尽量分离。采用面向对象的实现设计数据模块。格子作为一类对象,雷场作为一类对象,雷场由格子构成。

二、 扫雷游戏核心数据模块

1.  Cell.js单元格类

// 单个单元格,用于保存数据

// x,y,坐标,或者行和列,

// info显示文本,空表示什么都没有,周边也没有地雷// *表示此处是一颗地雷,数字表示其周边有几颗地雷function Cell(x, y, info){

this.x = x;

this.y = y;

this.info = info;

};

module.exports = Cell;

2.  MineField.js雷场类

// 雷场(行数,列数,地雷数)

function MineField(rowNum, colNum, mineNum){

this.rowNum = rowNum;

this.colNum = colNum;

this.mineNum = mineNum;

// 调用【1】画格子

this.init();

// 调用【2】藏地雷

this.hideMine();

// 调用【3】留暗号

this.markNumber();

};

module.exports = MineField;

【1】画格子

雷场由Cell的对象构成的数组组成,实质就是给雷场的cells数组赋值。

// 【1】利用原型扩展方法:初始化雷场的所有格子数据

MineField.prototype.init = function(){

let cellsNum = this.rowNum * this.colNum;

this.cells = new Array(cellsNum);

for(let i=0; i<this.rowNum; i++){

for(let j=0; j<this.colNum; j++){

let index = this.getIndexByXY(i,j);//this.colNum * i + j;

this.cells[index] = new Cell(i, j, "");

        }

    }

};

补充提炼通过坐标获取格子索引的方法,以供后续其它地方用:

// 【1-1】通过坐标获取单元格的所处格子的索引

MineField.prototype.getIndexByXY = function(x, y){

return x * this.colNum + y;

}

// 通过单元格对象获取单元格所处格子的索引

MineField.prototype.getIndexByCell = function(cell){

return this.getIndexByXY(cell.x, cell.y);

}

在此文件头部引入Cell类:

var Cell = require("Cell");

【2】藏地雷

实质就是修改雷场的cells数组中的随机一些索引的cell的info属性值。

// 【2】藏地雷:将地雷数据设置到this.cells中的Cell的info中去

MineField.prototype.hideMine = function(){

// 随机无重复元素的数组,且范围限定在[0,this.rowNum*this.colNum);

let end = this.colNum * this.rowNum;

// 记录所有地雷所在的cells的索引

this.mineIndexs = ArrayUtils.randChoiseFromTo(0, end, this.mineNum);

    console.log("地雷位置序号:",this.mineIndexs);

// 找到相应格子的位置,设置其cell对象的info属性为*,表示地雷

this.mineCells = new Array(this.mineNum);

for(let i=0,len=this.mineIndexs.length; i<len; i++){

let index = this.mineIndexs[i];

let cell = this.cells[index];

        cell.info = "*";

// 保存所有地雷所在的单元格

this.mineCells[i] = cell;

    }

};

方法randChoiseFromTo参考四、ArrayUtils.js数组工具类。

在此文件头部引入数组工具类:

var ArrayUtils = require("ArrayUtils");

【3】留暗号

实质就是在地雷周边8个格子中标上数字,数值为此单元格周边8个单元格中雷的数量。如下图所示:

// 【3】留暗号:标记地雷周围所有单元格的数字,也就是设置其info属性

MineField.prototype.markNumber = function(){

// 遍历所有地雷单元格,每次找到其周边非雷格子,给其数字加1

console.log("this.mineCells:",this.mineCells)

for(let i=0,len=this.mineCells.length; i<len; i++){

// 【3-1】拿到地雷单元格 周围的所有的非雷单元格(应该是数字的单元格)

let numberCells = this.getNumberCellsAround(this.mineCells[i]);

// 【3-2】更新地雷周围所有非雷(数字)单元格的数字标记

this.updateNumberMarks(numberCells);

    }

};

【3-1】获取某颗地雷周围所有单元格

如下图所示,假如要获取(0,0)周围8个单元格,则偏移量就是其周边8个单元格的坐标:

同时,偏移后,我们还要判断这个格子是否超出雷场。即便宜后x、y值不能小于0,且不能大于行或列的最大值。

偏移量offset和判断是否超出雷场区域的方法如下:

// 【3-1-1】周围8个坐标相对于中心坐标(0,0)的偏移量

var offset = [{x:-1,y:-1},{x:0,y:-1},{x:1,y:-1},

    {x:-1,y:0},{x:1,y:0},

    {x:-1,y:1},{x:0,y:1},{x:1,y:1},

];

// 【3-1-2】判断坐标为x,y的单元格cell是否超出了区域

MineField.prototype.outOfFiled = function(x, y){

return x<0 || x>=this.rowNum || y<0 || y>=this.colNum;

};

如果地雷周围的单元格是数字,则我们不需要计算数值,应排除。

// 【3-1】拿到cell周围的所有的非雷单元格(应该是数字的单元格)

MineField.prototype.getNumberCellsAround = function(cell){

let result = [];

for(let i=0,len=offset.length; i<len; i++){

// 【3-1-1】得到相对于cell偏移后的x、y坐标

let x = cell.x + offset[i].x;

let y = cell.y + offset[i].y

// 【3-1-2】判断坐标为x,y的单元格cell是否超出了区域

if(this.outOfFiled(x, y)){

continue;

        }

// 如果是地雷继续下一次循环

let index = this.getIndexByXY(x,y); //x*this.colNum + y;

let cellSide = this.cells[index];

if (cellSide.info === "*"){

continue;

        }

// 如果没有超出雷场区域,且为非雷单元格,则添加到数组中

result.push(new Cell(x, y, ""));

    }

return result;

};

【3-2】更新所有地雷周围所有非雷(数字)单元格的数字标记

// 【3-2】更新地雷周围所有非雷(数字)单元格的数字标记

MineField.prototype.updateNumberMarks = function(numberCells){

/**

    * 设置逻辑:①如果原来info属性为*,不需要设置,【已经排除了】

    *      ②如果原来info属性为"",证明是第一次标记,标记info为1

    *      ③如果原来属性不为*,也不为空,则在原有值基础上加1

    */

for(let i=0,len=numberCells.length; i<len; i++){

let index = this.getIndexByCell(numberCells[i]);

if(this.cells[index].info === ""){

this.cells[index].info = 1;

        }else{

let num = parseInt(this.cells[index].info);

this.cells[index].info = ++num;

        }

    }

};

三、 ArrayUtils.js数组工具类(直接使用)

// 数组工具类

var ArrayUtils = function(){};

// 【1】初始化得到有序元素数组:从[start,end)的自然数序列

ArrayUtils.initOrderArray = function(start, end){

let sortArray = [];

for(let i= start; i<end; i++){

        sortArray.push(i);

    }

return sortArray;

};

// 【2】从数组arr中随机抽取count个元素,返回数组

ArrayUtils.randChoiseFromArr = function(arr, count){

let result = arr;

// 随机排序,打乱顺序

result.sort(function(){

return 0.5 - Math.random();

    });

// 返回打乱顺序后的数组中的前count个元素

return result.slice(0,count);

};

// 【3】从从start到end中的连续整数中随机抽取count个数字

ArrayUtils.randChoiseFromTo = function(start, end, count){

let arr = this.initOrderArray(start,end);

return this.randChoiseFromArr(arr, count);

};

// 【2】-【方式二】从数组arr中随机抽取count个元素,返回数组

ArrayUtils.getRandomArrayElements = function(arr, count) {

// 从0位置取到结束位置存入shffled数组

let shuffled = arr.slice(0);

let i = arr.length;

let min = i - count;

let temp = 0;

let index = 0;

// 随机一个位置的元素和最后一个元素交换

    // 随机一个位置元素和倒数第二个元素交换

    // 假设i=8,count=3,则min=5,

    // 循环体中[i]=7,6,5,也就是说最后三个元素要从数组中随机取

    // 循环结束后,从min=5的位置取到结束,即取3个元素。

while(i-- > min) {

        index = Math.floor((i + 1) * Math.random());

        temp = shuffled[index];

        shuffled[index] = shuffled[i];

        shuffled[i] = temp;

    }

return shuffled.slice(min);

};

module.exports = ArrayUtils;

四、 数据校验测试

1.  Game_mgr.js挂载到Canvas节点上

var MineField = require("MineField");cc.Class({

extends: cc.Component,

    properties: {

        row : 9,

        col : 9,

        mineNum : 10,

    },

    onLoad () {

// 横竖9个单元格,共10颗雷

this.mineField = new MineField(this.row, this.col, this.mineNum);        console.log(this.mineField);    },

});

挂载到Canvas节点上,运行测试结果如下:

3.  优化测试-验证数据正确与否

发现显示结果不便于核实数据是否正确,我们优化下,在MineField中添加printResult方法:

// 【4】提供打印测试的方法,便于观察数据是否正确

MineField.prototype.printResult = function(){

for(let i=0; i<this.rowNum; i++){

let line = "| ";

for(let j=0; j<this.colNum; j++){

let cell = this.cells[i*this.colNum + j];

            line = line.concat(cell.info + " | ");

        }

        console.log(line);

    }

};

为了打印时能够上下对齐,我们将MineField.js代码中原有""(空字符串)替换成" "(空格)。

然后,将Game_mgr.js中的代码做如下调整:

//console.log(this.mineField);

this.mineField.printResult();

运行,浏览器console窗口如下:正确!

五、 数据与视图绑定

新建一个空节点MineField作为雷场,将res中的block拖到MineField内,作为地砖,在block节点内新建空节点around_bombs,在此节点上添加Label组件,用于显示此地砖的信息info。之后将block做成预制体,便于动态生成雷场所有地砖。

动态生成的过程中,将每个地砖跟MineField的cells数组中的元素绑定。

在Game_mgr.js的properties中添加属性,同时通过编辑器绑定属性值:

// 地砖预制体、和根节点

block_prefab : {type:cc.Prefab, default:null,},

block_root : {type:cc.Node, default:null,},

在Game_mgr.js的onLoad方法中添加如下代码:

// 初始化游戏界面

this.showMineField();

在Game_mgr.js中增加showMineField实现:

// 显示雷场格子

showMineField(){

// 获取地砖预制体的宽度

var block_width = this.block_prefab.data.width;

// 计算第一个格子相对于中心锚点的偏移量

var x_offset = - block_width * this.col/2;

var y_offset = block_width * this.row/2;

// block的锚点也在中心,而不是左下角,故初始偏移量要往右上角移动

x_offset += block_width/2;

    y_offset += block_width*2;      // 稍微往上移点

for(var i=0; i<this.row; i++){

for(var j=0; j<this.col; j++){

var block = cc.instantiate(this.block_prefab);

// 【*】将每个地砖跟MineField的cells数组中的元素绑定

var index = this.mineField.getIndexByXY(i,j);

            block.cell = this.mineField.cells[index];

this.block_root.addChild(block);

// 注意:i是行,j是列,当然行列数相等是不会有影响,

            // 【*】行列不等时会影响后续边界判断逻辑

  block.setPosition(j*block_width+x_offset, y_offset-i*block_width);

            console.log("block[",i,j,"]=",block.cell.toString());

        }

    }

},

在Cell.js中增加toString方法显示对象信息:

Cell.prototype.toString = function () {

  return "{ x : " + this.x + ", y : " + this.y + ", info : " + this.info + " }";

}

编译运行,结果如下:

将信息显示到地砖上:

block.cell = this.mineField.cells[index];

// 显示地砖内部信息

this.showBlockInnerInfo(block);

信息显示到地砖上的实现方法(便于后续触摸调用):

// 显示地砖内部信息

showBlockInnerInfo(block){

    block.getChildByName("around_bombs").getComponent(cc.Label).string = block.cell.info;

},

编译运行结果如下:

仔细思考,发现刚才Game_mgr.js其实就是控制MineField这个节点的,故我们将其修改为MineField_Ctrl.js。将Canvas上的用户自定义组件remove,在MineField节点上添加MineField_Ctrl组件,将其中block_root属性去掉,将代码中this.block_root替换为this.node。
给大家推荐个学习交流群 点击链接即可加入群链接

推荐阅读更多精彩内容