当前位置： 首页 > article >正文

AI4CODE】3 Trae 锤一个贪吃蛇的小游戏

article 2026/3/14 20:36:16

【AI4CODE】目录

【AI4CODE】1 Trae CN 锥安装配置与迁移

【AI4CODE】2 Trae 锤一个 To-Do-List

这次还是采用 HTML/CSS/JAVASCRIPT 技术栈 Trae 锤一个贪吃蛇的小游戏。
在这里插入图片描述

1 环境准备

创建一个 Snake 的子文件夹，清除以前的会话记录。
在这里插入图片描述

2 开始构建

2.1 输入会话提词

比如：

用html/css/javascript技术栈构建一个简洁美观的贪吃蛇小游戏，要求有开始游戏按钮，保存最高得分记录到本地

2.2 思考过程

在这里插入图片描述

2.3 构建过程

在这里插入图片描述
在这里插入图片描述

2.4 Live Server 启动服务试试

画面出来了，开始游戏发现，蛇的移动数据太快了，修改一下移动速度。
在这里插入图片描述
输入提词：蛇的移动数据太快了

了解您希望调整贪吃蛇的移动速度。当前游戏逻辑使用requestAnimationFrame实现循环，可以通过添加移动间隔控制机制来调节速度。建议在update函数中增加时间间隔判断，例如每200毫秒更新一次蛇的位置。同时保留原有动画帧调用以保证画面流畅。这样既能保持画面渲染流畅度，又能独立控制蛇的移动速度。

现在为贪吃蛇游戏添加移动间隔控制机制来降低移动速度。将在game.js中新增lastMoveTime变量和时间间隔判断逻辑，保持画面流畅的同时实现速度控制。

2.5 OK 可以玩了

在这里插入图片描述
蛇的移动移动速度，也可以自己修改 game.js的

const moveInterval = 300;

这里的单位是毫秒。

3 代码贴出来

所有的代码都 Trae 自动锤出来的，我没有写一行代码，共三个代码文件：index.html/game.js/style.css

3.1 Index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>经典贪吃蛇</title><link rel="stylesheet" href="style.css">
</head>
<body><div class="game-container"><canvas id="gameCanvas" width="400" height="400"></canvas><div class="control-panel"><button id="startBtn" class="game-btn">开始游戏</button><div class="score-board"><span>当前得分：<span id="currentScore">0</span></span><span>最高得分：<span id="highScore">0</span></span></div></div></div><script src="game.js"></script>
</body>
</html>

3.2 Style.css

body {display: flex;justify-content: center;align-items: center;min-height: 100vh;margin: 0;background: #2c3e50;font-family: Arial, sans-serif;
}.game-container {position: relative;background: #ecf0f1;padding: 20px;border-radius: 10px;box-shadow: 0 0 20px rgba(0,0,0,0.3);
}#gameCanvas {border: 2px solid #34495e;
}.control-panel {margin-top: 20px;display: flex;flex-direction: column;align-items: center;
}.game-btn {padding: 12px 30px;font-size: 18px;background: #27ae60;color: white;border: none;border-radius: 5px;cursor: pointer;transition: background 0.3s;
}.game-btn:hover {background: #219a52;
}.score-board {margin-top: 15px;font-size: 16px;color: #2c3e50;display: flex;gap: 20px;
}@media (max-width: 480px) {#gameCanvas {width: 300px;height: 300px;}
}

3.3 Game.js

