HTML+CSS+JavaScript实现鼠标点击烟花效果，打造炫酷网页交互！

2023-09-14 16:59:37

鼠标点击烟花：使用 HTML、CSS 和 JavaScript 点亮你的网页

简介

为你的网页增添互动性和视觉趣味，让鼠标点击烟花绽放吧！通过巧妙地利用 HTML、CSS 和 JavaScript 的强大功能，你可以轻松实现这一效果。让我们踏上探索之旅，揭开创建鼠标点击烟花效果的奥秘吧！

HTML 的支柱

超文本标记语言 (HTML) 为我们的网页搭建结构和内容的框架。首先，创建一个 HTML 文件，包含以下代码：

<!DOCTYPE html>
<html>
<head>

  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>
<body>
  <h1>鼠标点击烟花效果</h1>
  <canvas id="canvas" width="800" height="600"></canvas>
</body>
</html>

在这个代码中，我们创建了一个基本的网页结构，其中包含一个名为 "canvas" 的元素。这个画布元素将成为烟花绽放的舞台。

CSS 的魅力

层叠样式表 (CSS) 负责网页的视觉呈现，赋予其独特的风格。为此，创建一个 CSS 文件并添加以下代码：

canvas {
  background-color: black;
}

这行代码将画布元素的背景色设置为黑色，为即将到来的烟花表演营造一个深沉而神秘的背景。

JavaScript 的魔力

JavaScript 作为一种脚本语言，为网页注入交互性和动态效果。创建 JavaScript 文件并添加以下代码：

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// 设置画布尺寸
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 定义烟花类
class Firework {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.vx = 0;
    this.vy = 0;
    this.size = 10;
    this.color = "white";
  }

  // 更新烟花的位置和速度
  update() {
    this.x += this.vx;
    this.y += this.vy;

    // 加速度
    this.vy += 0.1;

    // 如果烟花到达底部，则将其移除
    if (this.y > canvas.height) {
      this.remove();
    }
  }

  // 绘制烟花
  draw() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
    ctx.fillStyle = this.color;
    ctx.fill();
  }

  // 移除烟花
  remove() {
    const index = fireworks.indexOf(this);
    fireworks.splice(index, 1);
  }
}

// 定义烟花列表
const fireworks = [];

// 创建烟花
function createFirework(x, y) {
  const firework = new Firework(x, y);
  fireworks.push(firework);
}

// 更新烟花
function updateFireworks() {
  for (const firework of fireworks) {
    firework.update();
  }
}

// 绘制烟花
function drawFireworks() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  for (const firework of fireworks) {
    firework.draw();
  }
}

// 鼠标点击事件
canvas.addEventListener("click", (e) => {
  const x = e.clientX;
  const y = e.clientY;

  createFirework(x, y);
});

// 运行游戏循环
function gameLoop() {
  updateFireworks();
  drawFireworks();

  requestAnimationFrame(gameLoop);
}

gameLoop();