/beauty-and-dragonball

美女与龙珠,获掘金游戏创意大赛最佳游戏作品奖第一名

Primary LanguageJavaScript

项目简介

它是什么

游戏讲述的是一个小女生被恶魔诅咒找不到家了,她听说收集七龙珠可以召唤神龙,神龙可是帮她实现回家的愿望,于是她开启了她的冒险故事

所以此项目是基于这个故事做成的 3D 冒险游戏,可以通过控制人物来寻找龙珠,召唤神龙

在线预览

技术栈

这个游戏使用了以下技术

  1. vite + React+ jsx
  2. 基于 Three.jslingo3d

以及使用了以下工具:

  1. sketchfab: 3D模型下载
  2. mixamo:3D人物动作绑定及动画
  3. readyplayer:3D角色生产工具
  4. gltf.report:模型压缩
  5. polyhaven:hdr素材库(环境贴图)
  6. textures:材质贴图素材

快速体验

  1. 下载项目:git clone https://github.com/xitu/game-garden.git
  2. 安装依赖:在项目的根目录下,运行命令yarn
  3. 启动项目:运行yarn dev

即可进入:http://localhost:3000/

在游戏中可以通过w、s键以及鼠标灵活控制人物的移动来寻找龙珠,当找到一颗龙珠后,可以单击鼠标点亮龙珠,当所有龙珠被找到,神龙就就会出现,点击神龙即可带你回家。详细过程如下:

游戏过程

1. 通过按键和鼠标控制角色移动

w键:向前跑

20.gif

s键:向后走

21.gif

鼠标:移动鼠标可控制方向

23.gif

空格:跳跃

22.gif

2. 寻找七龙珠

当看到龙珠时,对准并按下鼠标即可标记此龙珠已经找到,然后继续找下一颗

24.gif

当所有龙珠被找到时,会提示地图某处会出现龙

image.png

3. 寻找龙

当提示地图某处出现龙时,就去寻找龙

此龙如图所示

image.png

但是到这没有结束,此龙非真的神龙

4. 真神龙出现

点击小龙,小龙会消失,真的神龙出现

image.png

image.png

点击神龙,一会就会实现回家的愿望

5. 回到家

到这就会回到家了,如下

image.png

而且家附近会出现我们找到的龙珠

image.png

最后

最后能回到家,肯定开心啦

所以按住d键,开始跳舞吧

项目实践细节

具体实践细节见下文:

别卷了,快来玩 | React+Three.js 实现一个超好玩的3D游戏:美女与龙珠