Cocos Creator开发游戏消灭星星——星星生成

概述先来说下要实现的功能 根据一定规则生成关卡 实现消除等逻辑 游戏结束检测 本地缓存游戏进度 准备工作 建好工程，使用编辑器搭建游戏场景。我搭建的场景如下图： 简单说明下： New Sprite是场景中的背景图片 StarRoot是一个空节点，后面创建的星星方块都会加到这个节点上 ActionRoot是一些做动作、动画节点的父节点，像comb特效就在这个节点上 UIRoot，就是用户界面上的根节点，

先来说下要实现的功能

根据一定规则生成关卡 实现消除等逻辑 游戏结束检测 本地缓存游戏进度 准备工作

建好工程，使用编辑器搭建游戏场景。我搭建的场景如下图：

简单说明下：

New Sprite是场景中的背景图片 StarRoot是一个空节点，后面创建的星星方块都会加到这个节点上 ActionRoot是一些做动作、动画节点的父节点，像comb特效就在这个节点上 UIRoot，就是用户界面上的根节点，像游戏的最高分、当前分数、当前第几关等等，都放在这个节点上 ResultRoot是结算界面的根节点。显示灰色是因为没有激活这个节点 SoundCTL也是一个空节点，主要作用是在节点上挂载一个脚本处理游戏的声音 制作星星预制

方法参考官方文档

很简单，根节点下只有一个精灵节点。显示蓝色就表示是一个预制。主要说一下star上的脚本组件starCtr.Js

因为不止一种星星，所以需要改变New Sprite的纹理。星星有下面几个属性：

