学习完美方块小游戏

通过学习完美方块小游戏，了解缓动系统（cc.tween）的简单运用
【游戏效果图】

【游戏玩法】：玩家通过长按屏幕，使方块放大到一定的大小后下落，如果被基座接住算是过关，掉落或者被墙体接住算是不过关。

首先，搭建好场景与布置好节点，需要注意一下，基座与墙体的左右两个方块锚点改成如下图：

在game脚本中编写游戏逻辑：

绑定相应的节点、绑定touchstart、touchend事件、初始化、随机设置背景颜色

properties: {blockNode: cc.Node,baseArea: [cc.Node],wallArea: [cc.Node],scoreLabel: cc.Label
},onLoad () {this.node.on('touchstart', this.grow, this);this.node.on('touchend', this.stop, this);this.score = 0; // 得分this.resetBgColor(); // 随机背景颜色this.init(); // 初始化
},

基座、墙体、方块初始化

// 初始化
init() {this.gameState = 'idle'; // 状态机this.resetBaseAndWall(); // 设置基座与墙体this.resetBlock(); // 设置block
},// 设置基座与墙体
resetBaseAndWall() {let baseGap = 100 + Math.random() * 100;let wallGap = baseGap + 30 + Math.random() * 80;this.placeBaseAndWall(this.baseArea[0], -baseGap / 2);this.placeBaseAndWall(this.baseArea[1], baseGap / 2);this.placeBaseAndWall(this.wallArea[0], -wallGap / 2);this.placeBaseAndWall(this.wallArea[1], wallGap / 2);
},// 放置基座与墙体
placeBaseAndWall(node, desX) {cc.tween(node).to(0.5, {position: cc.v2(desX, node.y)}, {easing: 'quintIn'}).start()
},// 设置block
resetBlock() {cc.tween(this.blockNode).to(0.5, {position: cc.v2(0, 400), scale: 1, rotation: -45}).start()
},

随机设置背景颜色

// 更新背景色
resetBgColor() {let colors = ['#FF9999', '#FFCC99', '#66CCCC', '#FF9900', '#588C7E']this.node.color = cc.Color.BLACK.fromHEX(colors[parseInt(Math.random() * colors.length)])
}

点击开始事件（touchstart）

grow() {if (this.gameState != 'idle') return; // 状态机this.gameState = 'grow'// 放大blockthis.growAction = cc.tween(this.blockNode).to(1, {scale: 4}).start()
},

点击结束事件（touchend）

stop() {if (this.gameState != 'grow') return; // 状态机this.gameState = 'rota'this.growAction.stop(); // 停止放大block// 调整block角度cc.tween(this.blockNode).to(0.15, {rotation: 0}).call(res => {// 回调if (this.blockNode.width * this.blockNode.scale <= this.baseArea[1].x - this.baseArea[0].x) {console.log('掉落了')cc.tween(this.blockNode).to(0.7, {position: cc.v2(0, -cc.winSize.height - this.blockNode.height * this.blockNode.scale)}).call(res => {// 游戏结束this.gameOver();}).start()} else {if (this.blockNode.width * this.blockNode.scale <= this.wallArea[1].x - this.wallArea[0].x) {console.log('碰撞了基座')this.collide(true);} else {console.log('碰撞了墙体')this.collide(false);}}}).start()
},

碰撞到基座与墙体的处理逻辑

// 碰撞
collide(success) {// 计算碰撞的位置let desY = -(cc.winSize.height / 2 - this.baseArea[0].height - this.blockNode.height * this.blockNode.scale / 2);if (!success) {desY += this.wallArea[0].height;}cc.tween(this.blockNode).to(0.5, {position: cc.v2(0, desY)}, {easing: 'bounceOut'}).call(res => {if (success) {// 更新得分并初始化this.updateScore(1);this.init();} else {// 游戏结束this.gameOver();}}).start()
},

游戏结束

// 游戏结束
gameOver() {console.log('游戏结束')cc.director.loadScene('game');
},

更新得分

// 更新分数
updateScore(incr) {this.score += incr;this.scoreLabel.string = this.score;
},

学习完美方块小游戏（cocos creator）相关推荐

学习跃动小球小游戏（cocos creator）
学习跃动小球小游戏玩法:小球会不断的上下跳动,点击屏幕小球会加速掉落,下面的白色跳板一直在移动,小球需要准确的跳到跳板上才能得分. 效果图 [截图] ball脚本小球碰撞回调 block脚本初始 ...
Python版跳跳方块小游戏源代码，跳跳益智游戏代码
Python版跳跳方块小游戏源代码,跳跳益智游戏代码,通过方向键的左右键来控制方块向左上还右上跳跃,按R键重要开始游戏.相当有难度,快来挑战你自己吧 jump_square.py # import o ...
Udacity利用深度学习玩赛车小游戏
Udacity利用深度学习玩赛车小游戏简单介绍准备工作训练网络效果简单介绍这是Udacity无人驾驶课程里一个利用深度学习实现的玩赛车小游戏, 附上链接:github项目原理就是玩家手动 ...
html5游戏刺客,完美刺客攻略：完美刺客小游戏全关卡通关攻略
完美刺客要怎么顺利的通关呢?在完美刺客小游戏中,丰富的关卡考验着大家的脑洞与反应,想要快速通过并不是一件轻松简单的事情,那么今天小编就为大家带来详细的介绍,帮助大家顺利的通过关卡,感兴趣的朋友们一起来 ...
html实现经典打方块小游戏
文章目录 1.设计来源 1.1 主界面 1.2 游戏界面 1.3 游戏结束界面 2.效果和源码 2.1 动态效果 2.2 源代码源码下载作者:xcLeigh 文章地址:https://blog.c ...
unity学习开发小球吃方块小游戏（从制作到发布程序，超详细全教程包你学会）
unity小球吃方块开发过程你将学会用unity开发小游戏的基础知识吃方块游戏超详细全教程,保姆式教学包你学会一.创建对象创建PlayBall小球吃金币游戏项目,创建地面和小球. 二.添加脚本 ...
用ts代码实现吃鸡游戏刷毒小demo(cocos creator引擎)
闲来无事,写下来的,用的cocos creator引擎刷毒逻辑一般为四个步骤: 1,安全区在毒圈内重新刷新,外圆必须全包含内圆 2,倒计时结束,毒圈沿着毒圈圆心点缩小 3,当外圆与内圆相切的时候,相 ...
java移动方块小游戏_Java多线程实现方块赛跑小游戏
本文实例为大家分享了Java实现方块赛跑小游戏的具体代码,供大家参考,具体内容如下在一个图形界面上构造两个位于同一起跑线方块,起跑线位于界面靠左位置, A 方块先开始运动,向右移动 50 像素后停止 ...
屌炸天，既要小又要快！完美支持小游戏包体，这款神级插件怎么做到的？
寻路是游戏开发中不可忽视的功能之一,NavMesh 导航网格寻路则被广泛用于在复杂的 3D 游戏世界中实现动态物体自动寻路.开发者 iwae 创作了插件 Easy NavMesh,在 Cocos Cr ...

学习完美方块小游戏（cocos creator）

学习完美方块小游戏

在game脚本中编写游戏逻辑：

学习完美方块小游戏（cocos creator）相关推荐

最新文章

热门文章