以下是「 豆包MarsCode 体验官」优秀文章，作者Find。
背景
在人工智能快速发展的时代，大模型（LLM）只要有足够的算力和数据就可以做到任何的事情，甚至可以模拟出另一个地球。LLM作为一个革命化的科技，可以取代很多岗位，甚至可以让人类达到"躺着领钱的时代"。Marscode作为一个新推出的IDE，紧跟时代的潮流，拥抱AI，顺应时代的潮流。 各种各样的语言，都会有一个贪吃蛇的游戏去作为一个里程碑，我也完完全全用这个IDE去编写贪吃蛇游戏这个小demo。
创建项目
在这个IDE创建一个贪吃蛇的项目
生成了一个这样的项目目录
因为我还没学ts，就再用npm init vite去初始化了一个JavaScript的React项目
输完项目名称，cd project-name和npm i切换到你的项目目录和下载依赖就完成了vite脚手架的安装
npm run dev把项目跑起来 很方便直接能网页预览
设计项目
提出自己的需求给AI assistant
设计这个游戏的组件
但是它好像不是很能理解上下文，我这两句话是放在一起写的。只能再给出一份更详细的设计要求
给出了四份组件，那就去项目中创建文件。
创建好对应的目录和文件。询问AI代码
以下过程一样，找AI去生成一份相关组件的代码
当然因为我是分开要的组件代码，所以就产生了一些错误。看到还有AI fix的功能 我果断尝试了
这里AI fix 左右两边分别表示之前的代码和修改后的代码，你可以去看它修改后的代码是否正确去选择是否接受
对于这个问题，AI fix似乎跟个人机一样，根本解决不了
最大的感受就是这个AI fix感觉就是给你改错，然后用错去改你的错，有一点拆东墙补西墙的感觉，毕竟还是AI，可能并不能很好去理解bug本质所在，只会通过bug存在的原因去机械的给你改bug。
解决完所有的bug
代码也是成功跑不出来 有些涉及AI生成的代码中有些属性并未被初始化等等问题，改来改去最后还是把页面跑出来了
代码
GameBoard.jsx
import React, { useState, useEffect, useRef } from 'react'; import Snake from './Snake'; import Food from './Food'; import Score from './Score'; const GameBoard = () => { const [snakeBody, setSnakeBody] = useState([]); const [food, setFood] = useState({}); const [direction, setDirection] = useState('right'); const [isGameOver, setIsGameOver] = useState(false); const [score, setScore] = useState(0); const gameBoardRef = useRef(null); useEffect(() => { gameBoardRef.current.focus(); initializeGame(); }, []); useEffect(() => { if (snakeBody.length) { const timer = setInterval(moveSnake, 300); return () => clearInterval(timer); } }, [snakeBody, direction]); const initializeGame = () => { const initialSnake = [{ x: 200, y: 200 }]; setSnakeBody(initialSnake); setFood(getRandomPosition()); setDirection('right'); setIsGameOver(false); setScore(0); }; const getRandomPosition = () => { const x = Math.floor(Math.random() * 20) * 20; const y = Math.floor(Math.random() * 20) * 20; return { x, y }; }; const moveSnake = () => { let newHead; switch (direction) { case 'right': newHead = { x: snakeBody[0].x + 20, y: snakeBody[0].y }; break; case 'left': newHead = { x: snakeBody[0].x - 20, y: snakeBody[0].y }; break; case 'up': newHead = { x: snakeBody[0].x, y: snakeBody[0].y - 20 }; break; case 'down': newHead = { x: snakeBody[0].x, y: snakeBody[0].y + 20 }; break; default: return; } if (isCollisionWithWall(newHead) || isCollisionWithSelf(newHead)) { setIsGameOver(true); return; } const newSnakeBody = [newHead, ...snakeBody.slice(0, -1)]; if (isCollisionWithFood(newHead)) { setFood(getRandomPosition()); setScore(score + 1); newSnakeBody.push({}); } setSnakeBody(newSnakeBody); }; const isCollisionWithWall = (head) => { return head.x < 0 || head.x >= 400 || head.y < 0 || head.y >= 400; }; const isCollisionWithSelf = (head) => { return snakeBody.some((segment) => segment.x === head.x && segment.y === head.y); }; const isCollisionWithFood = (head) => { return head.x === food.x && head.y === food.y; }; const handleKeyDown = (event) => { if (event.keyCode === 37 && direction !== 'right') { setDirection('left'); } else if (event.keyCode === 38 && direction !== 'down') { setDirection('up'); } else if (event.keyCode === 39 && direction !== 'left') { setDirection('right'); } else if (event.keyCode === 40 && direction !== 'up') { setDirection('down'); } }; return ( <div> <div ref={gameBoardRef} tabIndex="0" onKeyDown={handleKeyDown} className="game-board" > {!isGameOver && <Snake snakeBody={snakeBody} />} {!isGameOver && <Food position={food} />} </div> <Score score={score} /> {isGameOver && <div>Game Over!</div>} </div> ); }; export default GameBoard; App.jsx和App.css
import React from 'react'; import GameBoard from './components/GameBoard'; import './App.css'; function App() { return ( <div className="app"> <h1>贪吃蛇游戏</h1> <GameBoard /> </div> ); } export default App; .app { text-align: center; } ------------------css------------------ .game-container { display: flex; justify-content: center; align-items: flex-start; } .game-board { position: relative; width: 400px; height: 400px; border: 1px solid black; overflow: hidden; margin-right: 20px; } .score-board { margin-top: 20px; } Snake.jsx
import React from 'react'; const Snake = ({ snakeBody }) => { return ( <> {snakeBody.map((segment, index) => ( <div key={index} style={{ width: '20px', height: '20px<p align=center>',</p> backgroundColor: index === 0 ? 'green' : 'black', position: 'absolute', left: `${segment.x}px`, top: `${segment.y}px`, }} /> ))} </> ); }; export default Snake; Food.jsx
import React from 'react'; const Food = ({ position }) => { return ( <div style={{ width: '20px', height: '20px', backgroundColor: 'red', position: 'absolute', left: `${position.x}px`, top: `${position.y}px`, }} /> ); }; export default Food; Score.jsx
import React from 'react'; const Score = ({ score }) => { return <div className="score-board">Score: {score}</div>; }; export default Score; 个人感受
做个这个小项目后，最大的感受就是如果你掌握了代码底层逻辑、编程思想等，通过这类有智能化AI的IDE一键生成会让你代码速度提升一个层次。可能有些人觉得AI只能搭建起一个简单的框架，事实上，在你搭建好了框架后，你还可以去按照你的需求去逐步完善你的项目，就拿这个贪吃蛇举例而言，如果我后续需要提升难度，根据我吃球后速度提升、设置障碍物等等，我都可以单独拎出这些需求告诉AI助手，就算它并不能完全帮你写完代码，但也能八九不离。CSS样式、页面切片这种，通过tailwindcss框架和语义化标签，AI已经有理解图像的能力，可以很好完成此类工作。当然随着大模型数据不断的喂养，慢慢等到资本的介入，算力不断提高，AI理解能力的提高，也会使这种AI IDE越来越厉害，也许真有一天普通人掌握编程思想不会编程语言也能编程。豆包Marscode正是有这种强大的功能的IDE，我相信豆包Marscode 会越来越好！！！
本文由博客一文多发平台 OpenWrite 发布！
总结
### 豆包MarsCode 体验官：使用AI助力贪吃蛇游戏开发在人工智能飞速发展的当下，大模型（LLM）凭借其强大的算力和数据处理能力，正逐步改变着世界。MarsCode作为一款新兴的IDE（集成开发环境），紧跟AI潮流，致力于为开发者提供更加智能、高效的编程体验。本次体验过程中，我通过MarsCode及其AI助手，从零开始创建了一个贪吃蛇游戏，深感AI在编程领域的巨大潜力。
#### 创建项目
在MarsCode中创建一个新项目，并通过npm init vite初始化了一个JavaScript的React项目。项目结构清晰，便于后续管理。使用npm run dev命令启动项目后，可直接在浏览器中预览效果，极大地提升了开发效率。
#### 设计项目
我根据游戏需求，提出了一系列组件设计要求给AI助手，包括游戏板、蛇、食物和计分板等。AI助手虽然在一定程度上能够理解并生成相关代码，但在细节处理上仍需人工进一步优化。特别是对于上下文的理解，AI助手还有待提升。
#### 解决BUG与AI Fix
在开发过程中，遇到了不少代码错误和bug。我尝试使用MarsCode内置的AI fix功能进行修复，然而，这一功能目前更像是“拆东墙补西墙”，虽然能够指出部分错误，但在解决根本问题上仍显无力。最终，我结合自身的编程经验和调试技巧，成功将游戏页面跑了起来。
#### 核心代码展示
- **GameBoard.jsx**：游戏主逻辑控制器，包含蛇的移动、食物的随机生成、分数统计及游戏状态管理等功能。
- **App.jsx** 和 **App.css**：应用主组件及样式表，负责游戏界面的整体布局和样式设计。
- **Snake.jsx**、**Food.jsx** 和 **Score.jsx**：分别实现贪吃蛇、食物和计分板三个游戏组件的功能。
#### 个人感受
本次使用MarsCode及其AI助手开发贪吃蛇游戏的体验，让我深刻认识到AI在编程辅助中的巨大潜力。尽管AI助手在理解复杂上下文和深度逻辑方面仍有待提高，但它在快速生成框架代码、提升开发效率方面已展现出明显优势。
更让我兴奋的是，随着大模型的不断发展和数据的持续喂养，AI的理解能力将不断提升，未来或有可能实现普通人仅凭编程思想即可 完成复杂编程任务的愿景。MarsCode作为这一领域的先行者，无疑值得我们期待和关注。
总的来说，MarsCode及其AI助手为编程爱好者们提供了一个全新的、高效的开发平台。相信在未来，随着技术的不断进步和完善，MarsCode将会变得更加智能、功能更加丰富、操作更加便捷。我相信，MarsCode的明天一定会越来越好！ codereactappai助手idecssfix大模型llmetf上下文script开发效率javajavascript人工智能细节处理代码展示ai代码assistant
