返回

来试试这款好玩有趣的刮刮乐，在浏览器中刮出你的奖品

前端

大家好，我是前端开发工程师张三，今天我想和大家分享一下我最近做的一个刮刮乐小游戏。这个游戏是用原生 JS 实现的，在浏览器中就可以玩。

中秋节快到了，我想做一款刮刮乐游戏来庆祝一下。正好前段时间我在学习原生 JS，就想着用原生 JS 来实现这个游戏。

这个游戏很简单，就是用鼠标在刮刮乐上刮，刮开之后就会出现奖品。奖品有实物奖品，也有虚拟奖品。实物奖品包括手机、平板电脑、笔记本电脑等。虚拟奖品包括游戏皮肤、游戏道具、游戏金币等。

这个游戏非常适合中秋节抽奖活动使用。店家可以在自己的网站上或者公众号上放一个刮刮乐链接，让顾客刮刮乐来抽奖。这样既可以吸引顾客，又可以增加节日的喜庆气氛。

如果你也想做一款刮刮乐游戏，可以参考我的代码。我的代码是开源的，可以在我的 GitHub 上找到。

这个游戏在浏览器中就可以玩，非常方便。如果你想玩一下，可以点击下面的链接：

[刮刮乐游戏链接]

希望大家喜欢这个游戏！

以下是这个游戏的详细实现步骤：

  1. 创建一个 HTML 文件，并添加以下代码：
<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <canvas id="canvas" width="500" height="300"></canvas>

  <script src="script.js"></script>
</body>
</html>
  1. 创建一个名为 script.js 的 JavaScript 文件，并添加以下代码：
// 获取 canvas 元素
const canvas = document.getElementById('canvas');

// 获取 canvas 的上下文
const ctx = canvas.getContext('2d');

// 创建一个新的刮刮乐实例
const scratchCard = new ScratchCard(canvas, ctx);

// 添加刮刮乐事件监听器
scratchCard.addEventListener('scratch', function(e) {
  // 获取刮开的区域
  const scratchedArea = e.detail;

  // 检查刮开的区域是否包含奖品
  const prize = scratchCard.checkPrize(scratchedArea);

  // 如果刮开的区域包含奖品，则显示奖品
  if (prize) {
    alert('恭喜你，你赢得了' + prize + '！');
  }
});
  1. 创建一个名为 ScratchCard.js 的 JavaScript 文件，并添加以下代码：
class ScratchCard {
  constructor(canvas, ctx) {
    this.canvas = canvas;
    this.ctx = ctx;

    // 创建一个新的图像对象
    this.image = new Image();

    // 将刮刮乐图片加载到图像对象中
    this.image.src = 'scratch_card.png';

    // 刮刮乐的宽度和高度
    this.width = canvas.width;
    this.height = canvas.height;

    // 刮刮乐的奖品
    this.prizes = ['一等奖', '二等奖', '三等奖', '四等奖', '五等奖'];

    // 创建一个新的刮刮乐层
    this.scratchLayer = document.createElement('canvas');
    this.scratchLayer.width = this.width;
    this.scratchLayer.height = this.height;

    // 获取刮刮乐层的上下文
    this.scratchCtx = this.scratchLayer.getContext('2d');

    // 将刮刮乐层添加到 canvas 元素中
    this.canvas.appendChild(this.scratchLayer);

    // 添加刮刮乐事件监听器
    this.scratchLayer.addEventListener('mousedown', this.onMouseDown.bind(this));
    this.scratchLayer.addEventListener('mousemove', this.onMouseMove.bind(this));
    this.scratchLayer.addEventListener('mouseup', this.onMouseUp.bind(this));
  }

  // 刮刮乐事件监听器
  onMouseDown(e) {
    this.isScratching = true;
    this.startX = e.clientX - this.canvas.offsetLeft;
    this.startY = e.clientY - this.canvas.offsetTop;
  }

  onMouseMove(e) {
    if (this.isScratching) {
      const x = e.clientX - this.canvas.offsetLeft;
      const y = e.clientY - this.canvas.offsetTop;

      // 在刮刮乐层上绘制一条线
      this.scratchCtx.beginPath();
      this.scratchCtx.moveTo(this.startX, this.startY);
      this.scratchCtx.lineTo(x, y);
      this.scratchCtx.stroke();

      // 更新刮刮乐的起始点
      this.startX = x;
      this.startY = y;

      // 派发刮刮乐事件
      const scratchedArea = {
        x: this.startX,
        y: this.startY,
        width: 10,
        height: 10
      };
      const event = new CustomEvent('scratch', {
        detail: scratchedArea
      });
      this.canvas.dispatchEvent(event);
    }
  }

  onMouseUp(e) {
    this.isScratching = false;
  }

  // 检查刮开的区域是否包含奖品
  checkPrize(scratchedArea) {
    // 获取刮开的区域的像素数据
    const imageData = this.ctx.getImageData(scratchedArea.x, scratchedArea.y, scratchedArea.width, scratchedArea.height);

    // 遍历刮开的区域的像素数据
    for (let i = 0; i < imageData.data.length; i += 4) {
      // 如果刮开的区域的像素是透明的，则该区域包含奖品
      if (imageData.data[i + 3] === 0) {
        return this.prizes[Math.floor(Math.random() * this.prizes.length)];
      }
    }

    // 如果刮开的区域不包含奖品，则返回 null
    return null;
  }
}

  1. 将 scratch_card.png 图片放在与 index.html 文件相同的目录中。

  2. 打开 index.html 文件，在浏览器中运行。

  3. 用鼠标在刮刮乐上刮，刮开之后就会出现奖品。

这就是这款刮刮乐游戏的实现过程。希望大家喜欢！