【Unity】3D贪吃蛇游戏制作/WebGL本地测试及项目部署

本文是Unity3D贪吃蛇游戏从制作到部署的相关细节 项目开源代码：https://github.com/zstar1003/3D_Snake 试玩链接：http://xdxsb.top/Snake_Game_3D 效果预览：

在这里插入图片描述

试玩链接中的内容会和该效果图略有不同，后面会详细说明。

游戏规则

经典贪吃蛇游戏：蛇身随着吃食物的增加不断变长，通过A/D或方向键←→控制方向，蛇头撞在蛇身上或四周墙壁会导致游戏失败。

蛇身控制和碰撞检测

蛇身控制和碰撞检测的逻辑写在SnakeController.cs文件中。

蛇头运动的思路是将蛇头不断朝forward的方向前进，前进速度等于速度数值x当前时间。同时通过一个list来记录蛇头运动的历史轨迹，蛇身通过该轨迹进行运动。

为了区分延申出来的蛇身是初始蛇身还是新延申的蛇身，对新延申的蛇身打上Block标签，不进行区分则会导致刚开始碰撞即触发蛇头蛇身碰撞，导致游戏结束。

完整代码：

食物旋转

控制食物旋转比较简单，在update中加入Rotate即可。

Food.cs

食物随机生成

食物随机生成我并没有采用随机数的方式，三维场景容易出现问题。因此这里在场景中添加了6个食物生成的点位，当食物被触发之后，在随机的一个点位上生成新的食物。

SpawnItem.cs

在这里插入图片描述

场景切换

这里对于游戏开始界面和结束界面分别用不同的场景进行隔离，切换时只需一行代码：

这里的Index为打包时场景的序号顺序。

本地WebGL测试

使用WebGL打包之后，会得到3个文件夹和一个index.html文件，直接打开index.html会报错，需要使用服务器方式去运行。

首先在win10上配置服务器相关组件，参考之前的博文【实用技巧】Win10搭建局域网FTP服务器。

之后在打包的文件夹下新建一个文件web.config，输入以下内容：

之后在iis中，新建一个http服务器，选择一个不被占用的端口，我这里选择8080端口。

在这里插入图片描述

开启网站后，在浏览器输入http://localhost:8080/，即可访问测试。

在这里插入图片描述

Github部署

Github部署非常容易，新建一个仓库，将打包出的内容直接上传。

在这里插入图片描述

然后在Settings/Pages选择main分支，点击Save，过几分钟就会在上方出现访问网址。

在这里插入图片描述

遗留问题：打包前后测试不一致

目前该项目在untiy运行测试时正常， 但打包出webgl或exe时，却出现蛇身分离的情况，看了一些打包时的选项，仍未解决该问题，有了解这一问题的读者欢迎在评论区交流。