ThreeJS实现推箱子小游戏【二】

在线预览地址

前言

上一章主要介绍了怎么创建基础的场景以及推箱子的人物,这一章主要介绍整个游戏场景的创建,以及游戏的基本逻辑。

正文

游戏的所有内容都是通过ThreeJs的立体几何来创建的,整个场景分为了游戏区域以及环境区域,游戏区域一共有五种类型:人物、围墙、箱子、目标点、空白区域。

首先定义五种类型:

ts 复制代码
export const EMPTY = 'empty'
export const WALL = 'wall'
export const TARGET = 'TARGET'
export const BOX = 'box'
export const PLAYER = 'player'

类型定义好之后,我们需要定义整个游戏关卡的布局,推箱子的游戏掘金上也有很多,我看了设置布局的方式多种多样,我选择一种比较容易理解也比较简单的数据结构,就是用双层数组结构来表示每一种元素对应所在的位置。并且我把目标点的位置没有放在整个游戏的布局数据里面,而是单独存起来,这样做是因为player移动之后我们需要实时的去维护这个布局数据,所以少一种类型的话我们会简化很多判断逻辑。

ts 复制代码
export const firstLevelDataSource: LevelDataSource = {
  layout: [
    [WALL, WALL, WALL, WALL, WALL, WALL, WALL, WALL, WALL],
    [WALL, PLAYER, EMPTY, EMPTY, WALL, WALL, WALL, WALL, WALL],
    [WALL, EMPTY, BOX, BOX, WALL, WALL, WALL, WALL, WALL],
    [WALL, EMPTY, BOX, EMPTY, WALL, WALL, WALL, EMPTY, WALL],
    [WALL, WALL, WALL, EMPTY, WALL, WALL, WALL, EMPTY, WALL],
    [WALL, WALL, WALL, EMPTY, EMPTY, EMPTY, EMPTY, EMPTY, WALL],
    [WALL, WALL, EMPTY, EMPTY, EMPTY, WALL, EMPTY, EMPTY, WALL],
    [WALL, WALL, EMPTY, EMPTY, EMPTY, WALL, WALL, WALL, WALL],
    [WALL, WALL, WALL, WALL, WALL, WALL, WALL, WALL, WALL]
  ],
  targets: [
    [3, 7],
    [4, 7],
    [5, 7]
  ]
}

layout就表示游戏的布局数据,后面我们循环加载的时候按照类型来对应加载就行了。

接着我们开始加载游戏的基本数据。

ts 复制代码
/**
 * 创建类型网格
 */
private createTypeMesh(cell: CellType, x: number, y: number) {
  if (cell === WALL) {
    this.createWallMesh(x, y)
  } else if (cell === BOX) {
    this.createBoxMesh(x, y)
  } else if (cell === PLAYER) {
    this.createPlayerMesh(x, y)
  }
}

这里的x,y实际就对应当前几何体所在的位置,需要注意的就是在加载箱子的时候,需要判断一下,当前箱子的位置是不是在目标点上,如果在目标点上的话就需要把箱子的颜色设置为激活的颜色。

ts 复制代码
private createBoxMesh(x: number, y: number) {
  const isTarget = this.elementManager.isTargetPosition(x, y)
  const color = isTarget ? theme.coincide : theme.box
  const boxGraphic = new BoxGraphic(color)
  boxGraphic.mesh.position.x = x
  boxGraphic.mesh.position.z = y
  this.entities.push(boxGraphic)
  this.scene.add(boxGraphic.mesh)
}

这里我还创建了一个elementManager管理工具,专门用来存当前关卡的布局数据以及用来移动几何体的位置。 创建出来的基础游戏场景就是这样。

基础布局创建完之后,添加上键盘事件,主要用来控制人物和箱子的移动。

ts 复制代码
private bindKeyboardEvent() {
  window.addEventListener('keyup', (e: KeyboardEvent) => {
    if (!this.isPlaying) return

    const keyCode = e.code
    const playerPos = this.elementManager.playerPos

    const nextPos = this.getNextPositon(playerPos, keyCode) as Vector3
    const nextTwoPos = this.getNextPositon(nextPos, keyCode) as Vector3
    const nextElement = this.elementManager.layout[nextPos.z][nextPos.x]

    const nextTwoElement =
      this.elementManager.layout[nextTwoPos.z][nextTwoPos.x]

    if (nextElement === EMPTY) {
      this.elementManager.movePlayer(nextPos)
    } else if (nextElement === BOX) {
      if (nextTwoElement === WALL || nextTwoElement === BOX) return
      this.elementManager.moveBox(nextPos, nextTwoPos)
      this.elementManager.movePlayer(nextPos)
    }
  })
}