propertIEs: {    _starType: 0,_gx: 0,_gy: 0,starSprite: cc.Sprite,starSpriteFrames: {        default: [],type: cc.SpriteFrame,},

starSprite对应上图New Sprite的Sprite组件；starSpriteFrames存储了所有星星的纹理；_starType表示星星的类别，它决定了starSprite显示starSpriteFrames中的哪个纹理；_gx、_gy用来存储星星方块在10x10地图中的格子坐标。

initStar (type,gx,gy) {    this._starType = type;    this.starSprite.spriteFrame = this.starSpriteFrames[this._starType];    this.updateGrID(gx,gy);},updateGrID (gx,gy) {    this._gx = gx;    this._gy = gy;},

initStar星星的初始化函数，updateGrID用来更新星星的坐标位置

在预制里还做了一个 *** 作，就是处理用户的点击 *** 作，所以在脚本的start函数里监听触摸。start是组件脚本生命周期的回调函数，会在组件第一次激活前，也就是第一次执行update之前触发。

start () {    this.node.on(cc.Node.EventType.touch_START,function (event) {        //Todo:触摸处理    },this);},

具体的触摸处理后面说。最后看下属性检查器里的脚本组件：

生成关卡数据 生成规则：每个格子随机生成星星。（这里选取一个简单的逻辑规则，自己可以根据实际情况修改星星生成的逻辑） 用一个二维数组存储10×10的地图数据

下面介绍两个对象，分别创建两个脚本gamedata.Js、Utils.Js
gamedata处理游戏的数据，像游戏的得分、当前第几关、地图数据等等都存储在里面。

// gamedata.Jsvar level = 0; //记录当前关卡var targetscore = 0; //当前关卡目标分数var currscore = 0; //当前得分var bestscore = 0; //历史最高得分var starMatrix = null; //地图数据，二维数组var starSprite = []; //一维数组，存储星星的Nodemodule.exports = {    level: level,targetscore: targetscore,currscore: currscore,bestscore: bestscore,starMatrix: starMatrix,starSprite: starSprite,};

Utils主要是处理一些公用的逻辑，像关卡生成规则的逻辑就放这里了。

// Utils.Jsvar Config = require("psconfig");var randomcolorByArray = function (array) {    var i = Math.floor(Math.random() * array.length);    return array[i];}//随机生成星星关卡逻辑function initMatrixDataPortraitRandom () {    var matrixData = new Array(Config.matrixRow);    for(var row = 0; row < Config.matrixRow; row++) {        matrixData[row] = new Array(Config.matrixCol);        for(var col = 0; col < Config.matrixCol; coL++) {            matrixData[row][col] = randomcolorByArray(Config.totalcolors);        }    }    return matrixData;};module.exports = {    initMatrixDataPortraitRandom: initMatrixDataPortraitRandom,};

脚本Utils.Js加载了另一个脚本psconfig.Js，它主要存放游戏的一些配置，代码如下：

//psconfig.Jsvar cellSize = 73; //星星纹理的边长var matrixRow = 10; //地图的行数（高）var matrixCol = 10; //地图的列数（宽）var totalcolors = [0,1,2,3,4]; //表示五种星星module.exports = {    cellSize: cellSize,matrixRow: matrixRow,matrixCol: matrixCol,totalcolors: totalcolors,};

到这里，关卡数据已经生成，下面就是根据生成的数据绘制星星地图。

绘制星星

一开始提到，创建的所有星星都会放在StarRoot的节点上。场景中StarRoot是一个空节点，有一个脚本组件matrixCtr，看下图：

单个格子边长73，格子间有2个像素的缝隙，所以StarRoot是边长748的正方形，把它的锚点设置在左下角，为了方便格子坐标和像素位置坐标之间的转换。

在Utils脚本上添加两个函数用于坐标之间的转换。

//Utils.Jsfunction grID2Pos (gx,gy) {    var px = Config.cellSize * 0.5 + (Config.cellSize + 2) * gy;    var py = Config.cellSize * 0.5 + (Config.cellSize + 2) * gx;    return cc.v2(px,py);};function pos2GrID (px,py) {    var gx = (py - Config.cellSize * 0.5) / (Config.cellSize + 2);    var gy = (px - Config.cellSize * 0.5) / (Config.cellSize + 2);    return cc.v2(Math.round(gx),Math.round(gy));};

最后别忘了导出，在module.exports中添加变量：

module.exports = {    grID2Pos: grID2Pos,pos2GrID: pos2GrID,initMatrixDataPortraitRandom: initMatrixDataPortraitRandom,};

下面说一下脚本matrixCtr.Js
上图中可以看到，脚本中有两个预制类型的属性star、particle，其中star就是开始制作的星星预制。particle主要是播放粒子，是星星消除时的特效。

propertIEs: {        starPrefab: cc.Prefab,starParticle: cc.Prefab,_starPool: null,uiCtr: cc.Node,actCtr: cc.Node,combCtr: cc.Node,soundCtr: cc.Node,

因为游戏中要频繁创建和销毁星星，而这些 *** 作是非常耗费性能的，所以这里使用了对象池。关于它的介绍和使用方法参考官方文档。

//matrixCtr.Jsvar Utils = require("Utils");var Config = require("psconfig");var GameData = require("gamedata");onLoad () {    //初始化对象池    this._starPool = new cc.NodePool();    for(var i = 0; i < Config.matrixCol*Config.matrixRow; ++i) {        var star = cc.instantiate(this.starPrefab);        this._starPool.put(star);    }}onDestroy () {    this._starPool.clear();},createStar (type,gy) {    var star = null;    if (this._starPool.size() > 0) {        star = this._starPool.get();    }    else {        star = cc.instantiate(this.starPrefab);    }    star.setposition(Utils.grID2Pos(gx,gy));    this.node.addChild(star);    var starCtr = star.getComponent("starCtr");    starCtr.initStar(type,gy);    return star},

注意，这里省略了cc.Class等一些通用代码，有了createStar函数，我们就可以根据前面生成的数据来绘制星星了。

// matrixCtr.JsinitMatrix () {    for(var row = 0; row < GameData.starMatrix.length; row++) {        var cols = GameData.starMatrix[row];        for(var col = 0; col < cols.length; coL++) {            var type = cols[col];            var index = Utils.indexValue(row,col);            if (type >= 0) {                var node = this.createStar(type,row,col);                GameData.starSprite[index] = node;            }            else {                 GameData.starSprite[index] = null;            }        }    }},

initMatrix函数中使用了Utils脚本中的indexValue函数。这是因为存储星星数据的是二维数组，存储星星Node的是一维数组，它是两者索引的转换。当然，存储星星Node也可以使用二维数组。

//Utils.Jsfunction indexValue (row,col) {    return row * Config.matrixCol + col;};function resolveIndex (index) {    var col = index % Config.matrixCol;    var row = (index - col) / Config.matrixCol;    return cc.v2(row,col);};

别忘了在module.exports中导出变量，这里就省略了，最后上一张效果图。

写在最后 欢迎订阅，获取更多内容，掌握最新动态

如有疑问，欢迎添加微信讨论（验证：鸡毛信）

几个约定 不提供源码下载 文章会至少包含90%的源码，对60%的源码有说明 如转载文章，请务必注明 总结

以上是内存溢出为你收集整理的Cocos Creator开发游戏消灭星星——星星生成全部内容，希望文章能够帮你解决Cocos Creator开发游戏消灭星星——星星生成所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。