目录
引言
展示效果
prompt提示信息
第一次提示（实现基本功能）
初次实现效果
第二次提示（美化UI）
第一次美化后的效果
第二次美化后的效果
代码展示
实现在线体验链接
码上掘金使用教程
体验地址： 花样贪吃蛇
控制键盘的↑↓←→键即可控制。也可以通过WSAD来进行控制，W是向上，S是向下，A是向左，D是向右。
官方活动地址：活动地址
引言
当新春的脚步伴随着蛇年的灵动气息悄然临近，科技与创意的火花也在此时被点燃。豆包倾力推出的 “MarsCode 蛇年编程大作战” 盛大起航，为编程爱好者们开启一扇通往奇幻创作天地的大门。此刻，无论你登录便捷高效的豆包 MarsCode 编程助手，还是功能强大的 MarsCode IDE，只需轻启 AI 问答功能，就能获取源源不断的灵感助力。在这里，你将以代码为丝线，编织出独具蛇年韵味的编程佳作，在数字世界中留下属于自己的闪耀印记，开启这场充满惊喜与挑战的蛇年创意编程征程。
下面我将展示我如何使用豆包MarsCodeAI来实现一个创意贪吃蛇的项目！
展示效果
prompt提示信息
我现在要你帮我实现了一个贪吃蛇的游戏，使用HTML+JS+JS，用Canvas来绘制游戏界面比较合适。这样可以在网页上直接运行，用户容易访问。
美化画布UI，画图居中显示，在画布的上面要有“豆包MarsCode 花样贪吃蛇”这个标题，同样也是居中显示。
游戏的基本结构应该包括初始化蛇的移动、食物的生成、碰撞检测以及得分机制。蛇的移动通常通过一个数组来保存每个身体部分的坐标，每隔一定时间更新位置。食物要在随机位置生成，但需要确保不在蛇的身体上。得分每吃一次食物就增加，同时蛇的身体变长。
用户界面部分需要显示得分和游戏标题。标题“豆包MarsCode 花样贪吃蛇”要显眼，可能放在画布上方居中。得分实时更新，可以用一个独立的div元素来显示。
碰撞检测是关键部分，包括蛇头是否碰到墙壁或者自己的身体。碰到的话游戏结束，弹出提示，并重新开始。这里可能需要一个游戏循环，用setInterval或者requestAnimationFrame来不断更新游戏状态。
控制蛇的移动方向需要监听键盘事件，通常是方向键或者WASD。要注意防止蛇直接反向移动，比如在向右移动时不能立即向左转。
测试各个功能是否正常，比如食物生成是否在正确位置，得分是否正确增加，游戏结束条件是否触发等。可能还需要调整游戏速度，让难度适中。
最后，确保代码结构清晰，注释充分，方便用户理解和修改。可能还需要考虑不同浏览器的兼容性，但现代浏览器一般支持Canvas和键盘事件。
总结下来，步骤大致是：设置画布和基本变量，绘制游戏元素，处理用户输入，更新游戏状态，检测碰撞，管理得分，以及处理游戏结束和重新开始。确保所有功能整合后运行流畅，没有明显bug。
第一次提示（实现基本功能）
下面我将上面给出的prompt提示信息扔给豆包MarsCode看看实现的效果：
初次实现效果
这里我们能看的出来基本功能都已经实现。能够自动生成食物，贪吃蛇吃完后长度会增加，分数正常累计，触碰到自己的时候就会失败！
但是目前的话这个UI还是不怎么好看，所以接下来让我们来继续使用豆包来美化UI样式！
第二次提示（美化UI）
提示信息：
请对画布和按钮以及文本的CSS样式进行优化和调整，达到圆润，色彩绚丽！
第一次美化后的效果
这个时候豆包已经对画布和按钮进行了美化，但是我感觉以我的美感感觉还是不够美观，下面让我们继续优化：
对代码进行优化，包括美化文本样式、将字体颜色设置为红色，以及美化背景，将背景设置成渐变色。
第二次美化后的效果
这次看来确实好看了许多，背景也优化成了渐变色，文本的样式也进行了优化！！！
截至目前，我对这一过程极为满意。在实现贪吃蛇程序的过程中，我还同步进行了写博客与录屏操作，即便如此，整体耗时也未超过 20 分钟，效率堪称惊人。倘若单算实现贪吃蛇程序本身所需的时间，更是能控制在 3 分钟以内，着实高效。
代码展示
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>豆包MarsCode 花样贪吃蛇</title>
<style>
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
background-image: linear-gradient(to bottom right, #ffcccc, #ccffff); /* 添加渐变色背景 */
}
canvas {
border: 2px solid #000;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
#score {
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
font-size: 24px;
font-weight: bold;
color: red; /* 将字体颜色设置为红色 */
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* 添加文本阴影 */
}
#title {
position: absolute;
top: 60px;
left: 50%;
transform: translateX(-50%);
font-size: 36px;
font-weight: bold;
color: red; /* 将字体颜色设置为红色 */
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* 添加文本阴影 */
}
#startButton, #restartButton {
margin-top: 20px;
padding: 10px 20px;
font-size: 18px;
font-weight: bold;
cursor: pointer;
border: none;
border-radius: 5px;
background-color: #4CAF50;
color: white;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
transition: background-color 0.3s ease;
}
#startButton:hover, #restartButton:hover {
background-color: #45a049;
}
#gameOver {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 36px;
font-weight: bold;
color: red; /* 将字体颜色设置为红色 */
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* 添加文本阴影 */
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="400" height="400"></canvas>
<div id="score">得分: 0</div>
<div id="title">豆包MarsCode 花样贪吃蛇</div>
<button id="startButton">开始游戏</button>
<div id="gameOver">游戏结束！</div>
<button id="restartButton">重新开始</button>
<script>
// 获取画布和上下文
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
// 游戏变量
let snake = [{ x: 200, y: 200 }];
let food = { x: 300, y: 300 };
let dx = 20;
let dy = 0;
let score = 0;
let gameInterval;
// 绘制蛇
function drawSnake() {
snake.forEach(segment => {
ctx.fillStyle = 'green';
ctx.fillRect(segment.x, segment.y, 20, 20);
});
}
// 绘制食物
function drawFood() {
ctx.fillStyle = 'red';
ctx.fillRect(food.x, food.y, 20, 20);
}
// 生成食物
function generateFood() {
food = {
x: Math.floor(Math.random() * (canvas.width / 20)) * 20,
y: Math.floor(Math.random() * (canvas.height / 20)) * 20
};
}
// 更新游戏状态
function update() {
// 移动蛇头
const head = { x: snake[0].x + dx, y: snake[0].y + dy };
snake.unshift(head);
// 检查是否吃到食物
if (head.x === food.x && head.y === food.y) {
score++;
generateFood();
} else {
snake.pop();
}
// 检查是否碰撞到墙壁或自己的身体
if (head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height || snake.slice(1).some(segment => segment.x === head.x && segment.y === head.y)) {
clearInterval(gameInterval);
gameOver();
}
}
// 绘制游戏
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawSnake();
drawFood();
document.getElementById('score').innerText = '得分: ' + score;
}
// 游戏循环
function gameLoop() {
update();
draw();
}
// 监听键盘事件
document.addEventListener('keydown', event => {
const key = event.key;
if (key === 'ArrowUp' || key === 'w' || key === 'W') {
if (dy !== 20) {
dx = 0;
dy = -20;
}
} else if (key === 'ArrowDown' || key === 's' || key === 'S') {
if (dy !== -20) {
dx = 0;
dy = 20;
}
} else if (key === 'ArrowLeft' || key === 'a' || key === 'A') {
if (dx !== 20) {
dx = -20;
dy = 0;
}
} else if (key === 'ArrowRight' || key === 'd' || key === 'D') {
if (dx !== -20) {
dx = 20;
dy = 0;
}
}
});
// 开始游戏按钮点击事件
document.getElementById('startButton').addEventListener('click', () => {
if (!gameInterval) {
gameInterval = setInterval(gameLoop, 100);
document.getElementById('restartButton').style.display = 'none';
}
});
// 重新开始按钮点击事件
document.getElementById('restartButton').addEventListener('click', () => {
resetGame();
});
// 游戏结束
function gameOver() {
document.getElementById('gameOver').style.display = 'block';
document.getElementById('restartButton').style.display = 'block';
}
// 重置游戏
function resetGame() {
clearInterval(gameInterval);
snake = [{ x: 200, y: 200 }];
dx = 20;
dy = 0;
score = 0;
generateFood();
document.getElementById('gameOver').style.display = 'none';
document.getElementById('restartButton').style.display = 'none';
gameInterval = setInterval(gameLoop, 100);
}
// 初始化游戏
generateFood();
document.getElementById('restartButton').style.display = 'none';
</script>
</body>
</html>
实现在线体验链接
豆包官方要求要实现在线体验链接，下面就教给你们一种非常简便的方式来实现在线体现链接，这里我们使用稀土掘金推出的一款面向开发者的在线code playground平台码上掘金！
码上掘金地址：码上掘金
码上掘金使用教程
首先进入码上掘金平台，然后点击新建代码片段
因为目前我的代码是纯HTML+CSS+JS，这里直接新建空白项目，如果你们的代码使用Vue或者Java，Python之类的来实现的话，可以选择对应的模版。
创建后是这个排版
由于我们只有一个html文件，那么我们直接将刚刚的代码复制到对应的HTML编辑区域中，复制进来后点击运行即可看到代码的运行效果！！！
测试一下代码没有问题后，这个时候点击右上角的发布，等待审核通过即可！
审核通过展示
体验地址： 花样贪吃蛇
@豆包MarsCode
