Cocos Creator 方块小游戏
Cocos Creator
Cocos Creator ≠ Cocos 2d-x
一般所说的 Cocos 指的是 Cocos 2d-x
而 Cocos Creator 是由 Unity 3D 的开发方法开发的另一种引擎,但都包含 Cocos
相对而言,Cocos Creator 的界面更加整洁,应用了 Unity 的操作逻辑,学习起来也更简单
Cocos Creator 版本
这里使用将使用 Creator - 3.6.1 的版本实现一个 “完美方块”(点击跳转原链接)的小游戏
PS:原链接使用的是 Creator 2.x 版本,在 3.x 版本里部分 API 已弃用
项目完整代码
GameManager.ts
import { _decorator, Component, Node, tween, Vec3, Tween, input, Input, EventMouse, UITransform, view, math, director, Director, Label, Color, color, Sprite, random, randomRange } from 'cc'; const { ccclass, property } = _decorator; // 游戏管理器 @ccclass('GameManager') export class GameManager extends Component { // 背景及背景颜色 @property({type: Sprite}) public background: Sprite | null = null; @property({type: String}) public bgColors: string[] = ['#4cb4c7', '#ffc09f', '#c7b3e5', '#588c7e', '#a3a380']; // 方块 @property({type: Node}) public block: Node | null = null; // 方块放大倍数 @property({type: Vec3}) public largenVec3: Vec3 = new Vec3(4, 4, 4); // 底座和墙体 @property({type: Node}) public baseAreas: Node[] = []; @property({type:Node}) public wallAreas: Node[] = []; // 得分 @property({type: Label}) public scoreLabel: Label | null = null; private score: number = 0; // 缓动动画 private largenTween: Tween<Node>; start() { this.init(); this.score = 0; this.updateScore(0); this.setBackgroundColor(); } // 初始化设置 init() { this.setBlock(); this.setBaseAndWall(); } // 设置输入开关 setInputActive(active: boolean) { if(active) { input.on(Input.EventType.MOUSE_DOWN, this.onMouseDown, this); input.on(Input.EventType.MOUSE_UP, this.onMouseUp, this); } else { input.off(Input.EventType.MOUSE_DOWN, this.onMouseDown, this); input.off(Input.EventType.MOUSE_UP, this.onMouseUp, this); } } // 鼠标按下 onMouseDown(event: EventMouse) { if(event.getButton() == 0) { this.blockLargen(); } } // 鼠标松开 onMouseUp(event: EventMouse) { if(event.getButton() == 0) { this.stopLargen(); } } // 方块变大 blockLargen() { if(this.block) { this.largenTween = tween(this.block).to(1, {scale: this.largenVec3}).start(); } } // 停止变大并下落 stopLargen() { if(this.block) { if(this.largenTween) { this.largenTween.stop(); } this.setInputActive(false); // 旋转回正常角度后开始下落 tween(this.block).to(0.25, {angle: 0}).call(()=> { // 结果判断 var contentSize = this.block.getComponent(UITransform); // 方块大于墙体间隙 if(contentSize.width * this.block.scale.x > (this.wallAreas[1].position.x - this.wallAreas[0].position.x )) { this.blockBouce(false); } // 方块小于底座间隙 else if(contentSize.width * this.block.scale.x < (this.baseAreas[1].position.x - this.baseAreas[0].position.x)) { tween(this.block).to(0.75, {position: new Vec3(0, -1000, 0)}, {easing: 'bounceOut'}).call(()=> { this.gameOver(); }).start(); } // 大块大小合适 else { this.blockBouce(true); } }).start(); } } // 方块碰撞反弹效果 blockBouce(success: boolean) { // 计算方块反弹的具体位置 var desY = -(view.getVisibleSize().height / 2 - this.baseAreas[0].getComponent(UITransform).height - this.block.getComponent(UITransform).width * this.block.scale.x / 2); if(!success) { desY += this.wallAreas[0].getComponent(UITransform).height; } // 移动动画 tween(this.block).to(0.75, {position: new Vec3(0, desY, 0)}, {easing: 'bounceOut'}).call(()=> { // 成功后重置 if(success) { this.updateScore(1); this.init(); } // 失败后重置 else { this.gameOver(); } }).start(); } // 设置背景颜色 setBackgroundColor() { // 随机颜色并规避当前颜色 var randomColor = Math.floor(randomRange(0, this.bgColors.length)); while(new Color().fromHEX(this.bgColors[randomColor]).toString() == this.background.color.toString()) { randomColor = Math.floor(randomRange(0, this.bgColors.length)); } this.background.color = new Color().fromHEX(this.bgColors[randomColor]); } // 设置方块 setBlock() { if(this.block) { tween(this.block).to(0.5, {position: new Vec3(0, 400, 0, ), scale: new Vec3(1, 1, 1), angle: -45}).call(()=> { this.setInputActive(true); }).start(); } } // 设置底座和墙体 setBaseAndWall() { // 随机间隙 var baseGap = 100 + Math.random() * 100; var wallGap = baseGap + 50 + Math.random() * 80; // 移动底座/墙体到指定位置 this.placeBaseAndWll(this.baseAreas[0], -baseGap / 2); this.placeBaseAndWll(this.baseAreas[1], baseGap / 2); this.placeBaseAndWll(this.wallAreas[0], -wallGap / 2); this.placeBaseAndWll(this.wallAreas[1], wallGap / 2); } // 移动底座和墙体 placeBaseAndWll(node: Node, desX: number) { tween(node).to(0.5, {position: new Vec3(desX, 0, 0)}, {easing: 'quintIn'}).start(); } // 更新游戏得分 updateScore(incr: number) { this.score += incr; this.scoreLabel.string = this.score + ''; } // 游戏结束 gameOver() { this.init(); this.score = 0; this.updateScore(0); this.setBackgroundColor(); // 重新加载场景 // director.loadScene('Game'); } }
开发语言为 TypeScript
最终呈现效果
👉 | 以上内容仅为学习参考、学习笔记使用 | 👈