cocoscreator之2048-------(1)思路及基础页面搭建
程序员文章站
2022-06-23 08:23:14
前言此开发过程借鉴于 Prpr_Saber大佬的文章,所以此文中会有大佬写的代码的影子,感兴趣的可以直接跳转至大佬的文章,而且大佬把原工程放在Git上了,可以直接拉取。如果此文侵权,即刻删除。思路以4*4的格子举例,如图1.我们需要先生成4*4的二维数组2.在二维数组中随机位置生成一个数字23.当我们向左滑动时候,修改二维数组4.同时再生成一个新的数字,25.再次向左滑动,两个2在同一行合并成为,4这就是2048的主要逻辑一、布置场景我用的是cocoscreator2.3.4,...
前言
此开发过程借鉴于 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脚本
- 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()
}
}
- 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);
}
}
- 将Camera挂在摄像机上
4. 创建一个新的文件夹game,存放每个页面要处理的逻辑,然后分别对应的挂在节点下
- 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