提起 贪吃蛇 ，谁没在诺基亚上玩过？现在这个"贪食蛇吃果实"版本，不仅有经典的玩法------吃东西变长、碰到墙壁或自己就 GG，还多了点新鲜感：各种水果等你吃，让整个游戏更有趣。
如果从头开发，要做的事可不少：蛇的移动逻辑、拐弯动画、吃东西变长、随机生成水果、碰撞检测、游戏结束判定......每一步都得小心处理。
但用 Trae IDE，只要一句话，一个完整的"升级版贪吃蛇"就能立刻跑起来。
💡 我想要的玩法
这次的设想很清楚：
- 蛇要自由移动：玩家用方向键控制上下左右转向；
- 水果要多样化：不只是苹果，还能吃香蕉、西瓜、草莓；
- 吃到就变长：每吃一个水果，蛇身就多一截，难度也随之增加；
- 碰到就结束：撞墙、撞到自己，游戏直接 Game Over；
- 画面简洁可爱：带点卡通感，看着舒服。
于是我只输入一句：
"生成一个贪食蛇游戏，蛇吃到水果后变长，避免碰到墙壁或自己。"
✨ Trae 的神速实现
几秒钟后，Trae 自动交付了一个能直接玩的 **"贪食蛇吃果实"**：
✅ 蛇的移动顺滑 ：转弯不卡顿，操作跟手感很舒服； ✅ 多种水果随机生成 ：不同水果出现的位置、数量全是随机的； ✅ 变长逻辑完美 ：每吃一次水果，蛇身立刻加一节； ✅ 碰撞检测精准 ：不管是撞墙还是咬到自己，都会立刻结束游戏； ✅ 界面可爱清新：蛇是小方块，水果有不同颜色和小图标。
🧩 试玩体验
第一次上手就有种"爷青回"的感觉：
🐍 开局蛇短短的 ，随便吃吃水果都能悠闲游走； 🍉 吃到香蕉和西瓜后 ，蛇身越来越长，地图开始"拥挤"； 💥 一不小心拐弯撞到自己，那种"明明只差一步就能吃到下一个水果"的懊恼感让我立刻点了"再来一局"。
Trae 生成的版本保留了经典贪吃蛇的魅力，还加了点小彩蛋（比如不同水果给的分数不同）。
🛠 想玩出花？一句话搞定
Trae 最大的乐趣就是 随时说，随时变，比如：
- "加个毒蘑菇，吃了会变短" → 游戏突然多了"要挑着吃"的策略感。
- "让水果会闪烁并消失" → 抢水果的紧迫感瞬间拉满。
- "加入关卡模式" → 第一关简单地图，后面地图越来越复杂。
- "加上双人模式" → 两条蛇一起抢水果，混战更刺激。
一句话就能扩展玩法，连核心逻辑都不用自己改。
🎮 过去 vs 现在
过去写贪吃蛇：
- 设计 蛇的移动网格逻辑；
- 写 吃东西变长的机制；
- 调 水果随机生成算法；
- 再实现 碰撞检测和游戏结束判定。
又累又容易出错。
现在有了 Trae： 👉 一句话，核心玩法全搞定； 👉 想扩展，就再说几句，Trae 自动完成。
开发从"低头撸代码"变成了"抬头聊创意"。
✅ 结语
如果你也想做一个 带点新鲜感的贪吃蛇，打开 Trae，只要输入：
"生成一个贪食蛇游戏，蛇吃到水果后变长，避免碰到墙壁或自己。"
几秒后，一个经典却不失新意的贪吃蛇就能出现在你屏幕上：蛇游得流畅、吃水果变长、玩法丰富，还能继续升级更多花样。
这就是 Trae 的魔力 ------ 经典玩法新生，开发体验也焕然一新。
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>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background: linear-gradient(to bottom right, #1a1a2e, #16213e);
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
}
.game-title {
font-size: 36px;
margin-bottom: 20px;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
color: #e94560;
}
.game-container {
position: relative;
width: 500px;
height: 500px;
background-color: rgba(0, 0, 0, 0.2);
border-radius: 10px;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
overflow: hidden;
margin-bottom: 20px;
}
#game-canvas {
background-color: rgba(15, 52, 96, 0.5);
border-radius: 10px;
}
.score-container {
display: flex;
justify-content: space-between;
width: 500px;
margin-bottom: 15px;
}
.score-display, .high-score-display {
font-size: 24px;
font-weight: bold;
color: #fff;
text-shadow: 0 0 5px rgba(233, 69, 96, 0.5);
}
.controls {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
.control-button {
padding: 12px 25px;
font-size: 16px;
font-weight: bold;
background-color: #e94560;
color: #fff;
border: none;
border-radius: 30px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(233, 69, 96, 0.3);
}
.control-button:hover {
background-color: #d63d57;
transform: translateY(-2px);
box-shadow: 0 7px 20px rgba(233, 69, 96, 0.4);
}
.control-button:active {
transform: translateY(1px);
box-shadow: 0 3px 10px rgba(233, 69, 96, 0.3);
}
.game-over {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(26, 26, 46, 0.9);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 20;
display: none;
border-radius: 10px;
}
.game-over-title {
font-size: 36px;
font-weight: bold;
color: #e94560;
margin-bottom: 20px;
text-shadow: 0 0 10px rgba(233, 69, 96, 0.5);
}
.final-score, .highest-score {
font-size: 24px;
color: #fff;
margin-bottom: 10px;
}
.mobile-controls {
display: none;
margin-top: 20px;
}
.mobile-controls button {
width: 60px;
height: 60px;
font-size: 24px;
background-color: rgba(233, 69, 96, 0.8);
color: white;
border: none;
border-radius: 50%;
margin: 5px;
cursor: pointer;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.mobile-controls .row {
display: flex;
justify-content: center;
}
@media (max-width: 768px) {
.game-container {
width: 350px;
height: 350px;
}
.score-container {
width: 350px;
}
.mobile-controls {
display: block;
}
}
.difficulty-selector {
margin-bottom: 15px;
}
.difficulty-selector select {
padding: 8px 15px;
font-size: 16px;
background-color: rgba(15, 52, 96, 0.8);
color: white;
border: 2px solid #e94560;
border-radius: 20px;
outline: none;
}
.snake-segment {
position: absolute;
border-radius: 50%;
box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}
.food {
position: absolute;
border-radius: 50%;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
}
</style>
</head>
<body>
<h1 class="game-title">贪吃蛇游戏</h1>
<div class="score-container">
<div class="score-display" id="score-display">分数: 0</div>
<div class="high-score-display" id="high-score-display">最高分: 0</div>
</div>
<div class="difficulty-selector">
<select id="difficulty-select">
<option value="easy">简单</option>
<option value="medium" selected>中等</option>
<option value="hard">困难</option>
</select>
</div>
<div class="game-container">
<canvas id="game-canvas" width="500" height="500"></canvas>
<div class="game-over" id="game-over">
<h2 class="game-over-title">游戏结束!</h2>
<p class="final-score">你的分数: <span id="final-score">0</span></p>
<p class="highest-score">最高分: <span id="highest-score">0</span></p>
<button class="control-button" id="restart-button">重新开始</button>
</div>
</div>
<div class="controls">
<button class="control-button" id="start-button">开始游戏</button>
<button class="control-button" id="pause-button">暂停</button>
</div>
<div class="mobile-controls">
<div class="row">
<button id="up-button">↑</button>
</div>
<div class="row">
<button id="left-button">←</button>
<button id="down-button">↓</button>
<button id="right-button">→</button>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
// 游戏配置
const config = {
gridSize: 25, // 网格大小
gameSpeed: 150, // 游戏速度（毫秒）
canvasSize: 500, // 画布大小
initialSnakeLength: 3, // 初始蛇的长度
speedIncrement: 5, // 每次加速减少的毫秒数
minSpeed: 50 // 最小速度（最快）
};
// 难度设置
const difficulties = {
easy: { gameSpeed: 180, speedIncrement: 3 },
medium: { gameSpeed: 150, speedIncrement: 5 },
hard: { gameSpeed: 120, speedIncrement: 8 }
};
// 获取DOM元素
const canvas = document.getElementById('game-canvas');
const ctx = canvas.getContext('2d');
const scoreDisplay = document.getElementById('score-display');
const highScoreDisplay = document.getElementById('high-score-display');
const finalScore = document.getElementById('final-score');
const highestScore = document.getElementById('highest-score');
const gameOverScreen = document.getElementById('game-over');
const startButton = document.getElementById('start-button');
const pauseButton = document.getElementById('pause-button');
const restartButton = document.getElementById('restart-button');
const difficultySelect = document.getElementById('difficulty-select');
const upButton = document.getElementById('up-button');
const downButton = document.getElementById('down-button');
const leftButton = document.getElementById('left-button');
const rightButton = document.getElementById('right-button');
// 计算单元格大小
const cellSize = config.canvasSize / config.gridSize;
// 游戏状态
let snake = [];
let food = {};
let direction = 'right';
let nextDirection = 'right';
let score = 0;
let highScore = localStorage.getItem('snakeHighScore') || 0;
let gameInterval = null;
let isPaused = false;
let isGameOver = false;
let currentDifficulty = 'medium';
// 颜色设置
const colors = {
snakeHead: '#4CAF50',
snakeBody: '#8BC34A',
snakeBorder: '#388E3C',
food: '#e94560',
background: 'rgba(15, 52, 96, 0.5)'
};
// 初始化游戏
function initGame() {
// 重置游戏状态
snake = [];
score = 0;
direction = 'right';
nextDirection = 'right';
isPaused = false;
isGameOver = false;
// 应用难度设置
applyDifficulty();
// 创建初始蛇
for (let i = config.initialSnakeLength - 1; i >= 0; i--) {
snake.push({ x: i, y: 0 });
}
// 生成食物
generateFood();
// 更新分数显示
updateScore();
updateHighScore();
// 隐藏游戏结束屏幕
gameOverScreen.style.display = 'none';
}
// 应用难度设置
function applyDifficulty() {
currentDifficulty = difficultySelect.value;
config.gameSpeed = difficulties[currentDifficulty].gameSpeed;
config.speedIncrement = difficulties[currentDifficulty].speedIncrement;
}
// 生成食物
function generateFood() {
// 随机生成食物位置，确保不在蛇身上
let foodPosition;
do {
foodPosition = {
x: Math.floor(Math.random() * config.gridSize),
y: Math.floor(Math.random() * config.gridSize)
};
} while (snake.some(segment => segment.x === foodPosition.x && segment.y === foodPosition.y));
food = foodPosition;
}
// 更新游戏状态
function updateGame() {
if (isPaused || isGameOver) return;
// 更新方向
direction = nextDirection;
// 获取蛇头位置
const head = { ...snake[0] };
// 根据方向移动蛇头
switch (direction) {
case 'up':
head.y -= 1;
break;
case 'down':
head.y += 1;
break;
case 'left':
head.x -= 1;
break;
case 'right':
head.x += 1;
break;
}
// 检查碰撞
if (checkCollision(head)) {
gameOver();
return;
}
// 将新头部添加到蛇身
snake.unshift(head);
// 检查是否吃到食物
if (head.x === food.x && head.y === food.y) {
// 增加分数
score += 10;
updateScore();
// 生成新食物
generateFood();
// 如果分数是50的倍数，增加游戏速度
if (score % 50 === 0) {
increaseSpeed();
}
} else {
// 如果没吃到食物，移除尾部
snake.pop();
}
// 绘制游戏
drawGame();
}
// 检查碰撞
function checkCollision(head) {
// 检查是否撞墙
if (head.x < 0 || head.x >= config.gridSize || head.y < 0 || head.y >= config.gridSize) {
return true;
}
// 检查是否撞到自己（从第二个身体部分开始检查）
for (let i = 1; i < snake.length; i++) {
if (head.x === snake[i].x && head.y === snake[i].y) {
return true;
}
}
return false;
}
// 游戏结束
function gameOver() {
isGameOver = true;
clearInterval(gameInterval);
gameInterval = null;
// 更新最高分
if (score > highScore) {
highScore = score;
localStorage.setItem('snakeHighScore', highScore);
updateHighScore();
}
finalScore.textContent = score;
highestScore.textContent = highScore;
gameOverScreen.style.display = 'flex';
}
// 增加游戏速度
function increaseSpeed() {
clearInterval(gameInterval);
config.gameSpeed = Math.max(config.minSpeed, config.gameSpeed - config.speedIncrement);
if (!isPaused && !isGameOver) {
gameInterval = setInterval(updateGame, config.gameSpeed);
}
}
// 更新分数显示
function updateScore() {
scoreDisplay.textContent = `分数: ${score}`;
}
// 更新最高分显示
function updateHighScore() {
highScoreDisplay.textContent = `最高分: ${highScore}`;
highestScore.textContent = highScore;
}
// 绘制游戏
function drawGame() {
// 清空画布
ctx.fillStyle = colors.background;
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 绘制网格（可选）
drawGrid();
// 绘制蛇
snake.forEach((segment, index) => {
// 蛇头用不同颜色
if (index === 0) {
ctx.fillStyle = colors.snakeHead;
} else {
ctx.fillStyle = colors.snakeBody;
}
// 绘制圆形蛇身
ctx.beginPath();
ctx.arc(
segment.x * cellSize + cellSize / 2,
segment.y * cellSize + cellSize / 2,
cellSize / 2 - 1,
0,
Math.PI * 2
);
ctx.fill();
// 添加边框
ctx.strokeStyle = colors.snakeBorder;
ctx.lineWidth = 1;
ctx.stroke();
});
// 绘制食物
ctx.fillStyle = colors.food;
ctx.beginPath();
ctx.arc(
food.x * cellSize + cellSize / 2,
food.y * cellSize + cellSize / 2,
cellSize / 2 - 2,
0,
Math.PI * 2
);
ctx.fill();
// 添加食物发光效果
ctx.shadowBlur = 10;
ctx.shadowColor = colors.food;
ctx.stroke();
ctx.shadowBlur = 0;
}
// 绘制网格
function drawGrid() {
ctx.strokeStyle = 'rgba(255, 255, 255, 0.05)';
ctx.lineWidth = 0.5;
// 绘制垂直线
for (let i = 0; i <= config.gridSize; i++) {
ctx.beginPath();
ctx.moveTo(i * cellSize, 0);
ctx.lineTo(i * cellSize, canvas.height);
ctx.stroke();
}
// 绘制水平线
for (let i = 0; i <= config.gridSize; i++) {
ctx.beginPath();
ctx.moveTo(0, i * cellSize);
ctx.lineTo(canvas.width, i * cellSize);
ctx.stroke();
}
}
// 开始游戏
function startGame() {
if (!gameInterval && !isGameOver) {
gameInterval = setInterval(updateGame, config.gameSpeed);
isPaused = false;
pauseButton.textContent = '暂停';
}
}
// 暂停游戏
function togglePause() {
if (isGameOver) return;
isPaused = !isPaused;
if (isPaused) {
clearInterval(gameInterval);
gameInterval = null;
pauseButton.textContent = '继续';
} else {
gameInterval = setInterval(updateGame, config.gameSpeed);
pauseButton.textContent = '暂停';
}
}
// 重新开始游戏
function restartGame() {
clearInterval(gameInterval);
gameInterval = null;
initGame();
drawGame();
startGame();
}
// 处理键盘输入
function handleKeydown(e) {
switch (e.key) {
case 'ArrowUp':
case 'w':
case 'W':
if (direction !== 'down') nextDirection = 'up';
break;
case 'ArrowDown':
case 's':
case 'S':
if (direction !== 'up') nextDirection = 'down';
break;
case 'ArrowLeft':
case 'a':
case 'A':
if (direction !== 'right') nextDirection = 'left';
break;
case 'ArrowRight':
case 'd':
case 'D':
if (direction !== 'left') nextDirection = 'right';
break;
case ' ':
togglePause();
break;
}
}
// 事件监听器
document.addEventListener('keydown', handleKeydown);
startButton.addEventListener('click', () => {
if (!gameInterval || isPaused || isGameOver) {
if (isGameOver) {
restartGame();
} else {
startGame();
}
}
});
pauseButton.addEventListener('click', togglePause);
restartButton.addEventListener('click', restartGame);
difficultySelect.addEventListener('change', () => {
if (!gameInterval || isPaused || isGameOver) {
applyDifficulty();
}
});
// 移动端控制
upButton.addEventListener('click', () => {
if (direction !== 'down') nextDirection = 'up';
});
downButton.addEventListener('click', () => {
if (direction !== 'up') nextDirection = 'down';
});
leftButton.addEventListener('click', () => {
if (direction !== 'right') nextDirection = 'left';
});
rightButton.addEventListener('click', () => {
if (direction !== 'left') nextDirection = 'right';
});
// 初始化并绘制游戏
initGame();
drawGame();
updateHighScore();
});
</script>
</body>
</html>