微信小程序实现的贪吃蛇游戏「附源码」

微信小程序实现的贪吃蛇游戏「附源码」

1. 前言

贪吃蛇是一款非常经典的游戏，相信大家都玩过。随着移动互联网的发展，贪吃蛇这款游戏也被移植到了手机上。微信小程序是很好的一个平台，我们可以在上面尝试各种新颖的玩法和功能。本文将介绍如何在微信小程序上实现贪吃蛇游戏，并提供游戏源码，供大家参考。

2. 实现过程

2.1 页面布局

首先，我们需要在小程序中创建一个新的页面用于承载游戏。在页面的.wxml文件中，我们可以使用标签来绘制游戏画面。

<canvas canvas-id="snake" style="width:100%;height:100%;"></canvas>

我们需要设定标签的宽度和高度为100%，这样才能保证在小程序中充满整个屏幕。

2.2 游戏逻辑

游戏的逻辑是最复杂的部分。我们需要定义一些变量来记录贪吃蛇的状态，比如它的长度、当前位置和方向等等。同时，我们需要定义一些函数来响应用户的输入以及每一帧的游戏逻辑。

let canvasWidth; // 画布的宽度

let canvasHeight; // 画布的高度
let blockSize; // 一个格子的宽度和高度
let snake; // 贪吃蛇的状态
function init() {
  // 初始化函数
}
function draw() {
  // 绘制游戏画面
}
function update() {
  // 更新游戏状态
}
function handleInput() {
  // 处理用户输入
}
function loop() {
  // 每一帧的逻辑
}

以上代码是几个核心函数的声明。在init()函数中，我们会初始化贪吃蛇的起始状态。在draw()函数中，我们会根据贪吃蛇的状态来绘制游戏画面。在update()函数中，我们会更新贪吃蛇的状态以及食物的状态。在handleInput()函数中，我们会处理用户的方向输入。在loop()函数中，我们会重复调用draw()、update()和handleInput()等函数，以完成游戏的循环逻辑。

2.3 绘制游戏画面

在draw()函数中，我们需要使用wx.createCanvasContext()函数来获取标签的上下文对象，以便我们可以使用该对象来操作画布。

function draw() {

  const ctx = wx.createCanvasContext('snake');
  // 绘制背景
  ctx.fillStyle = '#000';
  ctx.fillRect(0, 0, canvasWidth, canvasHeight);
  // 绘制贪吃蛇
  ctx.fillStyle = '#fff';
  for (let i = 0; i < snake.length; i++) {
    const block = snake[i];
    ctx.fillRect(block.x * blockSize, block.y * blockSize, blockSize, blockSize);
  }
  // 绘制食物
  ctx.fillStyle = '#f00';
  ctx.fillRect(food.x * blockSize, food.y * blockSize, blockSize, blockSize);
  // 绘制得分
  ctx.fillStyle = '#fff';
  ctx.font = '20px Arial';
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  ctx.fillText(`Score: ${score}`, canvasWidth / 2, 20);
  // 绘制游戏结束提示
  if (gameOver) {
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.font = '40px Arial';
    ctx.fillStyle = 'red';
    ctx.fillText('Game Over!', canvasWidth / 2, canvasHeight / 2);
  }
  // 将画面渲染到屏幕上
  ctx.draw();
}

以上代码是draw()函数的具体实现。我们首先使用ctx.fillStyle来设置画笔的颜色。然后，使用ctx.fillRect()函数来绘制矩形。我们可以根据贪吃蛇的状态来绘制贪吃蛇，根据食物的状态来绘制食物。最后，我们可以使用ctx.fillText()函数来绘制得分和游戏结束提示。最后，我们将绘制好的画面渲染到屏幕上。

2.4 处理用户输入

用户可以通过滑动屏幕来改变贪吃蛇的方向。我们需要在小程序的标签上绑定touchstart和touchmove事件，并在这些事件中记录用户最后的滑动方向。

let lastDirection;

