KUOKUO又上一款开源游戏+教程，绝对经典（附 Github 地址）

游戏演示

一个月前就想做了，结果先鸽了半个月，16 天前完成 demo，后来又加入了方块数据编辑场景。再后面几天做了一些修改，加了一些注释，今天才做了出来，大家千万不要学我，要克服懒惰 O(∩_∩)O~

KUOKUO又上一款开源游戏+教程，绝对经典（附 Github 地址）

关系图

首先我们看下脚本的关系图：

KUOKUO又上一款开源游戏+教程，绝对经典（附 Github 地址）

写些枚举

枚举的好处不再多说，我们先理一理俄罗斯方块这个游戏都需要些什么枚举。第一个是游戏中方块渲染，在 12 * 7 的格子中，每个格子应该有八种状态，或者说是不渲染与七种颜色；第二个是触摸事件，我们手指上下左右操作对应的事件名称；第三个就是各种音效对应的枚举；最后一个，是我为了方便使用 cc.find 找到节点的路径写的枚举。

enum.ts

/** 不渲染与7个颜色 */
export enum ItemColor {
NULL = 0,
Color1,
Color2,
Color3,
Color4,
Color5,
Color6,
Color7,
}
/** 触摸事件-上下左右滑动 */
export enum TouchEvent {
UP = 'touch-up',
DOWN = 'touch-down',
LEFT = 'touch-left',
RIGHT = 'touch-right'
}
/** 音效事件 */
export enum MusicEvent {
BGM = 'bgm',
ACTION = 'action',
GAME_OVER = 'over',
/** 方块消除 */
ELIMINATE = 'eliminate'
}
/** 节点路径 */
export enum NodeUrl {
Canvas = 'Canvas',
Music = 'Music'
}

render渲染模块

游戏主场景是 12 * 7 方格，这个渲染模块就是通过一个 12 * 7 的数据数组对应，进行渲染。首先，将 12 * 7 个方格里面铺满带图片的节点（预制体 item 就是带有精灵组件的一个节点，config 中存着一些常量）：

init () {
const height = config.row * config.blockHeight
const width = config.col * config.blockWidth
// 初始化所有节点
for (let i = 0; i < config.row; i++) {
this.itemArray[i] = []
for (let j = 0; j < config.col; j++) {
const x = -width / 2 + config.blockWidth / 2 + j * config.blockWidth
const y = height / 2 - config.blockHeight / 2 - i * config.blockHeight
const item = this.createItem(x, y)
this.itemArray[i][j] = item
}
}
}
createItem (x: number, y: number): cc.Node {
let item = cc.instantiate(this.item)
this.node.addChild(item)
item.setPosition(x, y)
item.setContentSize(config.itemWidth, config.itemHeight)
return item
}

KUOKUO又上一款开源游戏+教程，绝对经典（附 Github 地址）

render.ts 中的渲染函数，根据传入数据进行图片替换，不渲染时数组越界为 undefined，取消掉纹理：

/** 根据传入二维数组进行渲染 */
render (dataArray: ItemColor[][]) {
for (let i = 0; i < config.row; i++) {
for (let j = 0; j < config.col; j++) {
const color = dataArray[i][j]
// 拖入图片的下标是 0-6，颜色枚举对应 1-7
this.itemArray[i][j].getComponent(cc.Sprite).spriteFrame = this.itemSpriteFrames[color - 1]
}
}
}

这样渲染模块的 render 函数只接受一个二维数组数据，主逻辑那边只操作数据，最后调用下 render 即可！看下 render.ts 整体：

import { config } from "./config"
import { ItemColor } from "./enum"
const {ccclass, property} = cc._decorator
@ccclass
export default class Render extends cc.Component {
@property(cc.Prefab)
item: cc.Prefab = undefined
@property([cc.SpriteFrame])
itemSpriteFrames: cc.SpriteFrame[] = []
/** 游戏层上应该铺满节点，然后根据数据渲染 */
itemArray: cc.Node[][] = []
onLoad () {
this.init()
}
init () {
const height = config.row * config.blockHeight
const width = config.col * config.blockWidth
// 初始化所有节点
for (let i = 0; i < config.row; i++) {
this.itemArray[i] = []
for (let j = 0; j < config.col; j++) {
const x = -width / 2 + config.blockWidth / 2 + j * config.blockWidth
const y = height / 2 - config.blockHeight / 2 - i * config.blockHeight
const item = this.createItem(x, y)
this.itemArray[i][j] = item
}
}
}
/** 根据传入二维数组进行渲染 */
render (dataArray: ItemColor[][]) {
for (let i = 0; i < config.row; i++) {
for (let j = 0; j < config.col; j++) {
const color = dataArray[i][j]
// 拖入图片 0-6，颜色枚举 1-7
this.itemArray[i][j].getComponent(cc.Sprite).spriteFrame = this.itemSpriteFrames[color - 1]
}
}
}
createItem (x: number, y: number): cc.Node {
let item = cc.instantiate(this.item)
this.node.addChild(item)
item.setPosition(x, y)
item.setContentSize(config.itemWidth, config.itemHeight)
return item
}
}