搜索

Three.js实现3D推箱子小游戏

前端迷

共 14076字，需浏览 29分钟

 · 2024-04-11

最近一直在学 Three.js ，看到别人做出那么多炫酷的效果，觉得太厉害了，于是决定从一些简单的效果开始做。所以打算借这个 小游戏[1] 来认真学习一下 Three.js 。

在线预览

https://liamwu50.github.io/three-sokoban-live/

游戏介绍

"推箱子" 游戏最早是由日本游戏开发者Hiroyuki Imabayashi 于1982年开发和发布的。这款游戏的日本名为 "Sokoban"（倉庫番），意为 "仓库管理员"。"推箱子" 游戏的目标是在游戏区域内将箱子移动到指定的位置，通常通过推箱子来完成。游戏逻辑并不复杂，正好可以用来练练手。

代码实现

基础场景

初始化场景

游戏场景主要分为四个部分：场景底部面板、仓库边界、箱子、推箱子的人。首先肯定是初始化场景，需要完成场景、相机、灯光、控制器的创建。场景、渲染器都是常规创建就行，相机的话因为我们游戏场景的范围是 10*10 ，所以相机需要稍微调整一下。

          const fov = 60
    const aspect = this.sizes.width / this.sizes.height
    this.camera = new PerspectiveCamera(fov, aspect, 0.1)
    this.camera.position.copy(
      new Vector3(
        this.gridSize.x / 2 - 2,
        this.gridSize.x / 2 + 4.5,
        this.gridSize.y + 1.7
      )
    )

gridSize 表示游戏场景的范围，暂时设置为 10*10 的网格，后面随着游戏关数不同，复杂度的变化，整体游戏范围肯定会越来越大。灯光我们需要创建两个灯光，一个平行光，一个环境光，光的颜色都设置为白色就行，平行光需要添加一些阴影的参数。

      const ambLight = new AmbientLight(0xffffff, 0.6)
const dirLight = new DirectionalLight(0xffffff, 0.7)

dirLight.position.set(20, 20, 20)
dirLight.target.position.set(this.gridSize.x / 2, 0, this.gridSize.y / 2)
dirLight.shadow.mapSize.set(1024, 1024)
dirLight.shadow.radius = 7
dirLight.shadow.blurSamples = 20
dirLight.shadow.camera.top = 30
dirLight.shadow.camera.bottom = -30
dirLight.shadow.camera.left = -30
dirLight.shadow.camera.right = 30

dirLight.castShadow = true

this.scene.add(ambLight, dirLight)

底部平面

Three.js 的场景初始完之后，接着需要创建游戏场景的底部平面。

游戏场景平面我们用 PlaneGeometry 来创建，接着将平面沿着x轴旋转90度，调整为水平方向，并且给平面添加网格辅助 AxesHelper ，方便我们在游戏移动的过程中找准位置。

      private createScenePlane() {
    const { x, y } = this.gridSize
    const planeGeometry = new PlaneGeometry(x * 50, y * 50)
    planeGeometry.rotateX(-Math.PI * 0.5)
    const planMaterial = new MeshStandardMaterial({ color: theme.groundColor })
    const plane = new Mesh(planeGeometry, planMaterial)
    plane.position.x = x / 2 - 0.5
    plane.position.z = y / 2 - 0.5
    plane.position.y = -0.5
    plane.receiveShadow = true
    this.scene.add(plane)
  }
  
  private createGridHelper() {
    const gridHelper = new GridHelper(
      this.gridSize.x,
      this.gridSize.y,
      0xffffff,
      0xffffff
    )
    gridHelper.position.set(
      this.gridSize.x / 2 - 0.5,
      -0.49,
      this.gridSize.y / 2 - 0.5
    )
    gridHelper.material.transparent = true
    gridHelper.material.opacity = 0.3
    this.scene.add(gridHelper)
  }

人物

