JavaScriptで雪のエフェクトを作成し、タップで色変更する方法

雪のエフェクトはウェブデザインやインタラクティブなサイトでよく使われる要素です。さらに、タップで雪の色を変更する機能を追加することで、より魅力的で動的なビジュアルを実現できます。この記事では、JavaScriptを使って雪のエフェクトを作成し、タップで色を変更する方法について詳しく解説します。

1. 雪のエフェクトを作成する基本的な方法
2. タップで雪の色を変更する方法
3. コードの動作確認と調整
4. まとめと応用

1. 雪のエフェクトを作成する基本的な方法

まず、雪のエフェクトを作成するためには、HTML5のCanvasを使って雪の粒を描画します。JavaScriptを使って、これらの雪の粒をアニメーションさせることができます。以下は、基本的な雪のエフェクトを実装するためのコード例です。

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

let snowflakes = [];

// 雪の粒のクラス
class Snowflake {
  constructor() {
    this.x = Math.random() * canvas.width;
    this.y = Math.random() * canvas.height;
    this.size = Math.random() * 5 + 2;
    this.speed = Math.random() * 1 + 1;
  }

  // 雪の粒を更新する関数
  update() {
    this.y += this.speed;
    if (this.y > canvas.height) {
      this.y = -this.size;
      this.x = Math.random() * canvas.width;
    }
  }

  // 雪の粒を描画する関数
  draw() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
    ctx.fillStyle = 'white';
    ctx.fill();
  }
}

// 雪の粒を生成する関数
function createSnowflakes() {
  for (let i = 0; i < 100; i++) {
    snowflakes.push(new Snowflake());
  }
}

// 雪を描画する関数
function drawSnow() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  snowflakes.forEach(snowflake => {
    snowflake.update();
    snowflake.draw();
  });
  requestAnimationFrame(drawSnow);
}

createSnowflakes();
drawSnow();

このコードでは、雪の粒をランダムに画面上に生成し、降るアニメーションを作成しています。

2. タップで雪の色を変更する方法

次に、雪のエフェクトにタップで色を変更する機能を追加してみましょう。ユーザーが画面をタップしたときに雪の色を変更するために、JavaScriptのイベントリスナーを使います。タップイベントをキャッチし、その際に雪の色を変更するコードを追加します。

let snowColor = 'white'; // 初期の雪の色は白

// タップイベントで色を変更する関数
canvas.addEventListener('click', function() {
  // タップ時に雪の色をランダムに変更
  snowColor = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
});

// 雪を描画する関数を更新して、色を反映させる
class Snowflake {
  ...
  draw() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
    ctx.fillStyle = snowColor;
    ctx.fill();
  }
}

このコードでは、ユーザーがCanvas上をタップするたびに、雪の色がランダムに変更されます。`Math.random()`を使ってランダムな色を生成し、`snowColor`変数に格納することで、雪の色が変更されます。