利用小程序变速旋转实现精彩大转盘抽奖

2024-01-03 19:57:36

在这个令人兴奋的互联网时代，小程序的应用已经渗透到生活的各个角落，从购物、支付到游戏、社交，小程序都在发挥着重要作用。在本教程中，我们将使用小程序（以字节小程序为例）来创建一个大转盘抽奖游戏，让用户在轻松愉快的互动中获得惊喜。

1. 创建小程序项目

首先，你需要创建一个小程序项目。如果你还没有小程序项目，可以在小程序开发工具中新建一个项目。项目创建完成后，在项目目录中找到pages文件夹，并在其中创建一个名为lucky_wheel的文件夹。在这个文件夹中，新建一个页面文件index.js和样式文件index.css。

2. 设计大转盘界面

打开index.js文件，在其中添加以下代码来设计大转盘的界面：

Page({
  data: {
    prizes: ['一等奖', '二等奖', '三等奖', '四等奖', '五等奖'],
    currentPrize: '',
    rotating: false,
    speed: 500, // 转速，单位ms
    acceleration: 100, // 加速度，单位ms^2
  },
  onLoad() {
    this.initCanvas();
  },
  initCanvas() {
    const ctx = wx.createCanvasContext('lucky-wheel');
    const canvasWidth = 300;
    const canvasHeight = 300;
    const centerX = canvasWidth / 2;
    const centerY = canvasHeight / 2;
    const radius = 100;

    // 绘制转盘
    ctx.beginPath();
    ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
    ctx.fillStyle = '#ff0000';
    ctx.fill();

    // 绘制奖品
    for (let i = 0; i < this.data.prizes.length; i++) {
      const angle = 2 * Math.PI / this.data.prizes.length * i;
      const x = centerX + radius * Math.cos(angle);
      const y = centerY + radius * Math.sin(angle);

      ctx.beginPath();
      ctx.arc(x, y, 20, 0, 2 * Math.PI);
      ctx.fillStyle = '#ffffff';
      ctx.fill();

      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      ctx.fillStyle = '#000000';
      ctx.fillText(this.data.prizes[i], x, y);
    }

    ctx.draw();
  },
  startRotate() {
    this.setData({ rotating: true });
    let speed = this.data.speed;
    let acceleration = this.data.acceleration;
    let angle = 0;

    const timer = setInterval(() => {
      if (speed > 1000) {
        speed = 1000;
      }
      angle += speed / 1000;
      speed += acceleration / 1000;

      const ctx = wx.createCanvasContext('lucky-wheel');
      ctx.translate(150, 150);
      ctx.rotate(angle);
      ctx.drawImage('../../images/lucky-wheel.png', -150, -150, 300, 300);
      ctx.draw();

      if (speed > 900) {
        speed -= 100;
      }

      if (speed < 100) {
        clearInterval(timer);
        this.setData({ rotating: false });
        this.stopRotate();
      }
    }, speed);
  },
  stopRotate() {
    const ctx = wx.createCanvasContext('lucky-wheel');
    ctx.translate(150, 150);
    ctx.rotate(Math.PI * 2);
    ctx.drawImage('../../images/lucky-wheel.png', -150, -150, 300, 300);
    ctx.draw();

    const prize = this.data.prizes[Math.floor(Math.random() * this.data.prizes.length)];
    this.setData({ currentPrize: prize });
  },
});

3. 添加交互功能

在index.js文件中添加交互功能代码，以便用户可以点击按钮来开始抽奖：

Page({
  // ... 其他代码

  startRotate() {
    this.setData({ rotating: true });
    let speed = this.data.speed;
    let acceleration = this.data.acceleration;
    let angle = 0;

    const timer = setInterval(() => {
      if (speed > 1000) {
        speed = 1000;
      }
      angle += speed / 1000;
      speed += acceleration / 1000;

      const ctx = wx.createCanvasContext('lucky-wheel');
      ctx.translate(150, 150);
      ctx.rotate(angle);
      ctx.drawImage('../../images/lucky-wheel.png', -150, -150, 300, 300);
      ctx.draw();

      if (speed > 900) {
        speed -= 100;
      }

      if (speed < 100) {
        clearInterval(timer);
        this.setData({ rotating: false });
        this.stopRotate();
      }
    }, speed);
  },

  stopRotate() {
    const ctx = wx.createCanvasContext('lucky-wheel');
    ctx.translate(150, 150);
    ctx.rotate(Math.PI * 2);
    ctx.drawImage('../../images/lucky-wheel.png', -150, -150, 300, 300);
    ctx.draw();

    const prize = this.data.prizes[Math.floor(Math.random() * this.data.prizes.length)];
    this.setData({ currentPrize: prize });
  },
});

4. 添加样式

打开index.css文件，添加以下样式来美化大转盘的界面：

/* 大转盘容器 */
.lucky-wheel-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 转盘画布 */
.lucky-wheel-canvas {
  width: 300px;
  height: 300px;
}

/* 奖品列表 */
.lucky-wheel-prizes {
  list-style-position: inside;
  list-style-type: none;
  padding: 0;
}

/* 奖品列表项 */
.lucky-wheel-prizes li {
  font-size: 16px;
  margin-bottom: 10px;
}

/* 按钮 */
.lucky-wheel-button {
  width: 100px;
  height: 40px;
  background-color: #ff0000;
  color: #ffffff;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
}