让豆包MarsCode 写一个贪吃蛇游戏不过分吧，我负责CV就行原创

本文链接：https://blog.csdn.net/DouBaoMarsCode/article/details/143737517

作者：末世未然

贪吃蛇的游戏想必大家都听过也都玩过，今天要给大家展示的是如何利用豆包MarsCode 制作一款属于自己的贪吃蛇小游戏，话不多说，往下看看吧～

生成的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Snake Game</title>
    <style>
        #game-board {
            width: 400px;
            height: 400px;
            border: 1px solid #000;
            display: flex;
            flex-wrap: wrap;
        }
       .cell {
            width: 20px;
            height: 20px;
            border: 1px solid #000;
        }
       .snake {
            background-color: #00FF00;
        }
       .food {
            background-color: #FF0000;
        }
    </style>
</head>
<body>
    <div id="game-board"></div>
    <button onclick="startGame()">Start</button>
    <button onclick="pauseGame()">Pause</button>
    <button onclick="resetGame()">Reset</button>
    <script src="game.js"></script>
</body>
</html>

let gameBoard = document.getElementById('game-board');
let boardSize = 20; // 游戏区域大小
let snake = [{ x: 10, y: 10 }]; // 蛇的初始位置
let food = { x: 5, y: 5 }; // 食物的初始位置
let direction = 'right'; // 初始方向
let isGamePaused = false; // 游戏是否暂停
let gameInterval; // 游戏定时器

// 在游戏区域创建单元格
for (let i = 0; i < boardSize * boardSize; i++) {
    let cell = document.createElement('div');
    cell.className = 'cell';
    gameBoard.appendChild(cell);
}

// 开始游戏
function startGame() {
    if (gameInterval) {
        clearInterval(gameInterval);
    }
    isGamePaused = false;
    gameInterval = setInterval(updateGame, 200); // 更新游戏状态的时间间隔
}

// 暂停游戏
function pauseGame() {
    isGamePaused = true;
}

// 重置游戏
function resetGame() {
    clearInterval(gameInterval);
    snake = [{ x: 10, y: 10 }];
    food = { x: 5, y: 5 };
    direction = 'right';
    updateGame();
}

// 更新游戏状态
function updateGame() {
    if (isGamePaused) {
        return;
    }
    
    // 移动蛇
    let newHead = { x: snake[0].x, y: snake[0].y };
    switch (direction) {
        case 'up':
            newHead.y--;
            break;
        case 'down':
            newHead.y++;
            break;
        case 'left':
            newHead.x--;
            break;
        case 'right':
            newHead.x++;
            break;
    }
    
    // 检查是否吃到食物
    if (newHead.x === food.x && newHead.y === food.y) {
        food = { x: Math.floor(Math.random() * boardSize), y: Math.floor(Math.random() * boardSize) };
    } else {
        snake.pop();
    }
    
    // 检查游戏是否结束
    if (isCollision(newHead) || newHead.x < 0 || newHead.x >= boardSize || newHead.y < 0 || newHead.y >= boardSize) {
        clearInterval(gameInterval);
        alert('Game Over!');
        return;
    }
    
    // 添加新头部
    snake.unshift(newHead);
    
    // 更新游戏界面
    renderGame();
}

// 检查是否碰撞
function isCollision(head) {
    return snake.some(segment => segment.x === head.x && segment.y === head.y);
}

// 渲染游戏界面
function renderGame() {
    let cells = document.getElementsByClassName('cell');
    for (let i = 0; i < cells.length; i++) {
        cells[i].classList.remove('snake', 'food');
    }
    
    snake.forEach(segment => {
        let cellIndex = segment.y * boardSize + segment.x;
        cells[cellIndex].classList.add('snake');
    });
    
    let foodIndex = food.y * boardSize + food.x;
    cells[foodIndex].classList.add('food');
}

// 监听键盘事件改变方向
document.addEventListener('keydown', function(event) {
    switch (event.keyCode) {
        case 37: // 左箭头
            if (direction!== 'right') {
                direction = 'left';
            }
            break;
        case 38: // 上箭头
            if (direction!== 'down') {
                direction = 'up';
            }
            break;
        case 39: // 右箭头
            if (direction!== 'left') {
                direction = 'right';
            }
            break;
        case 40: // 下箭头
            if (direction!== 'up') {
                direction = 'down';
            }
            break;
    }
});

运行完代码后，效果是这样的：

咱再录个屏看看效果如何：

加了一行代码，布局看着正常了：

然后重新玩了一下游戏：

游戏逻辑也没毛病了，豆包MarsCode 还真是蛮准确的。

至此，贪吃蛇游戏已经完成了，可以开始摸鱼坐等下班了。

但是作为一篇参赛文章，这么草草结束是不可以滴！再继续折腾下豆包MarsCode 吧，我们发现贪吃蛇的头很难被分辨，于是我问豆包MarsCode，蛇头用另一种颜色区分：

在刚刚生成的代码中，豆包MarsCode竟然自己加上了box-sizing: border-box!!!不得不感叹 AI 的学习能力，不过下面的 js 让我有点头大，这个 updateSnake 方法之前没有，且仅给我部分代码，这让我很难办啊，我是只会 CV 的小菜鸡啊，小菜鸡本着能 AI 来就不可能自己动手的原则，于是咱又问豆包MarsCode，选中的代码中我要加入蛇头采用不一样颜色的逻辑（这次我是选中代码块问的）：