cocoscreator之2048-------（1）思路及基础页面搭建

前言

此开发过程借鉴于 Prpr_Saber大佬的文章，
所以此文中会有大佬写的代码的影子，感兴趣的可以直接跳转至大佬的文章，而且大佬把原工程放在Git上了，可以直接拉取。
如果此文侵权，即刻删除。

思路

以4*4的格子举例，如图

1.我们需要先生成4*4的二维数组
2.在二维数组中随机位置生成一个数字2
3.当我们向左滑动时候，修改二维数组

4.同时再生成一个新的数字，2
5.再次向左滑动，两个2在同一行合并成为，4
这就是2048的主要逻辑

一、布置场景

我用的是cocoscreator2.3.4，全文用TS开发，图片全用的是单色精灵代替。

我用了一个场景，三个节点，从左到右依次为，开始页面，选择页面（因为我是按着 Prpr_Saber大佬思路写的，所以在选择页面同样有3x3，4x4，8x8的选择项）和游戏页面。游戏Canvas大小为750*1500，灰色的背景要略大一些，防止穿帮。如下图

初始时，摄像机Main Camera的位置是在start上，即start页面的位置为（0,0），select页面位置（750,0），play页面位置为（1500,0）

二、从摄像机的移动开始写起

每次切换页面相当于是将摄像机位置左移或者右移，所以创建一个camera文件用来存放Camera.ts和CameraManager.ts脚本

1. CameraManager.ts中代码块

export default class CameraManager
{
    static instance: CameraManager

    //创建单列，所有该脚本中方法，在其他脚本中可通过CameraManager.getInstance().方法名，来获取
    static getInstance(): CameraManager
    {
        this.instance = this.instance ? this.instance : new CameraManager();
        return this.instance;
    }

    private _camera: cc.Node = null;//摄像机节点
    private _layerList: cc.Node[] = [];//存放的是start  select  play三个节点
    private _currentIndex: number;//当前展示节点的在_layerList中的下标，分别对应0,1,2

    //初始化摄像机
    initCamera(camera: cc.Node, layerList: cc.Node[])
    {
        this._camera = camera;
        this._layerList = layerList
        this._currentIndex = 0;//初始值设为0
    }

    /**
     * 移动摄像机位置至正确位置
     * @param tag 左移还是右移，-1:左移  1：右移
     * @param callback 移动后的回调函数，也可以不传
     */
    moveCamera(tag: number, callback?: Function)
    {
        //此处的具体作用可以简单看一下,不复杂
        cc.tween(this._layerList[this._currentIndex])
            .to(0.2, { scale: 0.9 })
            .call(() =>
            {
                this._layerList[this._currentIndex].scale = 1;
                this._currentIndex += tag;
                cc.tween(this._camera)
                    .to(0.2, { x: this._currentIndex * 750 })
                    .call(() =>
                    {
                        callback && callback()
                         //这条语句的作用相当于
                        // if (callback)
                        // {
                        //     callback();
                        // }
                    })
                    .start()
            })
            .start()
    }
}

2. Camera.ts代码块

import CameraManager from "./CameraManager";

const { ccclass, property } = cc._decorator;

@ccclass
export default class Camera extends cc.Component
{
    @property(cc.Node)
    layerList: cc.Node[] = [];//存放的是start select player三个节点

    onLoad()
    {
        CameraManager.getInstance().initCamera(this.node, this.layerList);
    }
}

3. 将Camera挂在摄像机上

4. 创建一个新的文件夹game，存放每个页面要处理的逻辑，然后分别对应的挂在节点下

5. Start.ts代码块

import CameraManager from "../camera/CameraManager";

const { ccclass, property } = cc._decorator;

@ccclass
export default class Start extends cc.Component
{

    @property(cc.Node)
    bg: cc.Node = null;

    onLoad()
    {
        //点击任意位置跳转至select页面
        this.bg.on('touchend', () =>
        {
        	//moveCamera(1),就代表右移动
            CameraManager.getInstance().moveCamera(1)
        }, this)
    }
}

挂在start节点下

6. Select.ts代码块

import CameraManager from "../camera/CameraManager";

const { ccclass, property } = cc._decorator;

@ccclass
export default class Select extends cc.Component
{
    @property(cc.Node)
    backBtn: cc.Node = null;//返回按钮

    onLoad()
    {
        //因为这里在引擎里直接创建的button组件，所以.on('click')而不是.on('touchend')
        this.backBtn.on('click', () =>
        {
            CameraManager.getInstance().moveCamera(-1)
        })
    }
}

挂在select节点下

写到这里就可以点击开始页面跳转至选择页面，点击选择页面可以返回开始页面了，其他的功能，请查看后续文章

本文地址：https://blog.csdn.net/Guard777/article/details/108493287