构建一个交互式刮刮卡网页游戏

介绍

在本项目中，我们将指导你完成创建一个简单的基于网页的刮刮卡游戏的过程。这个游戏允许用户刮掉灰色覆盖层，以显示底层图像，该图像要么是“中奖”信息，要么是“再试一次”信息。我们将使用 HTML 构建结构，CSS 进行样式设计，JavaScript 实现交互性。

👀 预览

🎯 任务

在本项目中，你将学习：

如何使用 HTML、CSS 和 JavaScript 设置一个基本的网页项目
如何操作 HTML5 画布以创建交互效果
如何使用 JavaScript 处理用户交互，如鼠标点击和移动
如何在网页开发中处理图像，包括动态加载和显示它们
如何实现一个简单的游戏逻辑，随机决定用户的结果

🏆 成果

完成本项目后，你将能够：

扎实理解 HTML5 画布及其在基于网页的游戏和交互式应用中的功能
熟练展示使用 JavaScript 创建动态内容并响应用户输入的能力
整合各种网页技术以创建一个完整且功能齐全的网页应用程序
为基于网页的游戏设计一个简单但引人入胜的用户界面
应用基本的游戏开发概念，如随机结果和用户交互

创建 HTML 结构

在这一步中，我们在index.html中设置网页的基本结构，包括DOCTYPE声明、html元素以及head和body部分。我们将字符集定义为 UTF-8 以实现通用字符识别，并设置视口以实现响应式设计，确保我们的刮刮卡应用在各种尺寸的设备上都能呈现良好的效果。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Scratch Card</title>
  </head>
  <body>
    <div id="main">
      <div class="msg">
        想试试手气吗？来试试！
        <a href="#" onclick="window.location.reload()">再试一次</a>
      </div>
      <div>
        <canvas></canvas>
      </div>
    </div>
    <script src="main.js"></script>
  </body>
</html>

在body内部，我们创建了一个id为“main”的div元素，它作为我们应用程序的容器。在这个容器中，我们包含了一个类名为“msg”的div，用于显示一条有趣的信息，邀请用户试试手气。这条信息还包括一个链接，点击该链接会重新加载页面，这样用户无需手动刷新浏览器就能再次尝试刮刮卡。

最后，我们包含了一个canvas元素，刮刮卡效果将在其中实现，并且我们链接了一个名为“main.js”的外部 JavaScript 文件，我们应用程序的逻辑将驻留在该文件中。

这种 HTML 结构为我们的刮刮卡应用提供了必要的基础，定义了将显示文本和可刮区域的位置。

设置画布样式

在main.js JavaScript 文件中，我们首先选择画布元素并应用一些初始样式。

const canvas = document.querySelector("canvas");
canvas.style.backgroundColor = "transparent";
canvas.style.position = "absolute";

我们将backgroundColor设置为“transparent”，以确保画布背景不会遮挡其所在网页的任何部分。通过将position设置为“absolute”，如果需要，我们可以更灵活地将画布定位在其他元素之上。

这一步对于准备画布元素至关重要，可确保它与网页的其余设计无缝集成，并为我们在后续步骤中添加的动态元素做好准备。

加载刮刮乐图像

在这里，我们加载一张随机图像作为刮刮卡的背景。

// 在 main.js 中继续

// 用于显示的可能图像数组
const images = ["winner.png", "try_again.png"];
const selectedImage = images[Math.floor(Math.random() * images.length)];

// 创建一个新的 Image 对象并设置源
const img = new Image();
img.src = selectedImage;

