微信小程序canvas开发水果老虎机的思路详解

1. 简介

本篇教程主要介绍了如何使用微信小程序的Canvas API来开发一个老虎机游戏。游戏的主要流程是：用户按下开始按钮，老虎机开始滚动，最后停留在随机选中的水果图案上，显示用户是否中奖。其中，游戏的UI界面通过Canvas绘制实现。

2. 开发步骤

2.1 构建UI界面

首先，我们需要通过Canvas API来构建游戏界面的各个元素：

• 画板：用于绘制整个游戏界面的背景，尺寸建议设置为屏幕的宽高；
• 窗口：用于显示老虎机滚动的水果图案，尺寸建议设置为画板的一半大小，即屏幕宽度的一半，高度自定义；
• 按钮：用于触发游戏开始，尺寸和位置自定义。

<!-- 页面文件 -->
<canvas bindtap="startGame" canvas-id="gameCanvas"></canvas>

// JS文件
// 获取画板和上下文
var canvas = wx.createCanvasContext('gameCanvas');
// 画板的宽高
var screenWidth = wx.getSystemInfoSync().screenWidth;//屏幕宽度
var screenHeight = wx.getSystemInfoSync().screenHeight;//屏幕高度

// 绘制画板
canvas.setFillStyle('#777');
canvas.fillRect(0,0,screenWidth,screenHeight);

// 绘制老虎机窗口
var windowWidth = screenWidth / 2;
var windowHeight = 200;
canvas.setFillStyle('#fff');
canvas.fillRect((screenWidth - windowWidth) / 2,20,windowWidth,windowHeight);

// 绘制游戏开始按钮
var buttonWidth = 80;
var buttonHeight = 40;
canvas.setFillStyle('#f00');
canvas.fillRect((screenWidth - buttonWidth) / 2,screenHeight - 100,buttonWidth,buttonHeight);
canvas.setFillStyle('#fff');
canvas.setFontSize(20);
canvas.setTextAlign('center');
canvas.setTextBaseline('middle');
canvas.fillText('开始',screenWidth / 2,screenHeight - 80);

canvas.draw(); // 绘制画板

2.2 开始游戏

当用户按下开始按钮后，老虎机开始滚动，直到随机选中一个水果图案。游戏的开始通过触发Canvas动画来实现，每隔一段时间，更新一次窗口中的图片，并使图片位置下移，产生滚动效果，直到最终选中一个水果图案为止。

// JS文件
var game = {
  isRunning: false, // 标记游戏是否已经开始运行
  currentInterval: 0, // 当前定时器的ID
  x: 0, // 图片的初始位置
  y: 0,
  vx: 0, // 图片的运动速度
  vy: 0,
  vLimit: 20, // 图片的最大速度
  acceleration: 1, // 图片的加速度
  imgList: ['apple.png', 'banana.png', 'orange.png'], // 水果图案的数组
  imgIndex: 0, // 选中的水果图案的下标
  windowWidth: screenWidth / 2,
  windowHeight: 200,
  windowTop: 20,
  buttonWidth: 80,
  buttonHeight: 40,
  buttonTop: screenHeight - 100,

  // 开始游戏
  startGame: function() {
    if (this.isRunning) {
      return false;
    }

    this.isRunning = true;
    this.currentInterval = setInterval(this.update, 50);
  },

  // 更新Canvas状态
  update: function() {
    var _this = game;

    // 1. 清空窗口
    canvas.clearRect((_this.screenWidth - _this.windowWidth) / 2,_this.windowTop,_this.windowWidth,_this.windowHeight);

    // 2. 绘制水果图案
    canvas.drawImage(_this.getImgUrl(),_this.x,_this.y, _this.windowWidth, _this.windowHeight);

    // 3. 更新位置和速度
    _this.x += _this.vx;
    _this.y += _this.vy;
    _this.vy += _this.acceleration;

    if (Math.abs(_this.vy) > _this.vLimit) {
      _this.vy = _this.vLimit * (_this.vy / Math.abs(_this.vy));
    }

    // 4. 判断是否超出窗口范围
    if (_this.y > (_this.windowTop + _this.windowHeight)) {
      _this.y = _this.windowTop - _this.windowHeight;
    }

    // 5. 判断是否滚动到最终位置
    if (_this.vx === 0 && _this.vy === 0) {
      _this.isRunning = false;
      clearInterval(_this.currentInterval);
      wx.showToast({
        title: _this.imgList[_this.imgIndex] + ' 中奖啦！',
        icon: 'success',
        duration: 1500
      });
    }

    canvas.draw();
  },

  // 获取随机水果图案的URL
  getImgUrl: function() {
    this.imgIndex = Math.floor(Math.random() * this.imgList.length);
    return '/images/' + this.imgList[this.imgIndex];
  }
};

// 绑定按钮的事件处理函数
function startGame() {
  game.startGame();
}

// 将Canvas绘制的游戏界面显示在页面中
var ctx = wx.createCanvasContext('gameCanvas');
ctx.draw();

3. 示例说明

3.1 示例一

如何绘制一个长方形，并为其设置样式（填充色和边框色）？

<!-- 页面文件 -->
<canvas canvas-id="rectangle"></canvas>

// JS文件
var ctx = wx.createCanvasContext('rectangle');

ctx.setFillStyle('red');
ctx.setStrokeStyle('blue');
ctx.fillRect(20, 20, 100, 50);
ctx.strokeRect(20, 20, 100, 50);

ctx.draw();

3.2 示例二

如何为Canvas绑定触摸事件，并在事件中获取触点的位置？

<!-- 页面文件 -->
<canvas canvas-id="touch"></canvas>

// JS文件
var ctx = wx.createCanvasContext('touch');

ctx.beginPath();
ctx.lineTo(100, 100);
ctx.lineTo(150, 150);
ctx.stroke();

ctx.draw();

// Canvas触摸事件的处理函数
function touchHandler(evt) {
  var touches = evt.touches;
  var touch = touches[0];
  var x = touch.x;
  var y = touch.y;

  console.log('Touch point:', x, y);
}

// 为Canvas绑定触摸事件
wx.createSelectorQuery().select('#touch').fields({
  node: true,
  size: true
}).exec(function(res) {
  res[0].node.addEventListener('touchstart', touchHandler, false);
});

4. 总结

通过本篇教程的学习，我们掌握了如何使用微信小程序的Canvas API来开发一个水果老虎机游戏。关键在于理解Canvas API的绘图过程和状态管理，以及如何利用Canvas的动画功能来实现游戏的滚动效果。希望本篇教程可以对大家的学习和开发工作有所帮助。