【豆包MarsCode蛇年编程大作战】花样贪吃蛇

引言

展示效果

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>