const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const startBtn = document.getElementById('startBtn');
const currentScoreSpan = document.getElementById('currentScore');
const highScoreSpan = document.getElementById('highScore');const gridSize = 20;
let snake = [];
let food = {};
let direction = 'right';
let nextDirection = 'right';
let gameLoop;
let score = 0;
let highScore = localStorage.getItem('snakeHighScore') || 0;highScoreSpan.textContent = highScore;function initGame() {snake = [{x: 5, y: 5}];score = 0;currentScoreSpan.textContent = score;direction = 'right';nextDirection = 'right';generateFood();
}function generateFood() {food = {x: Math.floor(Math.random() * (canvas.width/gridSize)),y: Math.floor(Math.random() * (canvas.height/gridSize))};// 防止食物生成在蛇身上while(snake.some(segment => segment.x === food.x && segment.y === food.y)) {food = {x: Math.floor(Math.random() * (canvas.width/gridSize)),y: Math.floor(Math.random() * (canvas.height/gridSize))};}
}function update() {const head = {...snake[0]};direction = nextDirection;switch(direction) {case 'up': head.y--; break;case 'down': head.y++; break;case 'left': head.x--; break;case 'right': head.x++; break;}// 碰撞检测if (head.x < 0 || head.x >= canvas.width/gridSize || head.y < 0 || head.y >= canvas.height/gridSize ||snake.some(segment => segment.x === head.x && segment.y === head.y)) {gameOver();return;}snake.unshift(head);// 吃食物if (head.x === food.x && head.y === food.y) {score += 10;currentScoreSpan.textContent = score;generateFood();} else {snake.pop();}
}function draw() {// 清空画布ctx.fillStyle = '#ecf0f1';ctx.fillRect(0, 0, canvas.width, canvas.height);// 绘制蛇ctx.fillStyle = '#27ae60';snake.forEach(segment => {ctx.fillRect(segment.x*gridSize, segment.y*gridSize, gridSize-2, gridSize-2);});// 绘制食物ctx.fillStyle = '#e74c3c';ctx.fillRect(food.x*gridSize, food.y*gridSize, gridSize-2, gridSize-2);
}function gameOver() {cancelAnimationFrame(gameLoop);startBtn.textContent = '开始游戏';if (score > highScore) {highScore = score;localStorage.setItem('snakeHighScore', highScore);highScoreSpan.textContent = highScore;}
}// 事件监听
let lastMoveTime = 0;
const moveInterval = 300;function animate(timestamp) {if (!lastMoveTime) {lastMoveTime = timestamp;}const elapsed = timestamp - lastMoveTime;if (elapsed >= moveInterval) {update();lastMoveTime = timestamp;}draw();gameLoop = requestAnimationFrame(animate);
}// 修改游戏启动逻辑
startBtn.addEventListener('click', () => {if (!gameLoop) {initGame();startBtn.textContent = '暂停游戏';lastMoveTime = 0; // 重置计时器gameLoop = requestAnimationFrame(animate);} else {cancelAnimationFrame(gameLoop);gameLoop = null;startBtn.textContent = '继续游戏';}
});// 键盘控制
document.addEventListener('keydown', (e) => {switch(e.key.toLowerCase()) {case 'arrowup':case 'w':if (direction !== 'down') nextDirection = 'up';break;case 'arrowdown':case 's':if (direction !== 'up') nextDirection = 'down';break;case 'arrowleft':case 'a':if (direction !== 'right') nextDirection = 'left';break;case 'arrowright':case 'd':if (direction !== 'left') nextDirection = 'right';break;}
});

本文完

相关文章：

AI4CODE】3 Trae 锤一个贪吃蛇的小游戏

【AI4CODE】目录 【AI4CODE】1 Trae CN 锥安装配置与迁移 【AI4CODE】2 Trae 锤一个 To-Do-List 这次还是采用 HTML/CSS/JAVASCRIPT 技术栈 Trae 锤一个贪吃蛇的小游戏。 1 环境准备 创建一个 Snake 的子文件夹&#xff0c;清除以前的会话记录。 2 开始构建 2.1 输入会…...

编程日记 2026/2/15 0:09:06

【语料数据爬虫】Python爬虫|批量采集会议纪要数据（1）

前言 本文是该专栏的第2篇，后面会持续分享Python爬虫采集各种语料数据的的干货知识，值得关注。 在本文中，笔者将主要来介绍基于Python，来实现批量采集“会议纪要”数据。同时，本文也是采集“会议纪要”数据系列的第1篇。 采集相关数据的具体细节部分以及详细思路逻辑，笔…...

编程日记 2026/2/14 21:08:37

Linux 进程的一生（一）：进程与线程的创建机制解析

在 Linux 操作系统中&#xff0c;每个任务都以「进程」的形式存在。但 Linux 下的「线程」又是什么&#xff1f;Linux 并没有单独定义一种全新数据结构来表示线程&#xff0c;而是将线程视为一种特殊的进程——一种共享资源的轻量级进程。然而&#xff0c;在具体实现和运行机制…...

编程日记 2026/3/12 13:46:23

【面试题集合】

目录 强缓存VS协商缓存**一、强缓存&#xff08;本地缓存&#xff09;**1. **定义**2. **核心 HTTP 头**3. **缓存生效流程**4. **应用场景** **二、协商缓存&#xff08;条件请求&#xff09;**1. **定义**2. **核心 HTTP 头**3. **缓存生效流程**4. **应用场景** **三、强缓存…...

编程日记 2026/3/7 3:25:12

【Academy】SSRF ------ Server-side request forgery

SSRF ------ Server-side request forgery 1. 什么是 SSRF&#xff1f;2. SSRF 攻击的影响是什么&#xff1f;3. 常见的 SSRF 攻击3.1 针对服务器的 SSRF 攻击3.2 针对其他后端系统的 SSRF 攻击 4. 规避常见的 SSRF 防御4.1 具有基于黑名单的输入过滤器的 SSRF4.2 具有基于白名…...

编程日记 2026/3/11 19:05:51

Git 的详细介绍及用法

一、Git 的优点 分布式版本控制 每个开发者都拥有完整的仓库副本&#xff0c;无需依赖中央服务器&#xff08;如 SVN&#xff09;。支持离线操作&#xff08;提交、查看历史、创建分支等&#xff09;。 高效的分支管理 创建和切换分支速度快&#xff08;几乎是瞬间完成&#x…...

编程日记 2026/2/14 21:32:23

Ubuntu22.04安装数据

数据库安装步骤&#xff1a; sudo apt-get update sudo apt install mysql-server mysql-client sudo systemctl start mysql sudo systemctl status mysql &#xff08;1&#xff09;在命令行登录 MySQL 数据库&#xff0c;并使用 mysql 数据库 &#xff08;必须使用这个…...

编程日记 2026/2/18 13:58:51

2025 ubuntu24系统宿主机上在线安装mysql数据库完整演示

说明&#xff1a;这是ubuntu24系统和安装后mysql的版本 rootmaster:/home/ubuntu# cat /etc/os-release PRETTY_NAME"Ubuntu 24.04.2 LTS" NAME"Ubuntu" VERSION_ID"24.04" VERSION"24.04.2 LTS (Noble Numbat)" VERSION_CODENAMEnob…...

编程日记 2026/2/16 12:23:06

STM32之I2C硬件外设

注意&#xff1a;硬件I2C的引脚是固定的 SDA和SCL都是复用到外部引脚。 SDA发送时数据寄存器的数据在数据移位寄存器空闲的状态下进入数据移位寄存器&#xff0c;此时会置状态寄存器的TXE为1&#xff0c;表示发送寄存器为空&#xff0c;然后往数据控制寄存器中一位一位的移送数…...

编程日记 2026/3/11 19:06:39

windows版本的时序数据库TDengine安装以及可视化工具

了解时序数据库TDengine&#xff0c;可以点击官方文档进行详细查阅 安装步骤 首先找到自己需要下载的版本&#xff0c;这边我暂时只写windows版本的安装 首先我们需要点开官网&#xff0c;找到发布历史&#xff0c;目前TDengine的windows版本只更新到3.0.7.1&#xff0c;我们…...

编程日记 2026/3/12 10:11:00

【AI】单台10卡4090 openEuler服务器离线部署kasm workspace 提供简单的GPU云服务 虚拟化桌面

下载网址 Downloads | Kasm Workspaces 文件连接 wget https://kasm-static-content.s3.amazonaws.com/kasm_release_plugin_images_amd64_1.16.1.98d6fa.tar.gz wget https://kasm-static-content.s3.amazonaws.com/kasm_release_1.16.1.98d6fa.tar.gz wget https://kasm-st…...

编程日记 2026/3/12 8:30:48

NetAssist 5.0.14网络助手基础使用及自动应答使用方案

以下是NetAssist v5.0.14自动应答功能的详细使用步骤&#xff1a; 一、基础准备&#xff1a; 工具下载网址页面&#xff1a;https://www.cmsoft.cn/resource/102.html 下载安装好后&#xff0c;根据需要可以创建多个server&#xff0c;双击程序图标运行即可&#xff0c;下面…...

编程日记 2026/2/20 10:37:10

《深度解析DeepSeek-M8：量子经典融合，重塑计算能效格局》

在科技飞速发展的今天&#xff0c;量子计算与经典算法的融合成为了前沿领域的焦点。DeepSeek-M8的“量子神经网络混合架构”&#xff0c;宛如一把钥匙&#xff0c;开启了经典算法与量子计算协同推理的全新大门&#xff0c;为诸多复杂问题的解决提供了前所未有的思路。 量子计算…...

编程日记 2026/2/15 18:44:51

力扣1251年

正确写法&#xff1a; select p.product_id, ifnull(round(sum(units*price)/sum(units),2),0) average_price from prices p left join unitssold u on u.product_idp.product_id and u.purchase_date between start_date and end_date group by p.product_id; 错误写法&a…...

编程日记 2025/5/17 23:39:56

【写作模板】JosieBook的写作模板

文章目录 ⭐前言⭐一、设计模式怎样解决设计问题&#xff1f;&#x1f31f;1、寻找合适的对象✨(1)✨(2)✨(3) &#x1f31f;2、决定对象的粒度&#x1f31f;3、指定对象接口&#x1f31f;4、描述对象的实现&#x1f31f;5、运用复用机制&#x1f31f;6、关联运行时和编译时的结…...

编程日记 2026/2/15 15:04:02

47.HarmonyOS NEXT 登录模块开发教程（二）：一键登录页面实现

温馨提示&#xff1a;本篇博客的详细代码已发布到 git : https://gitcode.com/nutpi/HarmonyosNext 可以下载运行哦&#xff01; HarmonyOS NEXT 登录模块开发教程&#xff08;二&#xff09;&#xff1a;一键登录页面实现 文章目录 HarmonyOS NEXT 登录模块开发教程&#xff0…...

编程日记 2026/3/5 0:21:15

5.1 程序调试

版权声明&#xff1a;本文为博主原创文章&#xff0c;转载请在显著位置标明本文出处以及作者网名&#xff0c;未经作者允许不得用于商业目的 本节中为了演示方便&#xff0c;使用的代码如下&#xff1a; 【例 5.1】【项目&#xff1a;code5-001】程序的调试。 static void Ma…...

编程日记 2026/3/12 2:07:10

Cursor初体验：excel转成CANoe的vsysvar文件

今天公司大佬先锋们给培训了cursor的使用&#xff0c;还给注册了官方账号&#xff01;跃跃欲试&#xff0c;但是测试任务好重&#xff0c;结合第三方工具开发也是没有头绪。 但巧的是&#xff0c;刚好下午有同事有个需求&#xff0c;想要把一个几千行的excel转成canoe的系统变…...

编程日记 2026/3/12 8:18:16

vue3-element-admin 前后端本地启动联调

一、后端环境准备 1.1、下载地址 gitee 下载地址 1.2、环境要求 JDK 17 1.3、项目启动 克隆项目 git clone https://gitee.com/youlaiorg/youlai-boot.git数据库初始化 执行 youlai_boot.sql 脚本完成数据库创建、表结构和基础数据的初始化。 修改配置 application-dev.y…...

编程日记 2026/3/11 23:26:44

emacs使用mongosh的方便工具发布

github项目地址: GitHub - csfreebird/emacs_mongosh: 在emacs中使用mongosh快速登录mongodb数据库 * 用途 在emacs中使用mongosh快速登录mongodb数据库&#xff0c; 操作方法: M-x mongosh, 输入数据库名称&#xff0c;然后就可以自动登录&#xff0c;前提是你已经配置好了…...

编程日记 2026/1/29 0:43:59

《MySQL数据库从零搭建到高效管理｜库的基本操作》

目录 一、数据库的操作 1.1 展示数据库 1.2 创建数据库 1.3 使用数据库 1.4 查看当前数据库 1.5 删除数据库 1.6 小结 二、常用数据类型 2.1 数值类型 2.2 字符串类型 2.3 日期类型 一、数据库的操作 打开MySQL命令行客户端&#xff0c;安装完MySQL后会有两个客户端…...

编程日记 2026/3/12 7:15:44

Linux Shell 脚本编程极简入门指南

一、学习前提准备 ✅ 环境要求&#xff1a; Linux系统&#xff08;Ubuntu/CentOS等&#xff09;或 WSL (Windows用户) 任意文本编辑器&#xff08;推荐VSCode/Vim&#xff09; 基础命令行操作能力 &#x1f50d; 验证环境&#xff1a; # 查看系统默认Shell echo $SHELL #…...

编程日记 2026/1/31 16:23:48

多视图几何--相机标定--从0-1理解张正友标定法

1基本原理 1.1 单应性矩阵&#xff08;Homography&#xff09;的建立 相机模型&#xff1a;世界坐标系下棋盘格平面&#xff08;Z0&#xff09;到图像平面的投影关系为&#xff1a; s [ u v 1 ] K [ r 1 r 2 t ] [ X Y 1 ] s \begin{bmatrix} u \\ v \\ 1 \end{bmatrix} K…...

编程日记 2026/2/16 4:28:07

Manus 一码难求，MetaGPT、OpenManus、Camel AI 会是替代方案吗？

Manus 一码难求&#xff0c;MetaGPT、OpenManus、Camel AI 会是替代方案吗&#xff1f; 一、Manus 的现象与问题 Manus 作为一款号称“全球首个通用 AI 智能体”的产品&#xff0c;凭借其强大的功能和新颖的营销策略迅速走红。然而&#xff0c;其封闭的邀请码机制和高昂的使用…...

编程日记 2026/3/14 9:21:16

mac使用Homebrew安装miniconda（mac搭建python环境），并在IDEA中集成miniconda环境

一、安装Homebrew mac安装brew 二、使用Homebrew安装miniconda brew search condabrew install miniconda安装完成后的截图&#xff1a; # 查看是否安装成功 brew list环境变量&#xff08;无需手动配置&#xff09; 先执行命令看能不能正常返回&#xff0c;如果不能正常…...

编程日记 2026/2/18 4:54:04

Linux基础开发工具—vim

目录 1、vim的概念 2、vim的常见模式 2.1 演示切换vim模式 3、vim命令模式常用操作 3.1 移动光标 3.2 删除文字 3.3 复制 3.4 替换 4、vim底行模式常用命令 4.1 查找字符 5、vim的配置文件 1、vim的概念 Vim全称是Vi IMproved&#xff0c;即说明它是Vi编辑器的增强…...

编程日记 2026/3/12 19:21:13

【C++】数据结构 队列的实现

本篇博客给大家带来的是用C语言来实现数据结构的队列的实现&#xff01; &#x1f41f;&#x1f41f;文章专栏&#xff1a;数据结构 &#x1f680;&#x1f680;若有问题评论区下讨论&#xff0c;我会及时回答 ❤❤欢迎大家点赞、收藏、分享&#xff01; 今日思想&#xff1a;你…...

编程日记 2026/2/19 11:39:47

macOS 终端优化

macOS 安装、优化、还原、升级 Oh My Zsh 完全指南 &#x1f680; Oh My Zsh 是 macOS 终端增强的利器&#xff0c;它能提供强大的自动补全、主题定制和插件支持&#xff0c;让你的终端更高效、更炫酷。本文将全面介绍 如何安装、优化、还原、重新安装和升级 Oh My Zsh&#x…...

编程日记 2026/3/13 17:50:32

大语言模型-1.2-大模型技术基础

简介 本博客内容是《大语言模型》一书的读书笔记&#xff0c;该书是中国人民大学高瓴人工智能学院赵鑫教授团队出品&#xff0c;覆盖大语言模型训练与使用的全流程&#xff0c;从预训练到微调与对齐&#xff0c;从使用技术到评测应用&#xff0c;帮助学员全面掌握大语言模型的…...

编程日记 2026/3/10 22:27:01

Flutter 按钮组件 TextButton 详解

目录 1. 引言 2. TextButton 的基本用法 3. 主要属性 4. 自定义按钮样式 4.1 修改文本颜色 4.2 添加背景色 4.3 修改按钮形状和边距 4.4 样式定制 5. 高级应用技巧 5.1 图标文本组合 5.2 主题统一配置 5.3 动态交互 6. 性能优化与注意事项 6.1 点击区域优化 6.…...

编程日记 2026/3/4 20:12:10