使用 Custom Elements 和 SVG 动画创建交互式游戏

前言

随着互联网技术的发展，人们越来越倾向于在数字世界中寻找娱乐和放松，尤其是在移动设备上。当然，这并不是说传统的桌面游戏已经过时了，但是我们需要更多的方式去探索数字游戏的可能性。本文将介绍一种基于 Custom Elements 和 SVG 动画的新型游戏开发方式，可以帮助你创建更有趣、更精致的交互式游戏。

术语

在开始介绍如何使用 Custom Elements 和 SVG 动画创建交互式游戏之前，我们需要了解一些术语。

Custom Elements

Custom Elements 是 HTML 标准的一部分，它提供了一种自定义 HTML 元素的方式。通过继承 HTMLElement，我们可以创建我们自己的自定义元素。

SVG

SVG 是可缩放矢量图形的缩写，是一种基于 XML 的图形格式。它支持动画、交互操作、图像缩放等功能。

动画

动画是将静态的图像按照一定方式进行连续显示，形成一种艺术效果的设计手法。在游戏中，动画可以提高游戏的体验和可玩性。

实现方式

在这里，我们将使用 Custom Elements 和 SVG 动画来实现一个简单的交互式游戏-打地鼠。

步骤一：创建自定义元素

我们首先需要创建自定义元素，这将是我们游戏的主角。在这个示例中，我们将使用该元素作为家鼠，当家鼠被玩家击中后，我们将通过 JavaScript 代码更新分数。下面是我们的自定义元素代码：

<custom-mole></custom-mole>

<style>
  custom-mole {
    display: block;
    width: 50px;
    height: 50px;
    background-color: #777;
    border-radius: 50%;
    position: relative;
    cursor: pointer;
  }
  custom-mole.active {
    background-color: #00a3cc;
    animation: shake 0.5s linear;
  }
  @keyframes shake {
    0% {
      transform: rotate(0);
    }
    10% {
      transform: rotate(10deg);
    }
    30% {
      transform: rotate(-10deg);
    }
    50% {
      transform: rotate(8deg);
    }
    70% {
      transform: rotate(-8deg);
    }
    90% {
      transform: rotate(6deg);
    }
    100% {
      transform: rotate(0);
    }
  }
</style>

<script>
  class CustomMole extends HTMLElement {
    constructor() {
      super();
      this.addEventListener("click", this.onClick.bind(this));
    }

    connectedCallback() {
      this.classList.add("active");
    }

    disconnectedCallback() {
      this.classList.remove("active");
    }

    onClick() {
      this.classList.remove("active");
      const score = document.querySelector("#score");
      score.innerText = parseInt(score.innerText) + 1;
    }
  }

  window.customElements.define("custom-mole", CustomMole);
</script>

上面的代码定义了一个自定义元素 CustomMole，它继承于 HTMLElement。在 constructor 中，我们为该元素绑定了 click 事件，这样当玩家点击元素时，就会触发 onClick 方法。在 connectedCallback 中，我们为该元素添加了一个 active 类，这个类将在玩家尚未击中地鼠时显示。在 disconnecedCallback 中，我们会移除 active 类。最后的 onClick 方法将会在玩家点击地鼠时被调用，我们将移除 active 类，并更新得分。

步骤二：创建 SVG 动画

我们需要创建一个 SVG 元素，作为地鼠洞播放动画。该动画将显示地鼠，并根据玩家的点击情况移动地鼠的位置。在每次适当的时间间隔内，我们会从地鼠的洞穴中派出地鼠。

下面是实现这一目标的代码：

<svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="background" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#004d6b" />
      <stop offset="100%" stop-color="#008CBA" />
    </linearGradient>
  </defs>
  <rect width="100%" height="100%" fill="url(#background)" />
  <g id="holes">
    <circle cx="17%" cy="75%" r="60" fill="#fff" />
    <circle cx="50%" cy="75%" r="60" fill="#fff" />
    <circle cx="83%" cy="75%" r="60" fill="#fff" />
  </g>
  <text id="score" x="50%" y="50" text-anchor="middle" stroke="#fff" stroke-width="2"
    font-size="60px" font-family="Arial"
    >0</text
  >
  <script>
    const HOLES = document.getElementById("holes").querySelectorAll("circle");
    let intervalId;

    function startInterval() {
      intervalId = setInterval(() => {
        const active = document.querySelector("custom-mole.active");
        if (active) {
          active.classList.remove("active");
        }
        const randomIndex = Math.floor(Math.random() * 3);
        HOLES[randomIndex].appendChild(new CustomMole());
      }, 750);
    }

    function stopInterval() {
      clearInterval(intervalId);
    }

    startInterval();
  </script>
</svg>

在这个代码中，我们创建了一个 SVG 元素，并定义了一个名为 background 的线性渐变填充、3 个洞穴的圆圈和一个得分计分牌。为了获得这些元素的引用，我们使用了 document.getElementById 和 document.querySelector 方法。最后，我们通过 setInterval 方法在一定的时间间隔内不断派出家鼠。

步骤三：启动游戏

好了，我们的游戏准备好了。现在，我们需要将上述代码整合在一起，并且在浏览器上显示游戏。你可以直接创建一个 HTML 文件，将代码复制到文件中，并在浏览器中打开该文件。在加载页面后，你将能看到一个具有可玩性的打地鼠游戏。

总结

在本文中，我们介绍了使用 Custom Elements 和 SVG 动画创建交互式游戏的方法。我们创建了一个简单的基于浏览器的打地鼠游戏。本文的重点在于，如何使用 Custom Elements 和 SVG 动画来构建视觉化元素和动画，而不需要依赖第三方库。这一技术不仅对于游戏开发非常有用，对于设计师和前端开发者也具有一定的参考价值。希望这篇文章能够帮助你更深入地了解 Custom Elements 和 SVG 动画，并激发你创造更多酷炫的互动游戏的灵感。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/659e61ceadd4f0e0ff75ade1