// 一旦图像加载完成，调整画布大小和背景
img.onload = () => {
  const ctx = canvas.getContext("2d");
  const w = img.width;
  const h = img.height;
  canvas.width = w;
  canvas.height = h;
  canvas.style.backgroundImage = `url(${img.src})`;

我们创建一个名为images的数组，其中包含可能图像的文件名。然后，我们使用Math.floor(Math.random() * images.length)从这个数组中随机选择一张图像。

我们创建一个新的Image对象，并将其源（src）设置为所选图像。onload事件监听器确保只有在图像完全加载后，我们才继续执行脚本的其余部分，防止在尝试操作尚未完全下载的图像时出现任何问题。

这一步对于刮刮卡的动态特性至关重要，因为每次加载或刷新应用程序时，它都会引入可变性和惊喜感。通过加载随机图像，我们模拟了真实刮刮卡的不确定结果，提升了用户体验。

准备刮刮层

在将所选图像加载到画布上之后，我们需要准备刮刮层。这通过用一个灰色矩形覆盖整个画布来实现。这个灰色层充当用户将与之交互以揭示下方图像的可刮表面。

// 在 main.js 中继续

// 用一个灰色矩形覆盖画布以充当刮刮层
ctx.fillStyle = "gray";
ctx.fillRect(0, 0, w, h);

// 为刮刮效果准备画布
ctx.globalCompositeOperation = "destination-out";

在这一步中，我们将填充样式设置为灰色，并绘制一个覆盖整个画布的矩形，在所选图像上创建一个可刮除层。globalCompositeOperation设置为"destination-out"可确保在画布上的任何新绘图都会使底层透明，从而在用户刮擦的任何地方都能显示下方的图像。

创建刮刮功能

为了实现刮刮效果，我们定义一个draw函数，每当用户与画布进行交互时就会调用该函数。此函数会检查用户当前是否正在绘制（isDrawing标志），然后计算光标或触摸点相对于画布的位置。然后，它会在该位置绘制一个圆，并通过合成操作使灰色层透明，从而显示下方的图像。

// 在 main.js 中继续

let isDrawing = false;

// 定义模拟刮刮的函数
const draw = (e) => {
  if (!isDrawing) return;
  e.preventDefault();
  const clientX = e.clientX || e.touches[0].clientX;
  const clientY = e.clientY || e.touches[0].clientY;
  const rect = canvas.getBoundingClientRect();
  const x = clientX - rect.left;
  const y = clientY - rect.top;

  // 在光标或触摸点位置绘制一个圆
  ctx.beginPath();
  ctx.arc(x, y, 10, 0, Math.PI * 2);
  ctx.fill();
};

此函数首先确保isDrawing标志为真，表明用户已启动刮刮操作。然后，它会计算刮刮发生的确切位置，并在该位置绘制一个圆，有效地刮掉灰色层以显示底层图像的部分内容。

为刮刮操作添加事件监听器

最后，我们需要检测用户何时在画布上执行操作以触发刮刮效果。

// 在 main.js 中继续

  // 用于处理鼠标和触摸交互的事件监听器
  canvas.addEventListener("mousedown", (e) => {
    isDrawing = true;
    draw(e);
  });
  canvas.addEventListener("touchstart", (e) => {
    isDrawing = true;
    draw(e);
  });
  canvas.addEventListener("mousemove", draw);
  canvas.addEventListener("touchmove", draw);
  canvas.addEventListener("mouseup", () => {
    isDrawing = false;
  });
  canvas.addEventListener("touchend", () => {
    isDrawing = false;
  });
}

我们为mousedown、mousemove、mouseup、touchstart、touchmove和touchend添加事件监听器。这些监听器设置isDrawing标志并相应地调用draw函数，以创建交互式刮刮效果。

当用户按下鼠标按钮或触摸屏幕（mousedown或touchstart）时，我们将isDrawing设置为true，并开始跟踪他们的移动以创建刮刮效果。当他们松开按钮或停止触摸屏幕（mouseup或touchend）时，我们将isDrawing设置为false，停止刮刮操作。只要isDrawing为true，mousemove和touchmove事件就会继续调用draw函数，允许用户在画布上移动鼠标或手指时刮掉灰色层并显示下方的图像。

要查看以下效果，请点击 WebIDE 右下角的“Go Live”按钮，然后切换到“Web 8080”标签页。

总结

在这个项目中，我们创建了一个简单的刮刮卡游戏，用户可以刮掉一层来显示隐藏的信息。我们设置了 HTML 结构，在 JavaScript 中初始化了画布，加载并显示了图像，并使用画布 API 实现了刮刮效果。这个项目可以为网页增添乐趣，并且可以通过多种方式进行扩展，比如添加更多图像、改进设计或者将其集成到一个更大的游戏中。

构建一个刮刮卡网页游戏

介绍