uniappp小程序做一个红包雨的功能

uniappp小程序做一个红包雨的功能

需求：
首先，您需要在页面中添加一个画布元素，用于绘制红包雨效果。

在页面加载完成后，使用JavaScript中的setInterval()方法定时执行绘制红包雨的函数。

在绘制函数中，首先清空画布，然后绘制红包雨的背景图。

接着，生成一定数量的红包，并将它们添加到一个数组中。

在每个时间间隔内，遍历红包数组，更新每个红包的位置，并绘制到画布上。

当红包的位置超出画布范围时，将其从数组中移除。

在绘制函数中，还需要判断用户是否点击了红包，如果点击了，则触发红包打开的动画效果，并将红包从数组中移除。

最后，还需要添加一些配置项，例如红包的数量、速度、大小等，以及红包打开的奖励内容等

好的，以下是一个简单的uniapp小程序红包雨的实现代码：
在页面中添加一个画布元素：

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

在页面的onLoad生命周期函数中，初始化画布和红包数组：

onLoad() {
  this.ctx = uni.createCanvasContext('canvas', this);
  this.width = uni.getSystemInfoSync().windowWidth;
  this.height = uni.getSystemInfoSync().windowHeight;
  this.ctx.canvas.width = this.width;
  this.ctx.canvas.height = this.height;
  this.redPackets = [];
}

在页面的onReady生命周期函数中，使用setInterval()方法定时执行绘制红包雨的函数：

onReady() {
  setInterval(() => {
    this.draw();
  }, 30);
}

在绘制函数中，首先清空画布，然后绘制红包雨的背景图：

draw() {
  this.ctx.clearRect(0, 0, this.width, this.height);
  this.ctx.drawImage('背景图路径', 0, 0, this.width, this.height);
}

接着，生成一定数量的红包，并将它们添加到红包数组中：

generateRedPacket() {
  const redPacket = {
    x: Math.random() * this.width,
    y: -50,
    speed: Math.random() * 5 + 5,
    size: Math.random() * 30 + 30,
    opened: false
  };
  this.redPackets.push(redPacket);
}

在每个时间间隔内，遍历红包数组，更新每个红包的位置，并绘制到画布上：

updateRedPackets() {
  for (let i = 0; i < this.redPackets.length; i++) {
    const redPacket = this.redPackets[i];
    redPacket.y += redPacket.speed;
    this.ctx.drawImage('红包图路径', redPacket.x, redPacket.y, redPacket.size, redPacket.size);
  }
}

当红包的位置超出画布范围时，将其从数组中移除：

removeRedPackets() {
  for (let i = 0; i < this.redPackets.length; i++) {
    const redPacket = this.redPackets[i];
    if (redPacket.y > this.height) {
      this.redPackets.splice(i, 1);
      i--;
    }
  }
}

在绘制函数中，还需要判断用户是否点击了红包，如果点击了，则触发红包打开的动画效果，并将红包从数组中移除：

handleClick(e) {
  const x = e.touches[0].clientX;
  const y = e.touches[0].clientY;
  for (let i = 0; i < this.redPackets.length; i++) {
    const redPacket = this.redPackets[i];
    if (x >= redPacket.x && x <= redPacket.x + redPacket.size && y >= redPacket.y && y <= redPacket.y + redPacket.size) {
      redPacket.opened = true;
      // 触发红包打开的动画效果
      this.redPackets.splice(i, 1);
      i--;
    }
  }
}

最后，您还需要添加一些配置项，例如红包的数量、速度、大小等，以及红包打开的奖励内容等。
完整代码如下：

<template>
  <canvas id="canvas" style="width: 100%; height: 100%;" @touchstart="handleClick"></canvas>
</template>

<script>
export default {
  data() {
    return {
      ctx: null,
      width: 0,
      height: 0,
      redPackets: []
    };
  },
  onLoad() {
    this.ctx = uni.createCanvasContext('canvas', this);
    this.width = uni.getSystemInfoSync().windowWidth;
    this.height = uni.getSystemInfoSync().windowHeight;
    this.ctx.canvas.width = this.width;
    this.ctx.canvas.height = this.height;
    this.generateRedPacket();
  },
  onReady() {
    setInterval(() => {
      this.draw();
    }, 30);
  },
  methods: {
    draw() {
      this.ctx.clearRect(0, 0, this.width, this.height);
      this.ctx.drawImage('背景图路径', 0, 0, this.width, this.height);
      this.updateRedPackets();
      this.removeRedPackets();
    },
    generateRedPacket() {
      const redPacket = {
        x: Math.random() * this.width,
        y: -50,
        speed: Math.random() * 5 + 5,
        size: Math.random() * 30 + 30,
        opened: false
      };
      this.redPackets.push(redPacket);
    },
    updateRedPackets() {
      for (let i = 0; i < this.redPackets.length; i++) {
        const redPacket = this.redPackets[i];
        redPacket.y += redPacket.speed;
        this.ctx.drawImage('红包图路径', redPacket.x, redPacket.y, redPacket.size, redPacket.size);
      }
    },
    removeRedPackets() {
      for (let i = 0; i < this.redPackets.length; i++) {
        const redPacket = this.redPackets[i];
        if (redPacket.y > this.height) {
          this.redPackets.splice(i, 1);
          i--;
        }
      }
    },
    handleClick(e) {
      const x = e.touches[0].clientX;
      const y = e.touches[0].clientY;
      for (let i = 0; i < this.redPackets.length; i++) {
        const redPacket = this.redPackets[i];
        if (x >= redPacket.x && x <= redPacket.x + redPacket.size && y >= redPacket.y && y <= redPacket.y + redPacket.size) {
          redPacket.opened = true;
          // 触发红包打开的动画效果
          this.redPackets.splice(i, 1);
          i--;
        }
      }
    }
  }
};
</script>