贪吃蛇微信小程序代码

### 微信小程序贪吃蛇游戏源码示例

#### 游戏界面布局
为了创建一个简单的微信小游戏——贪吃蛇，首先需要定义页面结构。在`index.wxml`文件中设置基本的游戏区域。

<view class="game-board">
    <block wx:for="{{board}}" wx:key="*this" wx:for-item="row">
        <view class="row">
            <block wx:for="{{row}}" wx:key="*this" wx:for-item="cell">
                <view class="cell {{ cell === 'snake' ? 'snake-cell' : (cell === 'food' ? 'food-cell' : '') }}"></view>
            </block>
        </view>
    </block>
</view>

<button bindtap="startGame">Start Game</button>

此部分代码构建了一个二维数组来表示游戏板，并通过循环渲染每个单元格的状态[^1]。

#### JavaScript逻辑处理
接下来，在`index.js`里编写主要业务逻辑：

Page({
  data: {
    boardSize: 20,
    snake: [{ x: 1, y: 1 }],
    direction: "right",
    foodPosition: null,
    intervalId: null,
    board: Array.from({ length: this.boardSize }, () => Array(this.boardSize).fill(null))
  },

  onLoad() {
    this.generateFood();
  },

  generateFood() {
    let emptyCells = [];
    for (let i = 0; i < this.data.board.length; ++i) {
      for (let j = 0; j < this.data.board[i].length; ++j) {
        if (!this.isSnakePart(i, j)) {
          emptyCells.push([i, j]);
        }
      }
    }

    const randomIndex = Math.floor(Math.random() * emptyCells.length);
    this.setData({
      ['foodPosition']: emptyCells[randomIndex],
    });
    
    // 更新棋盘状态
    this.updateBoardState();
  },
  
  updateBoardState(){
     // 初始化空白棋盘
     let newBoard = Array.from({ length: this.data.boardSize }, () =>
       Array(this.data.boardSize).fill(null));

     // 设置食物位置
     if (this.data.foodPosition){
         newBoard[this.data.foodPosition[0]][this.data.foodPosition[1]]='food';
     }

     // 设置蛇身位置
     this.data.snake.forEach(part=>{
         newBoard[part.y][part.x]='snake';
     });

     this.setData({'board':newBoard});
  },

  startGame(e) {
    clearInterval(this.data.intervalId);

    function moveSnake() {
      // 移动逻辑...
      
      // 检查碰撞条件...

      // 如果未发生碰撞，则继续移动并更新UI
      this.updateBoardState();

      // 否则结束游戏
    }.bind(this)

    this.setData({
      intervalId: setInterval(moveSnake.bind(this), 200),
    })
  }
})

上述脚本实现了初始化、生成食物以及启动游戏的核心功能[^2]。

#### 样式美化
最后不要忘了给游戏添加一些样式使其看起来更美观，在`index.wxss`加入如下CSS规则：

.game-board {
  display: grid;
  width: 400px;
  height: 400px;
}

.row {
  display: contents;
}

.cell {
  border: 1px solid black;
  width: calc(100% / var(--size));
  aspect-ratio: 1;
}

.snake-cell {
  background-color: green;
}

.food-cell {
  background-color: red;
}

这段样式表设置了网格布局用于显示游戏面板中的方块，并根据不同类型的方块应用不同的背景颜色[^3]。