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

news2024/10/7 6:49:52

本文是Unity3D贪吃蛇游戏从制作到部署的相关细节
项目开源代码：https://github.com/zstar1003/3D_Snake
试玩链接：http://xdxsb.top/Snake_Game_3D
效果预览：
在这里插入图片描述
试玩链接中的内容会和该效果图略有不同，后面会详细说明。

游戏规则

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

蛇身控制和碰撞检测

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

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

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

完整代码：

using System;
using System.Collections;
using System.Collections.Generic;
using System.Linq;
using UnityEngine;
using UnityEngine.SceneManagement;

public class SnakeController : MonoBehaviour
{
    // 设置
    public float moveSpeed = 5f;
    public float steerSpeed = 180f;
    public float bodySpeed = 5f;
    public int Gap = 10;

    // 预制体
    public GameObject bodyPrefab;  //身体组件

    // 身体组件集合
    private List<GameObject> _bodyParts = new List<GameObject>();
    private List<Vector3> _positionHistory = new List<Vector3>();

    //音乐控制器
    public AudioController audioController; 

    private void Start()
    {
        addBodyPart();
        audioController = GameObject.FindGameObjectWithTag("Audio").GetComponent<AudioController>();
    }
    private void Update()
    {
        // 向前移动
        transform.position += transform.forward * moveSpeed * Time.deltaTime;

        // 方向操控
        float steerDirection = Input.GetAxis("Horizontal");  // 返回值从 -1 到 1
        transform.Rotate(Vector3.up * steerDirection * steerSpeed * Time.deltaTime);

        // 保存位置移动史
        _positionHistory.Insert(0, transform.position);

        // 移动身体组件
        int index = 0;
        foreach (var body in _bodyParts)
        {
            Vector3 point = _positionHistory[Mathf.Clamp(index * Gap, 0, _positionHistory.Count - 1)];

            // 让贪吃蛇的身体组件沿着头部的移动轨迹运动
            Vector3 moveDirection = point - body.transform.position;
            body.transform.position += moveDirection * bodySpeed * Time.deltaTime;

            // 让身体组件朝向头部移动的方向 
            body.transform.LookAt(point);

            index++;
        }
    }
       
    // 蛇身延长
    private void addBodyPart()
    {
        GameObject body = Instantiate(bodyPrefab, new Vector3(0, transform.position.y, 0), Quaternion.identity);
        _bodyParts.Add(body);
    }

    // 后续添加的body打上Block标签
    private void addBodyPart_Block()
    {
        GameObject body = Instantiate(bodyPrefab, new Vector3(0, _bodyParts.Last().transform.position.y, 0), Quaternion.identity);
        body.tag = "Block";
        _bodyParts.Add(body);
    }


    //触发检测
    private void OnTriggerEnter(Collider other)
    {
        if (other.tag == "Food")
        {   
            //必须先删除，否则会导致多次触发
            Destroy(other.gameObject);
            addBodyPart_Block();
            GameObject.Find("SpawnPoint").GetComponent<SpawnItem>().SpawnItems();
            audioController.PlaySfx(audioController.eat);
        }
        else if (other.tag == "Block")
        {
            SceneManager.LoadScene(SceneManager.GetActiveScene().buildIndex + 1);
        }
    }
}

食物旋转

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

Food.cs

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class Food : MonoBehaviour
{
    void Start()
    {

    }
    void Update()
    {
        //旋转
        transform.Rotate(Vector3.up);
    }
}

食物随机生成

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

SpawnItem.cs

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class SpawnItem : MonoBehaviour
{
    public Transform[] SpawnPoints;
    public float spawnTime = 2.5f;
    public GameObject Items;
    void Start()
    {

    }

    void Update()
    {
        
    }

    public void SpawnItems()
    {
        int spawnIndex = Random.Range(0, SpawnPoints.Length);
        Instantiate(Items, SpawnPoints[spawnIndex].position, SpawnPoints[spawnIndex].rotation);
    }
}

在这里插入图片描述

场景切换

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