wx.createSelectorQuery().select('#snake').boundingClientRect(function(rect){
  canvasWidth = rect.width;
  canvasHeight = rect.height;
  blockSize = canvasWidth / 30; // 将画布分为30个格子
  init();
  // 绑定touch事件
  wx.onTouchStart(function(e) {
    lastDirection = null;
  });
  wx.onTouchMove(function(e) {
    const dx = e.touches[0].clientX - e.touches[0].pageX;
    const dy = e.touches[0].clientY - e.touches[0].pageY;
    let direction;
    if (Math.abs(dx) > Math.abs(dy)) {
      // 左右滑动
      direction = dx > 0 ? 'left' : 'right';
    } else {
      // 上下滑动
      direction = dy > 0 ? 'up' : 'down';
    }
    if (lastDirection !== direction) {
      lastDirection = direction;
      handleInput();
    }
  });
}).exec();

以上代码中，我们使用wx.createSelectorQuery()函数来获取标签的大小。然后，我们将画布分为30个格子，并调用init()函数来初始化游戏状态。最后，我们绑定了touchstart和touchmove事件，并在touchmove事件中记录用户的方向输入。如果用户改变了输入方向，我们就调用handleInput()函数来处理用户的输入。

2.5 更新游戏状态

在update()函数中，我们需要根据用户的输入和当前的游戏状态，更新贪吃蛇的状态和食物的状态。

function update() {

  if (!gameOver) {
    // 处理用户的方向输入
    if (currentDirection === 'left' && lastDirection !== 'right') {
      currentDirection = 'left';
    }
    if (currentDirection === 'up' && lastDirection !== 'down') {
      currentDirection = 'up';
    }
    if (currentDirection === 'right' && lastDirection !== 'left') {
      currentDirection = 'right';
    }
    if (currentDirection === 'down' && lastDirection !== 'up') {
      currentDirection = 'down';
    }
    // 更新贪吃蛇的位置
    const head = snake[0];
    const dx = currentDirection === 'left' ? -1 : currentDirection === 'right' ? 1 : 0;
    const dy = currentDirection === 'up' ? -1 : currentDirection === 'down' ? 1 : 0;
    const newHead = { x: head.x + dx, y: head.y + dy };
    // 判断是否撞墙或者撞到自己
    if (newHead.x < 0 || newHead.x >= 30 || newHead.y < 0 || newHead.y >= 30) {
      gameOver = true;
    } else {
      for (let i = 1; i < snake.length; i++) {
        if (snake[i].x === newHead.x && snake[i].y === newHead.y) {
          gameOver = true;
          break;
        }
      }
    }
    // 判断是否吃到食物
    if (food && newHead.x === food.x && newHead.y === food.y) {
      score += 10;
      food = null;
    }
    // 如果没有食物，生成新的食物
    if (!food) {
      const x = Math.floor(Math.random() * 30);
      const y = Math.floor(Math.random() * 30);
      food = { x, y };
    } else {
      // 如果有食物，保持原来的位置
      food = { x: food.x, y: food.y };
    }
    // 更新贪吃蛇的状态
    if (!gameOver) {
      snake.unshift(newHead);
      if (score >= highScore) {
        highScore = score;
        wx.setStorage({
          key: 'highScore',
          data: highScore,
        });
      }
      while (snake.length > score / 10 + 1) {
        snake.pop();
      }
    }
  }
}

以上代码中，我们首先根据用户输入的方向计算出贪吃蛇的新位置。然后，我们检查贪吃蛇的新位置是否撞到墙或者撞到自己。如果撞到墙或者自己，我们就把gameOver设为true。如果贪吃蛇吃到了食物，我们就增加得分并生成新的食物。最后，我们更新贪吃蛇的状态，并保持贪吃蛇的长度为score / 10 + 1。

3. 总结

本文介绍了如何利用微信小程序开发贪吃蛇游戏，并提供了完整的游戏源码。在开发过程中，我们需要掌握canvas绘图技术，以及处理用户输入和更新游戏状态的方法。希望本文能够对大家有所帮助。