接着我们创建一个可以推动箱子的人物，我们用 RoundedBoxGeometry 来创建身体，再创建两个 SphereGeometry 当做眼睛，最后再用 RoundedBoxGeometry 创建一个嘴巴，就简单的完成了一个人物。

      export default class PlayerGraphic extends Graphic {
  constructor() {
    const NODE_GEOMETRY = new RoundedBoxGeometry(0.8, 0.8, 0.8, 5, 0.1)
    const NODE_MATERIAL = new MeshStandardMaterial({
      color: theme.player
    })
    const headMesh = new Mesh(NODE_GEOMETRY, NODE_MATERIAL)
    headMesh.name = PLAYER

    const leftEye = new Mesh(
      new SphereGeometry(0.16, 10, 10),
      new MeshStandardMaterial({
        color: 0xffffff
      })
    )
    leftEye.scale.z = 0.1
    leftEye.position.x = 0.2
    leftEye.position.y = 0.16
    leftEye.position.z = 0.46

    const leftEyeHole = new Mesh(
      new SphereGeometry(0.1, 100, 100),
      new MeshStandardMaterial({ color: 0x333333 })
    )

    leftEyeHole.position.z += 0.08
    leftEye.add(leftEyeHole)

    const rightEye = leftEye.clone()
    rightEye.position.x = -0.2

    const mouthMesh = new Mesh(
      new RoundedBoxGeometry(0.4, 0.15, 0.2, 5, 0.05),
      new MeshStandardMaterial({
        color: '#5f27cd'
      })
    )
    mouthMesh.position.x = 0.0
    mouthMesh.position.z = 0.4
    mouthMesh.position.y = -0.2

    headMesh.add(leftEye, rightEye, mouthMesh)
    headMesh.lookAt(headMesh.position.clone().add(new Vector3(0, 0, 1)))

    super(headMesh)
  }
}

创建出来的人物长这样：

b097f6da1826a6a99987b2b6807761fa.webp

游戏场景

搭建场景

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

      export const EMPTY = 'empty'
export const WALL = 'wall'
export const TARGET = 'TARGET'
export const BOX = 'box'
export const PLAYER = 'player'

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

      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就表示游戏的布局数据，后面我们循环加载的时候按照类型来对应加载就行了。接着我们开始加载游戏的基本数据。

      /**
 * 创建类型网格
 */
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实际就对应当前几何体所在的位置，需要注意的就是在加载箱子的时候，需要判断一下，当前箱子的位置是不是在目标点上，如果在目标点上的话就需要把箱子的颜色设置为激活的颜色。

      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 管理工具，专门用来存当前关卡的布局数据以及用来移动几何体的位置。创建出来的基础游戏场景就是这样。

c41785c05c9410dc403ae177e652625c.webp

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

      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 所在的位置加上键盘按下的方向计算出来就行。

      if (newDirection) {
   const mesh = this.sceneRenderManager.playerMesh
   mesh.lookAt(mesh.position.clone().add(newDirection))
   return position.clone().add(newDirection)
 }

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

      const nextElement = this.elementManager.layout[nextPos.z][nextPos.x]

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

      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 布局数据，因为这个数据是随着玩家的操作实时更新的。

      /**
 * 更新实体位置
 */
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所在的位置是否全部都在目标点的位置上就行。

      /**
* 判断游戏是否结束
*/
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)
 )
}


参考资料 [1]

源码: https://github.com/LiamWu50/three-sokoban-live



作者：Liam_wu

链接：https://juejin.cn/post/7296658371214016553



感谢您的阅读      

在看点赞 好文不断    7f79bbc52fe5123bb53e6ef0736741e8.webp

浏览 1
点赞
评论
收藏
分享

手机扫一扫分享

