📌  相关文章
📜  javascript 爆炸空间 - Javascript (1)

📅  最后修改于: 2023-12-03 14:42:36.981000             🧑  作者: Mango

JavaScript 爆炸空间 - Introduction

JavaScript 是一种强力的编程语言，对于 Web 开发者来说是必修的技能之一。而本篇文章将介绍如何利用 JavaScript 的一些特性来实现一个爆炸空间效果，让界面更加生动，增加用户的使用体验。

效果展示

在介绍该效果之前，让我们先看一下效果图：

Explosion Space GIF

当用户点击页面空白处时，浏览器会随机产生一个圆形的爆炸动画，同时有伴随着爆炸声音。

实现过程
找到爆炸的位置

我们先在 HTML 文件中添加一个监听事件：

<body onclick="createExplosion(event)">

当用户点击页面时，该事件会触发 createExplosion 函数。接下来我们分别处理 JS 文件中的 createExplosion 函数。

let createExplosion = function(event) {
  // 获取爆炸的位置
  let explosionPosition = {x: event.clientX, y: event.clientY};
  ...
};

event.clientX 和 event.clientY 来获取鼠标点的位置坐标。

新建圆形爆炸画布

接着我们需要在鼠标点击的位置建立一个画布来实现圆形爆炸特效：

let createExplosion = function(event) {
  // 获取爆炸的位置
  let explosionPosition = {x: event.clientX, y: event.clientY};

  // 创建爆炸画布
  let explosionCanvas = document.createElement("canvas");
  explosionCanvas.width = 300;  // 设置画布宽度
  explosionCanvas.height = 300; // 设置画布高度
  explosionCanvas.style.position = "absolute";
  explosionCanvas.style.left = explosionPosition.x - explosionCanvas.width / 2 + "px";
  explosionCanvas.style.top = explosionPosition.y - explosionCanvas.height / 2 + "px";
  document.body.appendChild(explosionCanvas);

  ...
};

我们新建了一个 canvas 元素，并设置了画布的宽度和高度。由于我们将要把画布放置在页面鼠标点击处，所以需要设置画布的位置为 absolute 并设置 left 和 top 座标。

实现圆形爆炸特效

为了实现画布内圆形爆炸的效果，我们需要依赖 canvas 的 context API。

let createExplosion = function(event) {
  // 获取爆炸的位置
  let explosionPosition = {x: event.clientX, y: event.clientY};

  // 创建爆炸画布
  let explosionCanvas = document.createElement("canvas");
  explosionCanvas.width = 300;  // 设置画布宽度
  explosionCanvas.height = 300; // 设置画布高度
  explosionCanvas.style.position = "absolute";
  explosionCanvas.style.left = explosionPosition.x - explosionCanvas.width / 2 + "px";
  explosionCanvas.style.top = explosionPosition.y - explosionCanvas.height / 2 + "px";
  document.body.appendChild(explosionCanvas);

  // 获取画布的 context
  let explosionContext = explosionCanvas.getContext("2d");

  // 绘制圆形爆炸
  let radius = explosionCanvas.width / 2;
  let explosionGradient = explosionContext.createRadialGradient(radius, radius, 0, radius, radius, radius);
  explosionGradient.addColorStop(0, "white");
  explosionGradient.addColorStop(0.1, "red");
  explosionGradient.addColorStop(0.2, "orange");
  explosionGradient.addColorStop(0.3, "yellow");
  explosionGradient.addColorStop(0.4, "green");
  explosionGradient.addColorStop(0.5, "blue");
  explosionGradient.addColorStop(0.6, "indigo");
  explosionGradient.addColorStop(0.7, "violet");
  explosionGradient.addColorStop(0.8, "black");
  explosionContext.fillStyle = explosionGradient;
  explosionContext.fillRect(0, 0, explosionCanvas.width, explosionCanvas.height);
  ...
};

我们先通过 getContext() 获取画布的上下文，接着确定了圆形的半径。然后使用 createRadialGradient() 函数定制了一个渐变色，随后使用 fillStyle() 来设置填充颜色，最后调用了 fillRect() 函数来在画布上绘制圆形爆炸。

添加动画特效

为了让圆形爆炸看起来更加真实，同时加上动画特效以吸引用户的注意力，我们需要在绘制完成后使用 setInterval 来实现一个动画效果。

let createExplosion = function(event) {
  // 获取爆炸的位置
  let explosionPosition = {x: event.clientX, y: event.clientY};

  // 创建爆炸画布
  let explosionCanvas = document.createElement("canvas");
  explosionCanvas.width = 300;  // 设置画布宽度
  explosionCanvas.height = 300; // 设置画布高度
  explosionCanvas.style.position = "absolute";
  explosionCanvas.style.left = explosionPosition.x - explosionCanvas.width / 2 + "px";
  explosionCanvas.style.top = explosionPosition.y - explosionCanvas.height / 2 + "px";
  document.body.appendChild(explosionCanvas);

  // 获取画布的 context
  let explosionContext = explosionCanvas.getContext("2d");

  // 绘制圆形爆炸
  let radius = explosionCanvas.width / 2;
  let explosionGradient = explosionContext.createRadialGradient(radius, radius, 0, radius, radius, radius);
  explosionGradient.addColorStop(0, "white");
  explosionGradient.addColorStop(0.1, "red");
  explosionGradient.addColorStop(0.2, "orange");
  explosionGradient.addColorStop(0.3, "yellow");
  explosionGradient.addColorStop(0.4, "green");
  explosionGradient.addColorStop(0.5, "blue");
  explosionGradient.addColorStop(0.6, "indigo");
  explosionGradient.addColorStop(0.7, "violet");
  explosionGradient.addColorStop(0.8, "black");
  explosionContext.fillStyle = explosionGradient;
  explosionContext.fillRect(0, 0, explosionCanvas.width, explosionCanvas.height);

  // 添加 canvas 动画
  let frames = [
    {scale: 1, opacity: 1},
    {scale: 1.8, opacity: 0}
  ];
  let currentFrame = 0;
  let x = explosionPosition.x - explosionCanvas.width / 2;
  let y = explosionPosition.y - explosionCanvas.height / 2;
  let explosionAnimation = setInterval(function() {
    explosionContext.clearRect(0, 0, explosionCanvas.width, explosionCanvas.height);
    explosionContext.save();
    explosionContext.translate(x, y);
    explosionContext.scale(frames[currentFrame].scale, frames[currentFrame].scale);
    explosionContext.globalAlpha = frames[currentFrame].opacity;
    explosionContext.fillRect(0, 0, explosionCanvas.width, explosionCanvas.height);
    explosionContext.restore();
    currentFrame++;
    if (currentFrame === frames.length) {
      clearInterval(explosionAnimation);
      document.body.removeChild(explosionCanvas);
    }
  }, 50);
};

使用 setInterval() 函数绑定动画效果，并按照 50 毫秒更新一次，以达到比较平滑的效果。setInterval() 间隔调用之间，该函数会清除画布，并且每次重新定位和缩放动画。

添加音效

最后再让我们来添加一些音效，以提高用户的使用体验。

let createExplosion = function(event) {
  // ...

  // 添加声音
  let explosionAudio = new Audio();
  explosionAudio.src = "explosion.mp3";
  explosionAudio.play();
};

通过 new Audio() 来创建新的音效实例，指定声音文件的 URL 并调用 play() 函数开始播放。

结束语

在本文中，我们学习了如何利用 Javascript 和 Canvas 来创建一个爆炸空间效果。这个脚本可以在不影响用户体验的情况下为你的网站或者程序添加一些可爱的特效。