豆包MarsCode实现贪吃蛇

一、环境搭建与工具介绍

豆包 MarsCode 是一款基于浏览器的图形化编程平台，支持通过拖拽组件（画布、定时器、数组、按键监听等）拼接游戏逻辑，并在"脚本"节点中编写 JavaScript 扩展。适合快速原型和小游戏开发。

注册并登录 MarsCode，创建新项目。
在"组件"面板拖入：
- 画布（Canvas） ：渲染游戏画面。
- 定时器（Timer） ：驱动游戏主循环。
- 数组（Array） ：存储蛇身坐标。
- 键盘监听（Keyboard） ：响应玩家操作。

每个组件都可以绑定"脚本"节点，写入下面示例中的函数，并用"连线"将事件源（如定时器的 tick）与脚本节点连接。

二、游戏设计思路

贪吃蛇核心逻辑分为四步：

初始化：设置网格大小、蛇身初始坐标、初始方向、食物坐标、分数。
主循环：定时器每 200 ms 调用一次，更新蛇头位置、判断是否吃到食物、检测碰撞、重绘画布。
渲染：清除或部分擦除旧画面，绘制背景格子、蛇身和食物。
交互：键盘监听 W/A/S/D 或 ↑/←/↓/→ 改变移动方向；游戏结束后停止定时器并弹窗提示。

三、核心代码示例

1. 初始化脚本（绑定在"画布"加载完成事件上）

ini 复制代码

js
复制编辑
// 全局变量
const gridSize = 20;           // 每个格子像素
const cols = 20, rows = 20;    // 画布格子数量
let snake = [{x: 10, y: 10}];   // 蛇身坐标数组
let dir = {x: 1, y: 0};         // 方向向量
let food = null;                // 食物坐标
let score = 0;

// 获取画布上下文
const ctx = canvas.getContext('2d');

// 随机生成食物
function spawnFood() {
  let x, y, collision;
  do {
    x = Math.floor(Math.random() * cols);
    y = Math.floor(Math.random() * rows);
    collision = snake.some(p => p.x === x && p.y === y);
  } while (collision);
  food = {x, y};
}

// 绘制背景网格
function drawGrid() {
  ctx.clearRect(0, 0, cols * gridSize, rows * gridSize);
  for (let i = 0; i <= cols; i++) {
    ctx.beginPath();
    ctx.moveTo(i*gridSize,0);
    ctx.lineTo(i*gridSize, rows*gridSize);
    ctx.stroke();
  }
  for (let j = 0; j <= rows; j++) {
    ctx.beginPath();
    ctx.moveTo(0,j*gridSize);
    ctx.lineTo(cols*gridSize, j*gridSize);
    ctx.stroke();
  }
}

// 开始游戏
spawnFood();
drawGrid();

2. 主循环逻辑（绑定在定时器的 `tick` 事件上）

ini 复制代码

js
复制编辑
function gameLoop() {
  // 计算新头部
  const head = {x: snake[0].x + dir.x, y: snake[0].y + dir.y};

  // 边界或自碰检测
  if (head.x < 0 || head.x >= cols || head.y < 0 || head.y >= rows ||
      snake.some(p => p.x === head.x && p.y === head.y)) {
    timer.stop();  // 停止定时器
    alert('游戏结束！得分：' + score);
    return;
  }

  // 添加新头
  snake.unshift(head);

  // 吃到食物
  if (head.x === food.x && head.y === food.y) {
    score++;
    spawnFood();
  } else {
    snake.pop();  // 未吃到则移除尾部
  }

  // 重绘
  drawGrid();
  // 绘制食物
  ctx.fillStyle = 'red';
  ctx.fillRect(food.x*gridSize, food.y*gridSize, gridSize, gridSize);
  // 绘制蛇身
  ctx.fillStyle = 'green';
  snake.forEach(p => {
    ctx.fillRect(p.x*gridSize, p.y*gridSize, gridSize, gridSize);
  });
}

3. 键盘监听（绑定在键盘组件的 `keydown` 事件上）

bash 复制代码

js
复制编辑
function onKeyDown(evt) {
  switch(evt.key) {
    case 'ArrowUp':    if (dir.y !== 1) dir = {x:0,y:-1}; break;
    case 'ArrowDown':  if (dir.y !== -1) dir = {x:0,y:1}; break;
    case 'ArrowLeft':  if (dir.x !== 1) dir = {x:-1,y:0}; break;
    case 'ArrowRight': if (dir.x !== -1) dir = {x:1,y:0}; break;
    // 支持 WASD
    case 'w': if (dir.y !== 1) dir = {x:0,y:-1}; break;
    case 's': if (dir.y !== -1) dir = {x:0,y:1}; break;
    case 'a': if (dir.x !== 1) dir = {x:-1,y:0}; break;
    case 'd': if (dir.x !== -1) dir = {x:1,y:0}; break;
  }
}

在 MarsCode 中，将以上三个脚本节点分别连接到：

画布的 onLoad（或页面加载）
定时器的 tick
键盘组件的 keydown

并启动定时器（间隔 200 ms）。

四、性能优化与扩展

分层渲染 ：将背景格子只绘制一次，主循环只重绘食物和蛇身，减少 clearRect 调用。
局部擦除：只清除蛇尾最后一格，而不是整版背景。
难度设置：通过改变定时器间隔（如 200 ms/150 ms/100 ms）实现"简单""中等""困难"三档。
排行榜 ：利用 localStorage 保存和读取最高分列表，搭配 MarsCode 的"本地存储"组件即可。
暂停/继续 ：在界面加入按钮，绑定脚本调用 timer.stop() 和 timer.start()。

五、总结与心得

使用豆包 MarsCode 将传统的 HTML5 Canvas + JavaScript 游戏开发可视化、组件化，大大降低了入门门槛。通过上述脚本节点示例，你可以在几分钟内搭建出功能齐全的贪吃蛇小游戏，并进一步加入联网对战、移动端手势控制等高级特性。希望本文和示例代码能帮助你在 MarsCode 平台上快速上手、尽情创作！