読み込み中...

これだけでマスター！JavaScriptルーレット実装のたった10のステップ

JavaScriptでルーレットを作成するサンプルコード JS
2023.04.23
この記事は約12分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を満たす現役のプログラマチームによって監修されています。

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、JavaScriptを使ったルーレットの実装ができるようになります。

初心者でも分かるように、基本的な作り方から使い方、対処法、注意点、カスタマイズ方法まで詳しく解説しています。

●JavaScriptルーレットの作り方

まずは、ルーレットの基本構造を理解しましょう。

○基本構造

ルーレットは、要素をランダムに選択するアニメーションを実現するために、下記の要素が必要です。

  1. ルーレットのアイテム（選択肢）
  2. ルーレットを回すボタン
  3. アニメーションの実装

○サンプルコード1

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JavaScriptルーレット</title>
</head>
<body>
  <div id="roulette">
    <ul>
      <li>選択肢1</li>
      <li>選択肢2</li>
      <li>選択肢3</li>
      <!-- 他の選択肢も追加可能 -->
    </ul>
  </div>
  <button id="start">ルーレットスタート！</button>
  <script src="main.js"></script>
</body>
</html>

このHTMLコードでは、ルーレットの選択肢をリストで表現し、ルーレットを開始するボタンを設置しています。

選択肢はリストに追加するだけで簡単に増やすことができます。

JavaScript (main.js)

// ルーレットの要素を取得
const roulette = document.querySelector('#roulette ul');
// スタートボタンの要素を取得
const startButton = document.querySelector('#start');

// ボタンがクリックされたらルーレットを開始
startButton.addEventListener('click', () => {
  // 選択肢の数を取得
  const itemCount = roulette.children.length;

  // ランダムなインデックスを生成
  const randomIndex = Math.floor(Math.random() * itemCount);

  // ルーレットのアニメーション処理
  // （詳細は後述のサンプルコードで説明）
});

このJavaScriptコードでは、ルーレットの要素とスタートボタンの要素を取得し、スタートボタンがクリックされたときにルーレットを回す処理を開始します。

選択肢の数を取得し、ランダムなインデックスを生成します。

●使い方

次に、ルーレットのアニメーションを実装しましょう。

下記のサンプルコードでは、アニメーションを実現する方法を2つ紹介します。

○サンプルコード2：setIntervalを使った方法

// ルーレットのアニメーション処理
let currentIndex = 0;
let intervalId;
let startTime;

function animateRoulette() {
  // 現在の選択肢の背景色をリセット
  roulette.children[currentIndex].style.backgroundColor = '';

  // 次の選択肢に移動
  currentIndex = (currentIndex + 1) % itemCount;

  // 新しい選択肢の背景色を変更
  roulette.children[currentIndex].style.backgroundColor = 'yellow';

  // アニメーション終了条件（ここでは3秒後に終了）
  if (Date.now() - startTime > 3000) {
    clearInterval(intervalId);
  }
}

// ボタンがクリックされたらルーレットを開始
startButton.addEventListener('click', () => {
  startTime = Date.now();
  intervalId = setInterval(animateRoulette, 100);
});

このサンプルコードでは、setIntervalを使ってルーレットのアニメーションを実現しています。

アニメーションの開始時刻を保存し、3秒後にアニメーションを終了させます。

○サンプルコード3：requestAnimationFrameを使った方法

// ルーレットのアニメーション処理
let currentIndex = 0;
let lastUpdateTime;
let startTime;

function animateRoulette(timestamp) {
  // アニメーション終了条件（ここでは3秒後に終了）
  if (timestamp - startTime > 3000) {
    return;
  }

  // 100msごとに選択肢を更新する
  if (!lastUpdateTime || timestamp - lastUpdateTime > 100) {
    // 現在の選択肢の背景色をリセット
    roulette.children[currentIndex].style.backgroundColor = '';

    // 次の選択肢に移動
    currentIndex = (currentIndex + 1) % itemCount;

    // 新しい選択肢の背景色を変更
    roulette.children[currentIndex].style.backgroundColor = 'yellow';

    lastUpdateTime = timestamp;
  }

  // アニメーションの更新をリクエスト
  requestAnimationFrame(animateRoulette);
}

// ボタンがクリックされたらルーレットを開始
startButton.addEventListener('click', () => {
  startTime = performance.now();
  requestAnimationFrame(animateRoulette);
});

このサンプルコードでは、requestAnimationFrameを使ってルーレットのアニメーションを実現しています。

アニメーションの開始時刻を保存し、3秒後にアニメーションを終了させます。

100msごとに選択肢が更新されるようにしています。

●対処法

ここでは、ルーレットのアニメーションが終了した後に何らかの処理を行いたい場合の対処法を紹介します。

アニメーションが終了したタイミングでコールバック関数を実行することで、その後の処理を行います。

○サンプルコード4：アニメーション終了後の処理

// アニメーション終了後に実行するコールバック関数
function onAnimationEnd() {
  console.log('アニメーションが終了しました。');
}

function animateRoulette(timestamp) {
  // 省略: アニメーション処理

  // アニメーション終了条件（ここでは3秒後に終了）
  if (timestamp - startTime > 3000) {
    onAnimationEnd(); // アニメーションが終了したらコールバックを実行
    return;
  }

  // 省略: 選択肢の更新処理

  // アニメーションの更新をリクエスト
  requestAnimationFrame(animateRoulette);
}

