Cocos Creator下JavaScript实现动物同化,附代码

游戏玩法

游戏目标是将游戏区域的动物全部同化成同一种动物。游戏从左上角开始,从右边点击需要变成的目标动物头像,如果被同化动物周围包含了点击的动物,则所有被同化动物都变成点击选中的动物,完成一次同化,然后逐渐扩大左上角的同化区域,直到所有动物变成同一种。

 

游戏效果

游戏主要有两个界面,游戏开始界面和游戏中界面。

以下是游戏开始时界面:

 

以下是进行游戏时显示的动态效果效果:

 

实现逻辑介绍:

1. 关卡初始化

每关游戏一开始,从14中动物中,选择6总不同的动物,事先确定好总共14行14列方格放置动物,随机从6种动物中选择一种放置到游戏方格面板中。(具体逻辑,参考游戏源码)

 

2. 是否被同化计算

从被同化中的动物中,检测周边是否符合被同化的规则,如果符合条件,则被同化,在继续检测新被同化动物周围的方格,依次类推&#x

CocosCreator实现动物同化AnimalGame.zip let ANI_ROW = 14; //小动物行数/列数 let ANI_TYPE = 14; //小动物种类数 let MAX_COUNT = 36; //最大次数 let __DESIGN_RESOLUTION_WIDTH = 1280; let __DESIGN_RESOLUTION_HEIGHT = 720; let lineDir = { NONE : -1, //空 TOP : 0, //上 BOTTOM : 1, //下 LEFT : 2, //左 RIGHT : 3, //右 } //音效名称 let sound = { BG : "sound/pveBg", //BG BUTTON : "sound/click", //按钮点击音效 COMBO1 : "sound/combo1", //1 COMBO2 : "sound/combo2", //2 COMBO3 : "sound/combo3", //3 COMBO4 : "sound/combo4", //4 GAMEOVER : "sound/over", //结束 GAMEPASS : "sound/pass", //过关 READYGO : "sound/readyGo", //准备 } cc.Class({ extends: cc.Component, properties: { //主界面 menuBg : cc.Node, startBtn : cc.Node, //游戏界面 gameBg : cc.Node, levelText : cc.Label, scoreText : cc.Label, bestScoreText : cc.Label, restTimesText : cc.Label, aniParentLayer : cc.Node, aniBtn : { default: [], type: cc.Button, }, tiziSp : cc.Node, refreshBtn : cc.Node, readySp : cc.Node, goSp : cc.Node, tipText : cc.Node, //失败层 failLayer : cc.Node, //过关层 winLayer : cc.Node, awardText : cc.Label, //结算层 endLayer : cc.Node, endScoreText : cc.Label, againBtn : cc.Node, exitBtn : cc.Node, //小动物预制体 aniPrefab : cc.Prefab, btnImgAtlas : cc.SpriteAtlas, aniImgAtlas : cc.SpriteAtlas, }, onLoad: function () { //初始化界面数据 this.levelText.string = "1"; this.scoreText.string = "0"; let aniBestScore = parseInt(cc.sys.localStorage.getItem("aniBestScore")) || 0; this.bestScoreText.string = aniBestScore; this.restTimesText.string = "35"; this.fitNode(); }, //元素适配 fitNode : function(){ let canvasSize = cc.view.getCanvasSize(); let canvasScale = canvasSize.width / canvasSize.height; // 高的比例 let bMoreHeight = canvasScale < (__DESIGN_RESOLUTION_WIDTH / __DESIGN_RESOLUTION_HEIGHT); //全屏显示 let allShow = (obj)=>{ if (bMoreHeight) { obj.width = __DESIGN_RESOLUTION_WIDTH; obj.height = __DESIGN_RESOLUTION_WIDTH / canvasScale; } else { obj.width = __DESIGN_RESOLUTION_HEIGHT * canvasScale; obj.height = __DESIGN_RESOLUTION_HEIGHT; } }; //左对齐 let leftAlign = (obj)=>{ if (!bMoreHeight) { obj.x = obj.position.x - (__DESIGN_RESOLUTION_HEIGHT * canvasScale - __DESIGN_RESOLUTION_WIDTH) / 2; } else { obj.x = obj.position.x; } }; //右对齐 let rightAlign = (obj)=>{ if (!bMoreHeight) { obj.x = obj.position.x + (__DESIGN_RESOLUTION_HEIGHT * canvasScale - __DESIGN_RESOLUTION_WIDTH) / 2; } else { obj.x = obj.position.x; } }; //上对齐 let topAlign = (obj)=>{ if (bMoreHeight) { obj.y = obj.position.y + (__DESIGN_RESOLUTION_WIDTH / canvasScale - __DESIGN_RESOLUTION_HEIGHT) / 2; } else { obj.y = obj.position.y; } }; //下对齐 let bottomAlign = (obj)=>{ if (bMoreHeight) { obj.y = obj.position.y - (__DESIGN_RESOLUTION_WIDTH / canvasScale - __DESIGN_RESOLUTION_HEIGHT) / 2; } else { obj.y = obj.position.y; } }; //适配高度 let heightScale = (obj)=>{ let canvasSize = cc.view.getCanvasSize(); let scale = canvasSize.height / __DESIGN_RESOLUTION_HEIGHT; obj.height = scale * 700; obj.width = scale * 700; }; //全屏显示组件 allShow(this.menuBg); allShow(this.gameBg); allShow(this.endLayer); //左对齐组件 leftAlign(this.refreshBtn); //右对齐组件 rightAlign(this.tiziSp); rightAlign(this.tipText); //上对齐组件 topAlign(this.refreshBtn); topAlign(this.tiziSp); //下对齐组件 bottomAlign(this.startBtn); bottomAlign(this.againBtn); bottomAlign(this.exitBtn); bottomAlign(this.tipText); heightScale(this.aniParentLayer); }, //创建游戏界面 showGameLayer : function(){ //this.playSound(sound.BG, true); this.gameBg.active = true; this.readyGoAni(); //随机显示一个背景图 this.changeBgSp(); this.resetGame(); }, //readyGo动画 readyGoAni : function(){ this.playSound(sound.READYGO, false); this.readySp.active = true; this.readySp.opacity = 0; this.readySp.runAction(cc.sequence(cc.fadeIn
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值