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

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

article 2025/1/24 5:56:24

 

目录

引言

展示效果

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 


http://www.kler.cn/a/515903.html

相关文章：

  • 【机器学习案列】探索各因素对睡眠时间影响的回归分析
  • 计算机网络之网络层
  • jenkins-k8s pod方式动态生成slave节点
  • 机器学习-线性回归（简单回归、多元回归）
  • JAVA：Spring Boot 实现责任链模式处理订单流程的技术指南
  • 线性表-线性存储结构
  • 操作系统(Linux Kernel 0.11Linux Kernel 0.12)解读整理——内核初始化(main init)之缓冲区的管理
  • 百度APP iOS端磁盘优化实践（上）
  • 深入理解Spring Boot：启动方式、注解、配置文件与模板引擎
  • 深度理解递归（树的深度优先遍历、费波那契数列）c++
  • Effective C++ 规则43：学习处理模板化基类内的名称
  • linux+docker+nacos+mysql部署
  • 认识Django项目模版文件——Django学习日志（二）
  • Spring Boot整合Thymeleaf、JDBC Template与MyBatis配置详解
  • 【C语言】编译链接
  • 软考信安26~大数据安全需求分析与安全保护工程
  • 【C++笔记】哈希表底层实现的深度剖析
  • 车间设备数据采集解决方案
  • 智能体的核心技能之插件，插件详解和实例 ，扣子免费系列教程（11）
  • Elixir语言的Web开发
  • 知识产权API：助力金融业投资决策等场景提效！
  • 从理论到实践：Django 业务日志配置与优化指南
  • Facebook新品广告ROI一周速成攻略
  • 2.体验vue
  • 【若依】添加定时任务
  • ansible自动化运维实战--复制模块和用户模块（3）