WebXR教学 07 项目5 贪吃蛇小游戏
WebXR教学 07 项目5 贪吃蛇小游戏
index.html
<!DOCTYPE html>
<html>
<head><title>3D贪吃蛇小游戏</title><style>body { margin: 0; }canvas { display: block; }#score {position: absolute;top: 20px;left: 20px;color: white;font-size: 24px;}</style>
</head>
<body><div id="score">Score: 0</div><script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script><script src="game.js"></script>
</body>
</html>
game.js
/*** 场景相关变量定义*/
// Three.js 场景对象
let scene, camera, renderer;
// 游戏主要对象：蛇和食物
let snake, food;
// 游戏得分
let score = 0;
// 游戏场地大小（网格单位）
const gridSize = 20;
// 蛇身和食物的单位大小（立方体边长）
const cubeSize = 1;
// 游戏循环时间控制
let lastTime = 0;
// 蛇移动的时间间隔（毫秒）
const moveInterval = 200;
// 游戏运行状态标志
let gameLoop = false;/*** 初始化游戏场景* 创建THREE.js场景、相机、渲染器等基本组件*/
function init() {// 创建THREE.js场景scene = new THREE.Scene();// 设置透视相机：视角75度，屏幕宽高比，近裁剪面0.1，远裁剪面1000camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);// 创建WebGL渲染器renderer = new THREE.WebGLRenderer();// 设置渲染器尺寸为窗口大小renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);// 设置相机位置和视角camera.position.set(10, 15, 20);camera.lookAt(0, 0, 0);// 初始化游戏场景组件createFloor(); // 创建地板snake = new Snake(); // 创建蛇food = createFood(); // 创建第一个食物// 添加键盘事件监听document.addEventListener('keydown', onKeyPress);// 启动游戏循环gameLoop = true;requestAnimationFrame(animate);
}/*** 贪吃蛇类定义* 包含蛇的属性和行为*/
class Snake {constructor() {// 存储蛇身体段的数组this.body = [];// 初始移动方向this.direction = 'right';// 创建蛇头（绿色立方体）const geometry = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize);const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });const head = new THREE.Mesh(geometry, material);this.body.push(head);scene.add(head);}/*** 蛇的移动逻辑* 包含移动、碰撞检测和生长机制*/move() {const head = this.body[0];const newHead = head.clone();// 根据当前方向更新头部位置switch(this.direction) {case 'right': newHead.position.x += cubeSize; break;case 'left': newHead.position.x -= cubeSize; break;case 'up': newHead.position.z -= cubeSize; break;case 'down': newHead.position.z += cubeSize; break;}// 边界碰撞检测const halfGrid = (gridSize * cubeSize) / 2 - cubeSize/2;if (newHead.position.x > halfGrid || newHead.position.x < -halfGrid || newHead.position.z > halfGrid || newHead.position.z < -halfGrid) {gameOver("离开地板范围！");return;}// 自身碰撞检测if (this.checkSelfCollision(newHead)) {gameOver("撞到自己了！");return;}// 食物碰撞检测及处理if (this.checkCollisionWithFood(newHead)) {scene.remove(food);food = createFood();score += 10;document.getElementById('score').textContent = `Score: ${score}`;} else {// 如果没有吃到食物，移除尾部scene.remove(this.body.pop());}// 添加新头部this.body.unshift(newHead);scene.add(newHead);}/*** 检测蛇头是否与身体碰撞* @param {THREE.Mesh} head - 新的蛇头位置* @returns {boolean} - 是否发生碰撞*/checkSelfCollision(head) {return this.body.some((segment, index) => {if (index <= 0) return false;const collision = Math.abs(head.position.x - segment.position.x) < 0.5 &&Math.abs(head.position.z - segment.position.z) < 0.5;return collision;});}/*** 检测是否吃到食物* @param {THREE.Mesh} head - 蛇头位置* @returns {boolean} - 是否吃到食物*/checkCollisionWithFood(head) {return Math.abs(head.position.x - food.position.x) < 0.1 &&Math.abs(head.position.z - food.position.z) < 0.1;}
}/*** 创建食物* 随机位置生成一个红色立方体* @returns {THREE.Mesh} - 食物对象*/
function createFood() {const geometry = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize);const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });const food = new THREE.Mesh(geometry, material);// 计算食物可生成的范围const maxRange = (gridSize / 2) - 1;// 随机生成食物位置food.position.x = (Math.floor(Math.random() * (maxRange * 2 + 1)) - maxRange) * cubeSize;food.position.z = (Math.floor(Math.random() * (maxRange * 2 + 1)) - maxRange) * cubeSize;// 确保食物不会出现在蛇身上while (snake.body.some(segment => Math.abs(segment.position.x - food.position.x) < 0.1 && Math.abs(segment.position.z - food.position.z) < 0.1)) {food.position.x = (Math.floor(Math.random() * (maxRange * 2 + 1)) - maxRange) * cubeSize;food.position.z = (Math.floor(Math.random() * (maxRange * 2 + 1)) - maxRange) * cubeSize;}scene.add(food);return food;
}/*** 创建游戏地板* 创建一个灰色平面作为游戏场地*/
function createFloor() {const geometry = new THREE.PlaneGeometry(gridSize * cubeSize, gridSize * cubeSize);const material = new THREE.MeshBasicMaterial({ color: 0x808080,side: THREE.DoubleSide});const floor = new THREE.Mesh(geometry, material);floor.rotation.x = Math.PI / 2;scene.add(floor);
}/*** 键盘按键处理* 处理方向键控制蛇的移动方向* @param {KeyboardEvent} event - 键盘事件对象*/
function onKeyPress(event) {switch(event.key) {case 'ArrowRight': snake.direction = 'right'; break;case 'ArrowLeft': snake.direction = 'left'; break;case 'ArrowUp': snake.direction = 'up'; break;case 'ArrowDown': snake.direction = 'down'; break;}
}/*** 游戏结束处理* @param {string} reason - 游戏结束原因*/
function gameOver(reason) {gameLoop = false;alert(`游戏结束！${reason}\n最终得分：${score}`);location.reload(); // 重置游戏
}/*** 游戏动画循环* @param {number} currentTime - 当前时间戳*/
function animate(currentTime) {if (!gameLoop) return;if (!lastTime) lastTime = currentTime;const deltaTime = currentTime - lastTime;// 控制蛇的移动速度if (deltaTime >= moveInterval) {snake.move();lastTime = currentTime;}renderer.render(scene, camera);requestAnimationFrame(animate);
}// 启动游戏
init();
相关文章：
WebXR教学 07 项目5 贪吃蛇小游戏
WebXR教学 07 项目5 贪吃蛇小游戏 index.html <!DOCTYPE html> <html> <head><title>3D贪吃蛇小游戏</title><style>body { margin: 0; }canvas { display: block; }#score {position: absolute;top: 20px;left: 20px;color: white;font-…...
2.1.3
# Load the data file_path finance数据集.csv data pd.__________(file_path) --- data pd.read_csv(file_path) # 识别数值列用于箱线图 numeric_cols data.select_dtypes(include[float64, int64]).__________ --- numeric_cols data.select_dtypes(include[flo…...
StreamCap v0.0.1 直播录制工具 支持批量录制和直播监控
—————【下 载 地 址】——————— 【本章下载一】：https://drive.uc.cn/s/2fa520a8880d4 【本章下载二】：https://pan.xunlei.com/s/VOQDt_3v0DYPxrql5y2zxgO1A1?pwd2kqi# 【百款黑科技】：https://ucnygalh6wle.feishu.cn/wiki/…...
小蜗牛拨号助手用户使用手册
一、软件简介 小蜗牛拨号助手是一款便捷实用的拨号辅助工具，能自动识别剪贴板中的电话号码，支持快速拨号操作。最小化或关闭窗口后，程序将在系统后台运行，还可设置开机自启，方便随时使用，提升拨号效率。 …...
哈夫曼树（Huffman Tree）
1. 基本概念 哈夫曼树（Huffman Tree），又称最优二叉树，是一种带权路径长度（WPL, Weighted Path Length）最短的二叉树。它主要用于数据压缩和编码优化，通过为不同权值的节点分配不同长度的…...
布隆过滤器和布谷鸟过滤器
原文链接：布隆过滤器和布谷鸟过滤器 布隆过滤器 介绍 布隆过滤器（Bloom Filter）是 1970 年由布隆提出的。它实际上是一个很长的二进制向量和一系列随机映射函数，检查值是“可能在集合中”还是“绝对不在集合中” 空间效率高&a…...
Vue+Vite学习笔记
Cesium与Vue集成：详解Cesium-Vue项目搭建与运行步骤指南 - 云原生实践 为什么按照这篇↑完成三步会有能打开的网址，不止localhost8080还有用127.0.0.1那个表示的。 用这个构建，出来的是localhost:5173？...
UE 材质基础 第一天
课程：虚幻引擎【UE5】材质宝典【初学者材质基础入门系列】-北冥没有鱼啊_-稍后再看-哔哩哔哩视频 随便记录一些 黑色是0到负无穷，白色是1到无穷 各向异性 有点类似于高光，可以配合切线来使用，R G B 相当于 X Y Z轴，切…...
网络编程中的直接内存与零拷贝
本篇文章会介绍 JDK 与 Linux 网络编程中的直接内存与零拷贝的相关知识，最后还会介绍一下 Linux 系统与 JDK 对网络通信的实现。 1、直接内存 所有的网络通信和应用程序中（任何语言），每个 TCP Socket 的内核中都有一个发送缓冲区…...
语音转文字
语音转文字工具大全 1. 网易 网易见外（网页） 地址：网易见外 - AI智能语音转写听翻平台 特点：完全免费，支持音频转文字，每日上限2小时 有道云笔记（安卓／iOS） 地址&a…...
软件设计师考试《综合知识》创建型设计模式考点分析
软件设计师考试《综合知识》创建型设计模式考点分析 1. 分值占比与考察趋势（75分制） 模式名称近5年题量分值占比高频考察点最新趋势抽象工厂模式45.33%产品族创建/跨平台应用结合微服务配置考查(2023)工厂方法模式56.67%单一产品扩展/日志系统与IoC容器…...
【八股战神篇】Java集合高频面试题
专栏简介 八股战神篇专栏是基于各平台共上千篇面经，上万道面试题，进行综合排序提炼出排序前百的高频面试题，并对这些高频八股进行关联分析，将每个高频面试题可能进行延伸的题目再次进行排序选出高频延伸八股题。面试官都是以点破…...
STM32F103定时器1每毫秒中断一次
定时器溢出中断，在程序设计中经常用到。在使用TIM1和TIM8溢出中断时，需要注意“TIM_TimeBaseStructure.TIM_RepetitionCounter0;”，它表示溢出一次，并可以设置中断标志位。 TIM1_Interrupt_Initializtion(1000,72); //当arr1…...
BC 范式与 4NF
接下来我们详细解释 BC 范式（Boyce-Codd范式，简称 BCNF），并通过具体例子说明其定义和应用。 一、BC范式的定义 BC范式（Boyce-Codd范式，BCNF）是数据库规范化理论中的一种范式，它比第…...
Data whale LLM universe
使用LLM API开发应用 基本概念 Prompt Prompt 最初指的是自然语言处理研究人员为下游任务设计的一种任务专属的输入模板。 Temperature 使用Temperature参数控制LLM生成结果的随机性和创造性，一般取值设置在0~1之间，当取值接近1的时候预测的随机性较…...
数据结构第七章（四）-B树和B+树
数据结构第七章（四） B树和B树一、B树1.B树2.B树的高度 二、B树的插入删除1.插入2.删除 三、B树1.B树2.B树的查找3.B树和B树的区别 总结 B树和B树 还记得我们的二叉排序树BST吗？比如就是下面这个： 结构体也就关键字和左右指针&…...
如何利用 Python 获取京东商品 SKU 信息接口详细说明
在电商领域，SKU（Stock Keeping Unit，库存进出计量的基本单元）信息是商品管理的核心数据之一。它不仅包含了商品的规格、价格、库存等关键信息，还直接影响到库存管理、价格策略和市场分析等多个方面。京东作为国内知名的…...
【机器学习】第二章模型的评估与选择
A.关键概念 2.1 经验误差和过拟合 经验误差与泛化误差：学习器在训练集上的误差为经验误差，在新样本上的误差为泛化误差 过拟合：学习器训练过度后，把训练样本自身的一些特点当作所有潜在样本具有一般性质，使得泛化性能…...
[PMIC]PMIC重要知识点总结
PMIC重要知识点总结 摘要：PMIC (Power Management Integrated Circuit) 是现代电子设备中至关重要的组件，负责电源管理，包括电压调节、电源转换、电池管理和功耗优化等。PMIC 中的数字部分主要涉及控制逻辑、状态机、寄存器配置、通信接口&am…...
LVGL- Calendar 日历控件
1 日历控件 1.1 日历背景 lv_calendar 是 LVGL（Light and Versatile Graphics Library）提供的标准 GUI 控件之一，用于显示日历视图。它支持用户查看某年某月的完整日历，还可以实现点击日期、标记日期、导航月份等操作。这个控件…...
ubuntu安装google chrome
更新系统 sudo apt update安装依赖 sudo apt install curl software-properties-common apt-transport-https ca-certificates -y导入 GPG key curl -fSsL https://dl.google.com/linux/linux_signing_key.pub | gpg --dearmor | sudo tee /usr/share/keyrings/google-chrom…...
如何开发专业小模型
在专业领域场景下，通过针对性优化大模型的词汇表、分词器和模型结构，确实可以实现参数规模的显著缩减而不损失专业能力。这种优化思路与嵌入式设备的字库剪裁有相似性，但需要结合大模型的特性进行系统性设计。以下从技术可行性、实现方法和潜…...
EXO 可以将 Mac M4 和 Mac Air 连接起来，并通过 Ollama 运行 DeepSeek 模型
EXO 可以将 Mac M4 和 Mac Air 连接起来，并通过 Ollama 运行 DeepSeek 模型。以下是具体实现方法： 1. EXO 的分布式计算能力 EXO 是一个支持 分布式 AI 计算 的开源框架，能够将多台 Mac 设备（如 M4 和 Mac Air）组合成…...
Git Worktree 使用
新入职了一家公司，发现不同项目用的使用一个 git 仓库管理。不久之后我看到这篇文章。 Git 的设计部分是为了支持实验。一旦你确定你的工作被安全地跟踪，并且存在安全的状态，以便在出现严重错误时可以恢复，你就不会害怕尝试新…...
【Linux网络】内网穿透
内网穿透 基本概念 内网穿透（Port Forwarding/NAT穿透） 是一种网络技术，主要用于解决处于 内网（局域网）中的设备无法直接被公网访问 的问题。 1. 核心原理 内网与公网的隔离：家庭、企业等局域网内的设备…...
反射机制动态解析
代码解释与注释 package com.xie.javase.reflect;import java.lang.reflect.Field; import java.lang.reflect.Modifier;public class ReflectTest01 {public static void main(String[] args) throws ClassNotFoundException {// 1. 获取java.util.HashMap类的Class对象Class…...
10 分钟打造一款超级马里奥小游戏，重拾20 年前的乐趣
我正在参加CodeBuddy「首席试玩官」内容创作大赛，本文所使用的 CodeBuddy 免费下载链接：腾讯云代码助手 CodeBuddy - AI 时代的智能编程伙伴 你好，我是悟空。 前言 小时候看到村里的大朋友家里都有一款 FC 游戏机，然后旁边还放…...
鸿蒙ArkUI体验：Hexo博客客户端开发心得
最近部门也在跟进鸿蒙平台的业务开发，自己主要是做 Android 开发，主要使用 Kotlin/Java 语言。，需要对新的开发平台和开发模式进行学习，在业余时间开了个项目练手，做了个基于 Hexo 博客内容开发的App。鸿蒙主要使用Ark…...
人工智能100问☞第25问：什么是循环神经网络（RNN）？
目录 一、通俗解释 二、专业解析 三、权威参考 循环神经网络（RNN）是一种通过“记忆”序列中历史信息来处理时序数据的神经网络，可捕捉前后数据的关联性，擅长处理语言、语音等序列化任务。 一、通俗解释 想象你在和朋友聊天，每说一句话都会根据之前的对话内容调整语气…...
】Zuul路由访问映射规则配置及使用（含源代码）（十二）)
【springcloud学习(dalston.sr1)】Zuul路由访问映射规则配置及使用（含源代码）（十二）
该系列项目整体介绍及源代码请参照前面写的一篇文章【springcloud学习(dalston.sr1)】项目整体介绍（含源代码）（一） springcloud学习（dalston.sr1）系统文章汇总如下： 【springcloud学习(dalston…...
STM32IIC协议基础及Cube配置
STM32IIC协议基础及Cube配置 一，IC协议简介1，核心特点2，应用场景 二，IC协议基础概念1，总线结构2，主从架构3，设备寻址4，起始和停止条件5，数据传输6，应答机制 三…...
Python异常模块和包
异常 当检测到一个错误时，Python解释器就无法继续执行了，反而出现了一些错误的提示，这就是所谓的“异常”, 也就是我们常说的BUG 例如：以r方式打开一个不存在的文件。 f open(‘python1.txt’,‘r’,encoding‘utf-8’) 当我们…...
每日算法刷题Day9 5.17:leetcode定长滑动窗口3道题，用时1h
9. 1652.拆炸弹(简单，学习) 1652. 拆炸弹 - 力扣（LeetCode） 思想 为了获得正确的密码，你需要替换掉每一个数字。所有数字会 同时 被替换。 如果 k > 0 ，将第 i 个数字用 接下来 k 个数字之和替换。如果 k < 0…...
题单：递归求和
宣布一个重要的事情，我的洛谷有个号叫 题目描述 给一个数组 a:a[0],a[1],...,a[n−1]a:a[0],a[1],...,a[n−1] 请用递归的方式出数组的所有数之和。 提示：递推方程 f(x)f(x−1)a[x]f(x)f(x−1)a[x]; 输入格式 第一行一个正整数 n (n≤100)n (n≤100)…...
手动实现 Transformer 模型
本文使用 Pytorch 库手动实现了传统 Transformer 模型中的多头自注意力机制、残差连接和层归一化、前馈层、编码器、解码器等子模块，进而实现了对 Transformer 模型的构建。 """ Title: 解析 Transformer Time: 2025/5/10 Author: Michael Jie &quo…...
【鸿蒙开发避坑】使用全局状态变量控制动画时，动画异常甚至动画方向与预期相反的原因分析以及解决方案
【鸿蒙开发避坑】使用全局状态变量控制动画，动画异常甚至动画方向相反的原因分析以及解决方案 一、问题复现1、问题描述2、问题示意图 二、原因深度解析1、查看文档2、调试3、原因总结：（1）第一次进入播放页面功能一切正常的原因&a…...
天拓四方锂电池卷绕机 PLC 物联网解决方案
近年来，锂电制造行业作为新能源领域的核心支柱产业，呈现出迅猛发展的态势，市场需求持续高涨。在此背景下，行业内对产品质量、生产效率以及成本控制等方面提出了更为严苛的要求。锂电制造流程涵盖混料、涂布、辊压、分切、制片、卷…...
RFID系统：技术解析与应用全景
一、技术架构与运行逻辑 RFID（Radio Frequency Identification）系统通过无线电波实现非接触式数据交互，其核心由三部分组成： 电子标签（Tag）： 无源标签：依赖读写器电磁场供电&…...
hbuilderX 安装Prettier格式化代码
一、打开插件安装 搜索输入：Prettier 安装后，重启hbuilderX ，再按AltShiftF 没安装Prettier格式化： import {saveFlow,getTemplate } from "../../api/flowTemplate.js"; 安装Prettier格式化后： import …...
Python-92：最大乘积区间问题
问题描述 小R手上有一个长度为 n 的数组 (n > 0)，数组中的元素分别来自集合 [0, 1, 2, 4, 8, 16, 32, 64, 128, 256, 512, 1024]。小R想从这个数组中选取一段连续的区间，得到可能的最大乘积。 你需要帮助小R找到最大乘积的区间，并输出这…...
--多点触控)
Compose笔记(二十三)--多点触控
这一节主要了解一下Compose中多点触控，在Jetpack Compose 中，多点触控处理需要结合Modifier和手势API来实现，一般通过组合 pointerInput、TransformableState 和 TransformModifier 来创建支持缩放、旋转和平移的组件。 一、 API 1. Pointer…...
2025.05.17淘天机考笔试真题第一题
📌 点击直达笔试专栏 👉《大厂笔试突围》 💻 春秋招笔试突围在线OJ 👉 笔试突围OJ 01. 魔法棋盘构造 问题描述 LYA 正在设计一款魔法棋盘游戏。游戏棋盘由 2 n 2 \times n...
python的漫画网站管理系统
目录 技术栈介绍具体实现截图系统设计研究方法：设计步骤设计流程核…...
系统架构设计（十）：结构化编程
定义 结构化编程是一种遵循清晰逻辑结构、避免使用 goto 的编程方法。它强调使用有限的三种基本控制结构来组织程序，提高程序的可读性、可维护性和可测试性。 它是现代程序设计的基础，被广泛应用于命令式语言（如 C、Pascal、Java࿰…...
系统架构设计（七）：数据流图
定义 数据流图（Data Flow Diagram, DFD）是一种用于表示信息系统数据流转及处理过程的图形工具。 它反映系统功能及数据之间的关系，是结构化分析与设计的重要工具。 主要符号 符号说明描述举例方框外部实体（源或终点）…...
BrepGen中的几何特征组装与文件保存详解 deepwiki occwl OCC包装库
有这种好东西我怎么不知道 AutodeskAILab/occwl: Lightweight Pythonic wrapper around pythonocc 组装几何特征以创建B-rep模型 保存为STEP和STL文件细说 Fast 快速 Searched across samxuxiang/BrepGen Ill explain how BrepGen assembles geometric features to create B-r…...
QT6 源（105）篇二：阅读与注释 QAction，给出源代码
（5）本源代码来自于头文件 qaction . h ： #ifndef QACTION_H #define QACTION_H#include <QtGui/qtguiglobal.h> #if QT_CONFIG(shortcut) # include <QtGui/qkeysequence.h> #endif #include <QtGui/qicon.h> #include &…...
复旦微FMQL调试笔记：PS网口
引言 FPGA，全程现场可编程门阵列，是指一切通过软件手段更改、配置器件内部连接结构和逻辑单元，完成既定设计功能的数字集成电路。换个简单通俗的介绍方式，就好比一个全能的运动员，FPGA就是这么神奇的可以通过设定而实…...
SpringBoot启动流程深入分析
文章目录 背景启动流程listeners.starting先获取运行监听器获取SpringApplicationRunListener的实例监听器接口从spring.factories中加载数据，这里有本地缓存监听启动发布starting事件 prepareEnvironment准备环境获取或创建环境配置环境 createApplicationContext创…...
Linux - 2.系统命令
1.帮助命令 1.help [root@localhost /]# cp --help1.查看命令的信息和参数2.只能显示shell内部的命令信息3.help命令第一部分是概述，第二部分是参数详解，第三部分是说明和注意 # 使用语法 Usage: cp [OPTION]... [-T] SOURCE DESTor: cp [OPTION]... SOURCE... DIRECTORYor:…...