SceneManager.LoadScene(SceneManager.GetActiveScene().buildIndex + 1);

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

本地WebGL测试

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

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

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

<?xml version="1.0" encoding="utf-8"?>
<!--
  有关如何配置 ASP.NET 应用程序的详细信息，请访问
  https://go.microsoft.com/fwlink/?LinkId=169433
-->
<configuration>  
  <system.webServer>
    <httpProtocol>
      <!-- 允许跨域配置 -->
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Headers" value="X-Requested-With,Content-Type,Authorization" />
        <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE,OPTIONS" />
        <add name="Access-Control-Allow-Credentials" value="true" />
      </customHeaders>
    </httpProtocol>
        <staticContent>
            <remove fileExtension=".mem" />  
            <remove fileExtension=".data" />  
            <remove fileExtension=".unity3d" />  
            <remove fileExtension=".jsbr" />  
            <remove fileExtension=".membr" />  
            <remove fileExtension=".databr" />  
            <remove fileExtension=".unity3dbr" />  
            <remove fileExtension=".jsgz" />  
            <remove fileExtension=".memgz" />  
            <remove fileExtension=".datagz" />  
            <remove fileExtension=".unity3dgz" />  
            <remove fileExtension=".json" />  
            <remove fileExtension=".unityweb" />  
           
            <mimeMap fileExtension=".mem" mimeType="application/octet-stream" />  
            <mimeMap fileExtension=".data" mimeType="application/octet-stream" />  
            <mimeMap fileExtension=".unity3d" mimeType="application/octet-stream" />  
            <mimeMap fileExtension=".jsbr" mimeType="application/octet-stream" />  
            <mimeMap fileExtension=".membr" mimeType="application/octet-stream" />  
            <mimeMap fileExtension=".databr" mimeType="application/octet-stream" />  
            <mimeMap fileExtension=".unity3dbr" mimeType="application/octet-stream" />  
            <mimeMap fileExtension=".jsgz" mimeType="application/x-javascript; charset=UTF-8" />  
            <mimeMap fileExtension=".memgz" mimeType="application/octet-stream" />  
            <mimeMap fileExtension=".datagz" mimeType="application/octet-stream" />  
            <mimeMap fileExtension=".unity3dgz" mimeType="application/octet-stream" />  
            <mimeMap fileExtension=".json" mimeType="application/json; charset=UTF-8" />  
            <mimeMap fileExtension=".unityweb" mimeType="application/octet-stream" />  
        </staticContent>
  </system.webServer>
</configuration>

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

开启网站后，在浏览器输入http://localhost:8080/，即可访问测试。
在这里插入图片描述

Github部署

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

在这里插入图片描述
然后在Settings/Pages选择main分支，点击Save，过几分钟就会在上方出现访问网址。
在这里插入图片描述

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

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1062289.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

图像分割中的色块的提取

图像分割中的色块的提取

一 色块提取方法&#xff1a; ①首先是色彩模型的转换 由RGB颜色空间转到HSV颜色空间 原因&#xff1a;RGB颜色空间适合显示系统&#xff0c;但是各分量间相关性很强&#xff0c;比如当图像亮度发生变化时&#xff0c;RGB三个分量都会发生相应改变 但是HSV颜色空间更能感知颜色…
阅读更多...
【Java 进阶篇】JDBC 数据库连接池 C3P0 详解

【Java 进阶篇】JDBC 数据库连接池 C3P0 详解

数据库连接池是数据库编程中常用的一种技术&#xff0c;它可以有效地管理数据库连接&#xff0c;提高数据库访问的性能和效率。在 Java 编程中&#xff0c;有多种数据库连接池可供选择&#xff0c;其中之一就是 C3P0。本文将详细介绍 C3P0 数据库连接池的使用&#xff0c;包括原…
阅读更多...
LabVIEW使用ZigBee无线传感器开发住宅负载电力应用

LabVIEW使用ZigBee无线传感器开发住宅负载电力应用

