当前位置：首页 > 文章咨询 > 正文内容

完整代码（网页版）

admin2个月前 (02-17)文章咨询36

要实现一个"球球刷爱心"的互动小程序，我们可以用HTML5 Canvas来创建一个网页版的demo，包含小球跟随鼠标、点击生成爱心、收集爱心计数等核心功能，以下是完整的实现代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">球球刷爱心</title>
  <style>
    * { margin: 0; padding: 0; }
    body { overflow: hidden; background: #f8f9fa; }
    canvas { display: block; }
  </style>
</head>
<body>
  <canvas id="canvas"></canvas>
  <script>
    // 获取Canvas和上下文
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    let canvasWidth = window.innerWidth;
    let canvasHeight = window.innerHeight;
    canvas.width = canvasWidth;
    canvas.height = canvasHeight;
    // 小球类
    class Ball {
      constructor() {
        this.x = canvasWidth / 2;
        this.y = canvasHeight / 2;
        this.radius = 25;
        this.color = '#ff5252';
        this.speed = 5; // 跟随鼠标的平滑速度
      }
      update(targetX, targetY) {
        // 平滑跟随鼠标
        this.x += (targetX - this.x) / this.speed;
        this.y += (targetY - this.y) / this.speed;
      }
      draw() {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
        ctx.fillStyle = this.color;
        ctx.fill();
        ctx.shadowBlur = 10;
        ctx.shadowColor = this.color;
        ctx.closePath();
      }
    }
    // 爱心类
    class Heart {
      constructor(x, y) {
        this.x = x;
        this.y = y;
        this.size = Math.random() * 15 + 10; // 随机大小
        this.color = `hsl(${Math.random() * 20 + 340}, 100%, 70%)`; // 粉色系
        this.speedY = Math.random() * 1.5 + 0.5; // 上升速度
        this.rotateSpeed = Math.random() * 0.06 - 0.03; // 旋转速度
        this.rotation = 0;
        this.life = 120; // 生命周期（帧）
      }
      update() {
        this.y -= this.speedY;
        this.rotation += this.rotateSpeed;
        this.life--;
      }
      draw() {
        ctx.save();
        ctx.translate(this.x, this.y);
        ctx.rotate(this.rotation);
        ctx.scale(this.size / 20, this.size / 20);
        // 绘制爱心路径
        ctx.beginPath();
        ctx.moveTo(0, 10);
        ctx.bezierCurveTo(15, -15, 30, 5, 0, 30);
        ctx.bezierCurveTo(-30, 5, -15, -15, 0, 10);
        ctx.fillStyle = this.color;
        ctx.fill();
        ctx.shadowBlur = 5;
        ctx.shadowColor = this.color;
        ctx.closePath();
        ctx.restore();
      }
    }
    // 全局变量
    let ball = new Ball();
    let hearts = [];
    let score = 0;
    let mouseX = canvasWidth / 2;
    let mouseY = canvasHeight / 2;
    // 事件监听
    canvas.addEventListener('mousemove', (e) => {
      mouseX = e.clientX;
      mouseY = e.clientY;
    });
    canvas.addEventListener('click', (e) => {
      // 每次点击生成多个爱心
      for (let i = 0; i < 3; i++) {
        hearts.push(new Heart(
          e.clientX + Math.random() * 30 - 15,
          e.clientY + Math.random() * 30 - 15
        ));
      }
    });
    window.addEventListener('resize', () => {
      canvasWidth = window.innerWidth;
      canvasHeight = window.innerHeight;
      canvas.width = canvasWidth;
      canvas.height = canvasHeight;
    });
    // 碰撞检测
    function checkCollision(ball, heart) {
      const dx = ball.x - heart.x;
      const dy = ball.y - heart.y;
      const distance = Math.sqrt(dx * dx + dy * dy);
      return distance < ball.radius + heart.size / 2;
    }
    // 渲染循环
    function animate() {
      requestAnimationFrame(animate);
      // 半透明背景（保留轨迹效果）
      ctx.fillStyle = 'rgba(255,255,255,0.15)';
      ctx.fillRect(0, 0, canvasWidth, canvasHeight);
      // 更新小球
      ball.update(mouseX, mouseY);
      ball.draw();
      // 更新爱心
      for (let i = hearts.length - 1; i >= 0; i--) {
        const heart = hearts[i];
        heart.update();
        heart.draw();
        // 碰撞检测
        if (checkCollision(ball, heart)) {
          score++;
          hearts.splice(i, 1);
        }
        // 生命周期结束移除
        if (heart.life <= 0) {
          hearts.splice(i, 1);
        }
      }
      // 绘制分数
      ctx.fillStyle = '#333';
      ctx.font = 'bold 28px Arial';
      ctx.fillText(`爱心数: ${score}`, 30, 50);
      ctx.shadowBlur = 0;
    }
    // 启动动画
    animate();
  </script>
</body>
</html>