掘金一周金选作者公布！还有Canvas复刻明日方舟粒子动画

前端

2023-09-28 12:34:15

## 掘金周报：11.9 最新动态

嘿，大家好！欢迎来到掘金周报，我们将带你回顾本周的精彩内容。

## 金选作者公布

恭喜以下作者荣膺掘金9-10月金选称号：

飞云之下
我是渣渣辉
张浩
进击的小猹
马西西里
寒小阳
秋日胜春朝
9个柠檬

他们用精彩的文章和项目打动了我们，让我们向他们致敬！

## 游戏制作思路大合集

Github上有一份不容错过的游戏制作思路合集，包含了5.3k个创意。涵盖各种类型和题材，助你找到灵感，开启你的游戏制作之旅。

## Canvas复刻明日方舟粒子动画

一位掘友用Canvas复刻了明日方舟中的粒子动画效果，非常酷炫！如果你对Canvas感兴趣，一定不要错过这篇教程。

## AB实验为何值得信赖

AB实验是一种强大的实验方法，可帮助你测试不同方案的效果。本文将深入分析AB实验的可靠性，并提供实用的技巧。

## 子标题

### 代码示例

// 创建Canvas并获取上下文
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// 设置画布大小
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 绘制粒子动画
function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 创建粒子
  for (let i = 0; i < 100; i++) {
    const particle = {
      x: Math.random() * canvas.width,
      y: Math.random() * canvas.height,
      vx: (Math.random() - 0.5) * 2,
      vy: (Math.random() - 0.5) * 2,
      radius: Math.random() * 5 + 1,
      color: `rgba(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255}, 1)`
    };

    particles.push(particle);
  }

  // 移动粒子
  for (let i = 0; i < particles.length; i++) {
    const particle = particles[i];

    particle.x += particle.vx;
    particle.y += particle.vy;

    // 碰撞检测
    if (particle.x < 0 || particle.x > canvas.width) {
      particle.vx = -particle.vx;
    }
    if (particle.y < 0 || particle.y > canvas.height) {
      particle.vy = -particle.vy;
    }

    // 绘制粒子
    ctx.beginPath();
    ctx.arc(particle.x, particle.y, particle.radius, 0, 2 * Math.PI, false);
    ctx.fillStyle = particle.color;
    ctx.fill();
  }

  requestAnimationFrame(draw);
}

draw();