LabVIEW使用ZigBee无线传感器开发住宅负载电力应用 长期以来&#xff0c;住宅客户的需求一直是电力行业的一部分。由于公用事业需要建设基础设施以满足即时和长期需求&#xff0c;因此公用事业账单既包含能源费用&#xff0c;其中衡量客户随时间消耗的总电量&#xff0c;也包含…
阅读更多...
网络攻击常见手段总结

网络攻击常见手段总结

网络攻击常见手段总结 IP 欺骗 IP 欺骗技术是什么&#xff1f; IP 欺骗技术就是伪造某台主机的 IP 地址的技术。通过 IP 地址的伪装使得某台主机能够伪装另外的一台主机&#xff0c;而这台主机往往具有某种特权或者被另外的主机所信任。 攻击时&#xff0c;伪造大量的 IP 地…
阅读更多...
文件操作 和 IO - 详解

文件操作 和 IO - 详解

一&#xff0c;认识文件 1.1 树形结构组织和目录 文件是对于"硬盘"数据的一种抽象&#xff0c;在一台计算机上&#xff0c;有非常多的文件&#xff0c;这些文件是通过 "文件系统" 来进行组织的&#xff0c;本质上就是通过 "目录"(文件夹) 这样…
阅读更多...
PyTorch实例：简单线性回归的训练和反向传播解析

PyTorch实例：简单线性回归的训练和反向传播解析

文章目录 &#x1f966;引言&#x1f966;什么是反向传播&#xff1f;&#x1f966;反向传播的实现&#xff08;代码&#xff09;&#x1f966;反向传播在深度学习中的应用&#x1f966;链式求导法则&#x1f966;总结 &#x1f966;引言 在神经网络中&#xff0c;反向传播算法…
阅读更多...
第八章 排序 四、冒泡排序

第八章 排序 四、冒泡排序

目录 一、算法思想 二、例子 三、代码实现 四、验证 五、算法性能分析 注意&#xff1a;要分清楚交换次数和移动次数 六、总结 一、算法思想 从后往前&#xff0c;两两比较相邻元素的值&#xff0c;若为逆序&#xff0c;则交换它们的值&#xff0c;直到全部比较完。 二…
阅读更多...
typescript: Builder Pattern

typescript: Builder Pattern

