豆包MarsCode体验官-用React创建一个最经典的贪吃蛇游戏

背景

在人工智能快速发展的时代，大模型（LLM）只要有足够的算力和数据就可以做到任何的事情，甚至可以模拟出另一个地球。LLM作为一个革命化的科技，可以取代很多岗位，甚至可以让人类达到“躺着领钱的时代”。Marscode作为一个新推出的IDE，紧跟时代的潮流，拥抱AI，顺应时代的潮流。

各种各样的语言，都会有一个贪吃蛇的游戏去作为一个里程碑，我也完完全全用这个IDE去编写贪吃蛇游戏这个小demo。

创建项目

在这个IDE创建一个贪吃蛇的项目

image.png

生成了一个这样的项目目录

image.png

因为我还没学ts，就再用npm init vite去初始化了一个JavaScript的React项目

image.png

输完项目名称，cd project-name和npm i切换到你的项目目录和下载依赖就完成了vite脚手架的安装

image.png

npm run dev把项目跑起来 很方便直接能网页预览

image.png

设计项目

提出自己的需求给AI assistant

image.png

设计这个游戏的组件

image.png

但是它好像不是很能理解上下文，我这两句话是放在一起写的。只能再给出一份更详细的设计要求

image.png

给出了四份组件，那就去项目中创建文件。

image.png

创建好对应的目录和文件。询问AI代码

image.png

以下过程一样，找AI去生成一份相关组件的代码

image.png

当然因为我是分开要的组件代码，所以就产生了一些错误。看到还有AI fix的功能 我果断尝试了

image.png

这里AI fix 左右两边分别表示之前的代码和修改后的代码，你可以去看它修改后的代码是否正确去选择是否接受

image.png

对于这个问题，AI fix似乎跟个人机一样，根本解决不了

最大的感受就是这个AI fix感觉就是给你改错，然后用错去改你的错，有一点拆东墙补西墙的感觉，毕竟还是AI，可能并不能很好去理解bug本质所在，只会通过bug存在的原因去机械的给你改bug。

解决完所有的bug

image.png

代码也是成功跑不出来

image.png

image.png

有些涉及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会越来越好！！！