Cocos Creator三消小游戏(TS 01版)

1.设置节点

创建个 bg 单色渲染节点、bgControl 单色渲染节点、picManager空节点，他们的父子级关系如图所示。

（Canvas 为720*1280大小，bgControl 大小为500*500）

接下来需要先在 picManager 里面放入一个元素，制作一个预设体（后面所有元素都通过使用这个预设体去修改里面的图片资源并在 picManager 里面随机排列，这意味着此时里面放任意一个元素的图片都可以）

2.制作预设体

（在 resouece 文件夹里拖出任意一个图片资源放在 picManager 里面，这里拖的是 bear）

同时，创建一个名为 brear 的 TS 脚本挂载在 bear节点上。

此时，我们还需要创建一个名为 grid 的 TS 脚本，用于获得格子坐标（每个元素的坐标）。

下面是grid脚本：

const { ccclass, property } = cc._decorator;@ccclass
export default class grid {public x: number = 0;public y: number = 0;/****/constructor(x?, y?) {if (x) {this.x = x;}if (y) {this.y = y;}}
}

下面是bear脚本：

import grid from "./grid";const { ccclass, property } = cc._decorator;// 枚举
export enum BEARTYPE {BEAR,CAR,CARROT,CHICKEN,PIZZA,RABBIT,
}// 数据配置 数据结构
export class RES_NAME {public static res_name = {[BEARTYPE.CAR]: "car",[BEARTYPE.BEAR]: "bear",[BEARTYPE.CARROT]: "carrot",[BEARTYPE.CHICKEN]: "chicken",[BEARTYPE.PIZZA]: "pizza",[BEARTYPE.RABBIT]: "rabbit",}
}// const map = {"key1":"value1","key2":"value2"}@ccclass
export default class bear extends cc.Component {public m_type: BEARTYPE;public m_gird: grid_1;public picNode:cc.Sprite;// 初始化init(type, grid) {this.m_type = type;this.m_gird = grid;// this.picNode = this.node.getComponent(cc.Sprite);this.setPic();}// 设置图片资源setPic() {cc.loader.loadRes(RES_NAME.res_name[this.m_type], cc.SpriteFrame, function(err, sf: cc.SpriteFrame){this.node.getComponent(cc.Sprite).spriteFrame = sf;});}}

此处bear脚本其实就完成了，但是由于我们后期需要确认元素是否交换或者被消除之类的，我们可以让其 Label组件上显示它自身的坐标，那么我们添加一个设置坐标的方法 setPos() ，代码如下：

import grid from "./grid";const { ccclass, property } = cc._decorator;// 枚举
export enum BEARTYPE {BEAR,CAR,CARROT,CHICKEN,PIZZA,RABBIT,
}// 数据配置
export class RES_NAME {public static res_name = {[BEARTYPE.BEAR]:"bear",[BEARTYPE.CAR]:"car",[BEARTYPE.CARROT]:"carrot",[BEARTYPE.CHICKEN]:"chicken",[BEARTYPE.PIZZA]:"pizza",[BEARTYPE.RABBIT]:"rabbit",}
}@ccclass
export default class bear extends cc.Component {public m_type: BEARTYPE;public m_gird: grid;public picNode:cc.Sprite;// 初始化init(type, grid) {this.m_type = type;// this.m_gird = grid;// this.picNode = this.node.getComponent(cc.Sprite);this.setPic();this.setPos(grid);}// 设置图片资源setPic() {cc.loader.loadRes(RES_NAME.res_name[this.m_type], cc.SpriteFrame, (err, sf: cc.SpriteFrame) => {this.node.getComponent(cc.Sprite).spriteFrame = sf;});}// 设置坐标setPos(grid) {this.m_gird = grid;this.node.getComponent(cc.Label).string = this.m_gird.x + "," + this.m_gird.y;// this.node.active = false;}}

下面是 picManager 脚本：

import bear, { BEARTYPE } from "./bear";
import grid from "./grid";const { ccclass, property } = cc._decorator;const maxW = 10;
const maxH = 10;
const size1 = 50;   // 元素大小为50
const pos = -225;   // 左下角初始坐标(-225,-225)@ccclass
export default class picManager extends cc.Component {// 预设体bear@property(cc.Prefab)bearPrefab: cc.Prefab;gridList = [];init() {this.gridList = [];for (let i = 0; i < maxW; i++) {this.gridList[i] = [];for (let j = 0; j < maxH; j++) {let temp = cc.instantiate(this.bearPrefab);     // 实例化预设体temp.getComponent(bear).init(this.getSj(), new grid(i, j));   // 初始化temp.position = cc.v3(pos + i * size1, pos + j * size1, 0);this.node.addChild(temp);this.gridList[i][j] = temp.getComponent(bear);}}}// 获取当前类的格子getGrid(i, j) {return this.gridList[i][j];}getSj() {return Math.floor(Math.random() * 6);}start() {this.init();// let ret = this.getSj();}}

先总结到这，有空继续更新后续内容

Cocos Creator三消小游戏(TS 01版)相关推荐

cocos creator 微信小游戏接口
cocos creator 微信小游戏接口 /** @Description:微信小游戏* @version: * @Author: lvpeijun* @Date: 2019-12-02 10:43 ...
cocos creator vivo 小游戏 mac电脑
cocos creator vivo 小游戏 mac电脑接入文档文档链接 vivo调试调试文档浏览器真机调试 1:使用cocos creator 进行打包要勾选调试模式生成了com.exma ...
解决cocos creator微信小游戏本地缓存文件超过限制问题
cocos creator微信小游戏开发,如果游戏包内资源超过包体大小限制,那么可以通过远程加载的方式加载资源(代码脚本文件除外). 小游戏在迭代过程中因为缓存资源的积累,在加载资源的时候会出现超过缓 ...
Cocos Creator 微信小游戏苹果手机锁屏卡死的坑
在制作小游戏项目时遇到了苹果系列手机只要游戏过程中进行锁屏后解锁时,整个手机或微信会卡个几秒甚至会黑屏! 所以就这个问题进行了各种 onshow/onhide 的操作试验. 第一种:在onshow ...
微信小游戏资源服务器,Cocos Creator 微信小游戏远程资源设置
版本:2.3.4 参考: cocos教程:发布到微信小游戏因为微信小游戏有包体大小限制. 主包4M 分包最大4M 一共最多16M 那么假如我们的游戏有个20M,50M,那就放不下了.只能放到远程服务 ...
Cocos Creator 微信小游戏无法正确显示头像解决方案
常见的获取微信头像方法 UserInfo: 用户授权成功后返回的微信用户信息 UserInfo 结构体信息详情: 进入微信如何登陆授权: 进入 let url = userInfo.avatar ...
Cocos Creator 微信小游戏分包设置
版本:2.3.4 参考: cocos教程:分包加载在微信小游戏中使用分包.因为微信小游戏有包体限制. 主包最大只能4m,分包最大4m,一共最多16m.所以主包只放代码,而图片.json等资源都设置为 ...
cocos creator微信小游戏，使用微信云开发实现“世界排行榜”
微信提供的子域只能实现好友排行,我们一般希望实现所有玩家的世界排行榜. 那么问题来了,我们怎么获取所有玩家的openid?其实很简单,就是玩家打开游戏或排行榜时,请求玩家授权,这样就拿到openid了 ...
Cocos Creator 微信小游戏填坑记录
环境:(ccc-v1.9.1, wx-v1.02.1804251) 微信小游戏禁止了动态生成并执行代码的功能,window.eval(). new Function() ,这些都不能用了. 微信小游戏 ...
Cocos Creator微信小游戏添加banner广告
学了小游戏开发也有几个月了,这边写一下这几个月以来遇到的坑. 首先是添加banner广告看过很多个写微信广告的写法.感觉其实是在误导萌新,这是一般别人的例子 let winSize = wx.get ...

Cocos Creator三消小游戏(TS 01版)

1.设置节点

2.制作预设体

Cocos Creator三消小游戏(TS 01版)相关推荐

最新文章

热门文章