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

最终呈现效果

 

 

 

 

 

👉 |  以上内容仅为学习参考、学习笔记使用  | 👈