举报
评论
图片
表情
推荐
15种时间序列预测方法总结(包含多种方法代码实现)
向AI转型的程序员都关注了这个号👇👇👇在这篇文章中，我们将深入探讨时间序列预测的基本概念和方法。我们将首先介绍单元预测和多元预测的概念，然后详细介绍各种深度学习和传统机器学习方法如何应用于时间序列预测，包括循环神经网络（RNN）、一维卷积神经网络（1D-CNN）、Transformer、自回归模型（
机器学习AI算法工程
0
SpringBoot 实现图片防盗链功能
程序员的成长之路互联网/程序员/技术/资料共享 关注阅读本文大概需要 4 分钟。来自：blog.csdn.net/weixin_46157208/article/details/138051737前言出于安全考虑，我们需要后端返回的图片只允许在某个网站内展示，不想被爬虫拿到图片地
程序员的成长之路
0
有意思！一个关于 Spring 历史的在线小游戏
发现 Spring One 的官网上有个好玩的彩蛋，分享给大家！进到Spring One的官网，可以看到右下角有个类似马里奥游戏中的金币图标。点击该金币之后，会打开一个新的页面，进入下面这样一个名为：The History Of Spring 的在线小游戏你可以使用上下左右的方向键来控制Spring
公众号程序猿DD
1
一站式解决方案：基于 Arthas 实现服务发现和权限控制
来源：juejin.cn/post/7281849496983994383👉 欢迎加入小哈的星球 ，你将获得: 专属的项目实战 / Java 学习路线 / 一对一提问 / 学习打卡 /  赠书福利全栈前后端分离博客项目 2.0 版本完结啦， 演示链接
小哈学Java
0
用 Shader 实现旗帜飘扬动画效果
我觉得对于刚入门 3D 编程的朋友来说，如果能够完成代码创建模型数据->创建材质->编写Shader动画这一系列，想必会有满满的成就感。今天就用 Cocos Creator 的 utils.MeshUtils.createMesh 接口，带大家感受一下这个流程。这个流程不仅可以用于新手学
COCOS
2
SpringBoot+Minio实现上传凭证、分片上传、秒传和断点续传
关注我们,设为星标,每天7:40不见不散,架构路上与您共享回复架构师获取资源大家好，我是你们的朋友架构君，一个会写代码吟诗的架构师。Spring Boot整合Minio后，前端的文件上传有两种方式：1、文件上传到后端，由后端保存到Minio这种方式好处是完全由后端集中管理，可以很好的做到、身份验证、
Java架构师社区
0
超越原生，散点图实现华夫饼图
之前我们介绍过了如何使用新卡片图实现华夫饼图。参考：超越原生，PowerBI 华夫饼图实现但是利用卡片图实现的华夫饼图有一些缺点，形状之间的大小跟间距不太好把握，而且有时形状大一点的话显示就会不正常，需要做出二次调整。今天给大家介绍一种原生视觉对象生成华夫饼图的更佳方案，既简单又美观。上图是利用散点
PowerBI战友联盟
2
Spring Boot + flowable 快速实现工作流
关注我们,设为星标,每天7:40不见不散,架构路上与您共享回复架构师获取资源大家好，我是你们的朋友架构君，一个会写代码吟诗的架构师。来源：blog.csdn.net/zhan107876/article/details/120815560总览一、flowable-ui部署运行二、绘制流程图绘图细节：
Java架构师社区
0
实现订单30分钟自动取消的策略
原文：juejin.cn/post/7285167401821798400简介在电商和其他涉及到在线支付的应用中，通常需要实现一个功能：如果用户在生成订单后的一定时间内未完成支付，系统将自动取消该订单。本文将详细介绍基于Spring Boot框架实现订单30分钟内未支付自动取消的几种方案，并提供实例
JAVA乐园
0
AI大模型之路 第三篇：从零实现词嵌入模型，加深理解！
你好，我是郭震今天我们研究「AI大模型第三篇」：词维度预测，很多读者听过词嵌入，这篇文章解答下面问题：词嵌入是什么意思？怎么做到的？原理是什么？从零实现一个专属你数据集的词嵌入我们完整从零走一遍，根基的东西要理解透，这样才能发明出更好的东西。1 skip-gram模型Skip-gram模型是一种广泛
Python与算法社区
11
点赞
评论
收藏
分享

手机扫一扫分享

举报