/*** file: CarBuilderts.ts* TypeScript 实体类 Model* Builder Pattern* 生成器是一种创建型设计模式&#xff0c; 使你能够分步骤创建复杂对象。* https://stackoverflow.com/questions/12827266/get-and-set-in-typescript* https://github.com/Microsoft/TypeScript/wiki/…
阅读更多...
制作 3 档可调灯程序编写

制作 3 档可调灯程序编写

PWM 0~255 可以将数据映射到0 75 150 225 尽可能均匀电压间隔
阅读更多...
Python的NumPy库（一）基础用法

Python的NumPy库（一）基础用法

NumPy库并不是Python的标准库&#xff0c;但其在机器学习、大数据等很多领域有非常广泛的应用&#xff0c;NumPy本身就有比较多的内容&#xff0c;全部的学习可能涉及许多的内容&#xff0c;但我们在这里仅学习常见的使用&#xff0c;这些内容对于我们日常使用NumPy是足够的。 …
阅读更多...
【Python】datetime 库

【Python】datetime 库

# timedelta(days, seconds, microseconds,milliseconds, minutes, hours, weeks) 默认按顺序传递参数 # 主要介绍 datetime.datetime 类 # 引入 from datetime import datetime today datetime.now() # 获取当前时间 2023-10-05 15:58:03.218651 today1 datetime.utcnow() #…
阅读更多...
经典算法-----汉诺塔问题

经典算法-----汉诺塔问题

前言 今天我们学习一个老经典的问题-----汉诺塔问题&#xff0c;可能在学习编程之前我们就听说过这个问题&#xff0c;那这里我们如何去通过编程的方式去解决这么一个问题呢&#xff1f;下面接着看。 汉诺塔问题 问题描述 这里是引用汉诺塔问题源自印度一个古老的传说&#x…
阅读更多...
Ubuntu 22.04 安装Nvidia显卡驱动、CUDA、cudnn

Ubuntu 22.04 安装Nvidia显卡驱动、CUDA、cudnn

GPU做深度学习比CPU要快很多倍&#xff0c;用Ubuntu跑也有一定的优势&#xff0c;但是安装Nvidia驱动有很多坑 Ubuntu版本&#xff1a;22.04.3 LTS 分区&#xff1a; /boot分配 1G &#xff0c;剩下都分给根目录/ 显卡&#xff1a;GTX 1050 Ti 坑1&#xff1a;用Ubuntu自带的 …
阅读更多...
ESP32上电到app_main（）的过程梳理

ESP32上电到app_main（）的过程梳理

前言 &#xff08;1&#xff09;如果有嵌入式企业需要招聘校园大使&#xff0c;湖南区域的日常实习&#xff0c;任何区域的暑假Linux驱动实习岗位&#xff0c;可C站直接私聊&#xff0c;或者邮件&#xff1a;zhangyixu02gmail.com&#xff0c;此消息至2025年1月1日前均有效 &am…
阅读更多...
【单片机】16-LCD1602和12864和LCD9648显示器

【单片机】16-LCD1602和12864和LCD9648显示器

1.LCD显示器相关背景 1.LCD简介 &#xff08;1&#xff09;显示器&#xff0c;常见显示器&#xff1a;电视&#xff0c;电脑 &#xff08;2&#xff09;LCD&#xff08;Liquid Crystal Display&#xff09;&#xff0c;液晶显示器&#xff0c;原理介绍 &#xff08;3&#xff…
阅读更多...
哈希表的总结

哈希表的总结

今天刷了力扣的第一题&#xff08;1. 两数之和 - 力扣&#xff08;LeetCode&#xff09;&#xff09;&#xff0c;是一道用暴力解法就可以完成的题目&#xff08;两个for循环&#xff09;,但是官方解答给出了用哈希表的解法&#xff0c;用空间换时间&#xff0c;时间复杂度从O(…
阅读更多...
Jmeter排查正则表达式提取器未生效问题

Jmeter排查正则表达式提取器未生效问题

今天在使用Jmeter的时候遇到一个很简单的问题&#xff0c;使用正则表达式提取token一直未生效&#xff0c;原因是正则表达式中多了一个空格。虽然问题很简单&#xff0c;但是觉得排查问题的方法很普适&#xff0c;所以记录下&#xff0c;也希望能够给遇到问题的大家一个参考。 …
阅读更多...
蓝桥杯每日一题2023.10.5

蓝桥杯每日一题2023.10.5

3420. 括号序列 - AcWing题库 题目描述 题目分析 对于这一我们需要有前缀知识完全背包 完全背包的朴素写法&#xff1a; #include<bits/stdc.h> using namespace std; const int N 1010; int n, m, v[N], w[N], f[N][N]; int main() {cin >> n >> m;fo…
阅读更多...
MySQL数据库入门到精通——进阶篇（3）

MySQL数据库入门到精通——进阶篇（3）

黑马程序员 MySQL数据库入门到精通——进阶篇&#xff08;3&#xff09; 1. 锁1.1 锁-介绍1.2 锁-全局锁1.3 锁-表级锁1.3.1 表级锁-表锁1.3.2 表级锁元数据锁( meta data lock&#xff0c;MDL)1.3.3 表级锁-意向锁1.3.4 表级锁意向锁测试 1.4 锁-行级锁1.4.1 行级锁-行锁1.4.2…
阅读更多...
计算机网络 （中科大郑烇老师）笔记（一）概论

计算机网络 （中科大郑烇老师）笔记（一）概论

目录 0 引言1 什么是Internet&#xff1f;1.1 网络、计算机网络、互联网1.2 什么是Internet&#xff1f;&#xff1a;从服务角度看 2 什么是协议&#xff1f;3 网络的结构&#xff08;子系统&#xff09;3.1 网络边缘3.2 网络核心&#xff1a;分组交换、线路交换3.3 接入网、物…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023