このサンプルコードでは、アニメーションが終了したタイミングでonAnimationEnd関数を実行しています。

これにより、アニメーション終了後に行いたい処理を実装できます。

○サンプルコード5：アニメーション速度の調整

// 省略: 変数定義

// アニメーション速度を指定（単位: ms）
const animationSpeed = 50;

function animateRoulette(timestamp) {
  // 省略: アニメーション処理

  // 速度に応じて選択肢を更新する
  if (!lastUpdateTime || timestamp - lastUpdateTime > animationSpeed) {
    // 省略: 選択肢の更新処理
  }

  // 省略: アニメーションの更新をリクエスト
}

// 省略: ボタンクリックイベント

このサンプルコードでは、animationSpeed変数を使ってアニメーションの速度を調整しています。

この値を変更することで、アニメーションのスピードを簡単に変更できます。

●注意点

  • アニメーションの速度や終了条件を適切に設定することが重要です。
    速すぎると、ユーザーが選択肢の変化に気づかない可能性があります。
  • ルーレットのアイテム数が変わった場合にも対応できるよう、選択肢の更新処理を柔軟に実装することが望ましいです。
  • ブラウザごとにアニメーションの動作が異なることがあるため、複数のブラウザで動作確認を行ってください。

●カスタマイズ方法

ルーレットアニメーションのカスタマイズ方法について、いくつかのサンプルコードを示します。

○サンプルコード6：ルーレットのアイテムを追加・削除する

このサンプルコードでは、ルーレットのアイテムを追加および削除する機能を実装しています。

addItem関数を使ってアイテムを追加し、removeItem関数を使ってアイテムを削除できます。

// アイテムを追加する関数
function addItem(item) {
  // 配列にアイテムを追加
  rouletteItems.push(item);
}

// アイテムを削除する関数
function removeItem(item) {
  // 配列からアイテムのインデックスを取得
  const index = rouletteItems.indexOf(item);
  
  // インデックスが見つかった場合、配列からアイテムを削除
  if (index > -1) {
    rouletteItems.splice(index, 1);
  }
}

○サンプルコード7：ルーレットの背景色を変更する

このサンプルコードでは、ルーレットの背景色を変更する機能を実装しています。

changeRouletteBgColor関数を使って背景色を変更できます。

// ルーレットの背景色を変更する関数
function changeRouletteBgColor(color) {
  // 背景色のプロパティを変更
  roulette.style.backgroundColor = color;
}

○サンプルコード8：ルーレットのアイテムの文字色を変更する

このサンプルコードでは、ルーレットのアイテムの文字色を変更する機能を実装しています。

changeItemTextColor関数を使って文字色を変更できます。

// ルーレットのアイテムの文字色を変更する関数
function changeItemTextColor(color) {
  // 配列内の各アイテムの文字色を変更
  rouletteItems.forEach(item => {
    item.style.color = color;
  });
}

○サンプルコード9：ルーレットのアイテムのフォントサイズを変更する

このサンプルコードでは、ルーレットのアイテムのフォントサイズを変更する機能を実装しています。

changeItemFontSize関数を使ってフォントサイズを変更できます。

// ルーレットのアイテムのフォントサイズを変更する関数
function changeItemFontSize(size) {
  // 配列内の各アイテムのフォントサイズを変更
  rouletteItems.forEach(item => {
    item.style.fontSize = size + 'px';
  });
}

○サンプルコード10：ルーレットのアイテムのフォントを変更する

このサンプルコードでは、ルーレットのアイテムのフォントを変更する機能を実装しています。

changeItemFontFamily関数を使ってフォントを変更できます。

// ルーレットのアイテムのフォントを変更する関数
function changeItemFontFamily(fontFamily) {
  // 配列内の各アイテムのフォントを変更
  rouletteItems.forEach(item => {
    item.style.fontFamily = fontFamily;
  });
}

●応用例

ルーレットアプリケーションをカスタマイズして、さまざまな場面で活用できます。

例えば、飲み会やパーティーで食べ物や飲み物の選択を助ける、またはゲームのキャラクターやステージの選択をランダム化するために使用できます。

○サンプルコード11：アイテムをシャッフルしてランダム化する

このサンプルコードでは、ルーレットのアイテムをシャッフルしてランダム化する機能を実装しています。

shuffleItems関数を使ってアイテムをシャッフルできます。

// アイテムをシャッフルする関数
function shuffleItems() {
  // 配列の長さを取得
  const itemCount = rouletteItems.length;

  // 配列をシャッフル
  for (let i = itemCount - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [rouletteItems[i], rouletteItems[j]] = [rouletteItems[j], rouletteItems[i]];
  }
}

○サンプルコード12：ルーレットの回転速度を調整する

このサンプルコードでは、ルーレットの回転速度を調整する機能を実装しています。

changeRotationSpeed関数を使って回転速度を変更できます。

// ルーレットの回転速度を調整する関数
function changeRotationSpeed(speed) {
  // 回転速度を変更
  rotationSpeed = speed;
}

まとめ

以上のサンプルコードを使用して、ルーレットアプリケーションをカスタマイズし、機能を追加することができます。

コメントには日本語を使用し、詳細な説明を加えています。これらのコードを組み合わせて、様々なシーンで活用できるルーレットアプリケーションを作成できます。