圣诞节动手体验一把人工降雪的魅力

2023-11-15 10:52:53

圣诞节将至，在这个充满欢乐和祝福的节日里，北方早已银装素裹，而南方的小伙伴们还在苦苦等待一场浪漫的飘雪。别着急，不用等待老天爷，我们用代码打造一个专属的人工降雪盛宴，让圣诞节的氛围瞬间爆棚！

准备工作：

HTML5编辑器（如Visual Studio Code、Sublime Text等）
JavaScript脚本编辑器（如Notepad++、Atom等）

代码实现：

首先，新建一个HTML文件，并引入必要的JavaScript脚本：

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <canvas id="canvas" width="800" height="600"></canvas>

  <script src="snow.js"></script>
</body>
</html>

接着，在snow.js脚本文件中编写以下代码：

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

let snow = [];
let numSnowflakes = 100;
let xSpeed = 0.5;
let ySpeed = 0.1;

function createSnowflakes() {
  for (let i = 0; i < numSnowflakes; i++) {
    let snowflake = {
      x: Math.random() * canvas.width,
      y: Math.random() * canvas.height,
      radius: Math.random() * 2 + 1,
      color: 'white'
    };
    snow.push(snowflake);
  }
}

function drawSnowflakes() {
  for (let i = 0; i < snow.length; i++) {
    let snowflake = snow[i];
    ctx.beginPath();
    ctx.fillStyle = snowflake.color;
    ctx.arc(snowflake.x, snowflake.y, snowflake.radius, 0, Math.PI * 2);
    ctx.fill();
    ctx.closePath();
  }
}

function moveSnowflakes() {
  for (let i = 0; i < snow.length; i++) {
    let snowflake = snow[i];
    snowflake.y += ySpeed;

    if (snowflake.y > canvas.height) {
      snowflake.y = 0;
    }
  }
}

function animateSnow() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawSnowflakes();
  moveSnowflakes();
  requestAnimationFrame(animateSnow);
}

createSnowflakes();
animateSnow();