这里主要做了两件事,首先把下个和下下个的位置和位置所在的mesh类型查找出来,计算位置很简单,用当前player所在的位置加上键盘按下的方向计算出来就行。

ts 复制代码
if (newDirection) {
   const mesh = this.sceneRenderManager.playerMesh
   mesh.lookAt(mesh.position.clone().add(newDirection))
   return position.clone().add(newDirection)
 }

查找坐标所在的mesh直接用当前位置所在的坐标x,y,就能在elementManager上获取到。

ts 复制代码
const nextElement = this.elementManager.layout[nextPos.z][nextPos.x]

然后我们接着判断下个坐标以及下下个坐标的类型,来决定player和箱子是否可以移动。

ts 复制代码
if (nextElement === EMPTY) {
  this.elementManager.movePlayer(nextPos)
} else if (nextElement === BOX) {
  if (nextTwoElement === WALL || nextTwoElement === BOX) return
  this.elementManager.moveBox(nextPos, nextTwoPos)
  this.elementManager.movePlayer(nextPos)
}

在elementManager里面更新mesh的位置,首先是根据坐标把对应的mesh查找出来,然后把mesh坐标设置为下一个坐标,并且还需要维护this.levelDataSource.layout布局数据,因为这个数据是随着玩家的操作实时更新的。

ts 复制代码
/**
 * 更新实体位置
 */
private updateEntityPosotion(curPos: Vector3, nextPos: Vector3) {
  const entity = this.scene.children.find(
    (mesh) =>
      mesh.position.x === curPos.x &&
      mesh.position.y === curPos.y &&
      mesh.position.z === curPos.z &&
      mesh.name !== TARGET
  ) as Mesh

  if (entity) {
    const position = new Vector3(nextPos.x, entity.position.y, nextPos.z)
    entity.position.copy(position)
  }
  // 如果实体是箱子,需要判断是否是目标位置
  if (entity?.name === BOX) this.updateBoxMaterial(nextPos, entity)
}

最后在每一步键盘操作之后都需要判断当前游戏是否结束,只需要判断所有的box所在的位置是否全部都在目标点的位置上就行。

ts 复制代码
/**
* 判断游戏是否结束
*/
public isGameOver() {
 // 第一部找出所有箱子的位置,然后判断箱子的位置是否全部在目标点上
 const boxPositions: Vector3[] = []
 this.layout.forEach((row, y) => {
   row.forEach((cell, x) => {
     if (cell === BOX) boxPositions.push(new Vector3(x, 0, y))
   })
 })
 return boxPositions.every((position) =>
   this.isTargetPosition(position.x, position.z)
 )
}
相关推荐
Mintopia5 小时前
Three.js 深度冲突:当像素在 Z 轴上玩起 "挤地铁" 游戏
前端·javascript·three.js
Mintopia1 天前
Three.js 加载模型文件:从二进制到像素的奇幻漂流
前端·javascript·three.js
摸鱼仙人~1 天前
如何创建基于 TypeScript 的 React 项目
javascript·react.js·typescript
良辰未晚2 天前
基于全屏 Quad 的 Three.js 后处理全解析
three.js
一生躺平的仔2 天前
TypeScript入门(九)装饰器:TypeScript的"元编程超能力"
typescript
Mintopia2 天前
Three.js 材质与灯光:一场像素级的光影华尔兹
前端·javascript·three.js
MiyueFE2 天前
让我害怕的 TypeScript 类型 — — 直到我学会了这 3 条规则
前端·typescript
前端拿破轮2 天前
😭😭😭看到这个快乐数10s,我就知道快乐不属于我了🤪
算法·leetcode·typescript
前端_ID林2 天前
每个开发人员都应该知道的 TypeScript 技巧
typescript
奋飛2 天前
TypeScript系列:第六篇 - 编写高质量的TS类型
javascript·typescript·ts·declare·.d.ts