Canvas APIで子供向けガラポン抽選ゲームをブラウザで作った

はじめに
1. 結論（成果物）
前提条件・環境
機能紹介
実装のポイント
まとめ
1. 次のステップ
参考資料

はじめに

おつかされまです。tyamonです。

この記事では、HTML Canvas APIと requestAnimationFrame を使って、子供が楽しめるガラポン抽選ゲームをブラウザで作った話を紹介します。

以下のような方を対象としています。

職場やイベントの抽選をデジタル化したい
Canvas APIを使ったアニメーションに興味がある
外部ライブラリなしでリッチなUIを作る方法を知りたい

結論（成果物）

外部ライブラリなしの単一HTMLファイルで動作するガラポン抽選ゲームを作りました。
カラフルな玉が詰まったドラムが回転し、等級ごとの紙吹雪演出が楽しめます。

ツールはこちら → ガラポン抽選 | tools.tyamon.com

前提条件・環境

実装: HTML + CSS + JavaScript（単一ファイル）
外部ライブラリ: なし
使用API: Canvas API、requestAnimationFrame、Web Storage API（sessionStorage）

機能紹介

ドラムアニメーション

「まわす！」ボタンを押すと、カラフルな玉が詰まったドラムが回転します。

加速 → 一定速度 → 減速 → 停止 という自然な動きを実装
停止時に当選した玉が穴から落下するアニメーションが再生される
ドラム内の玉の色比率は残数に応じてリアルタイムに変化する

当選演出（コンフェッティ）

当選結果に応じて紙吹雪の量が変わります。

1等・2等：大量の紙吹雪
3〜5等：少なめの紙吹雪

結果表示エリアは等級ごとのカラーでグラデーション表示されます。

等級・本数の設定

設定画面から各等の名前・本数を自由に変更できます。

「残数リセット」で本数を入力値に戻す
残数はセッション中記憶される（ページを閉じるとリセット）

実装のポイント

Canvas APIでの球体描画

玉はラジアルグラデーションで立体感を表現しています。

function drawBall(cx, cy, br, color) {
  // 放射状グラデーションで光沢を表現
  const g = ctx.createRadialGradient(
    cx - br * 0.3, cy - br * 0.35, br * 0.05,  // 光源（左上）
    cx, cy, br                                   // 中心
  );
  g.addColorStop(0, lighter(color, 80));  // ハイライト
  g.addColorStop(0.45, color);            // 本体色
  g.addColorStop(1, darker(color, 50));   // 影

  ctx.beginPath();
  ctx.arc(cx, cy, br, 0, Math.PI * 2);
  ctx.fillStyle = g;
  ctx.fill();
}

黄金角による玉の配置（ひまわり配置）

ドラム内の玉の配置にはフィボナッチ数列の黄金角（約137.5°）を使っています。
この配置にすることで、均等かつ重なりが少ない配置が自然に実現できます。

const golden = Math.PI * (3 - Math.sqrt(5));  // 黄金角（ラジアン）
colors.forEach((color, i) => {
  const r = innerR * Math.sqrt((i + 0.5) / colors.length);
  const theta = i * golden;
  ballList.push({ r, theta, color });
});

requestAnimationFrameによるフェーズ管理

アニメーションは phase 変数で状態管理しています。

idle → accel（加速）→ spin（一定速度）→ decel（減速）→ fall（落下）→ done

各フレームで phase に応じた処理を行い、requestAnimationFrame で次のフレームを要求する構成です。

確率計算

当選は残数に比例した確率で決まります。
全残数を1つの配列（プール）に入れてランダムに1つ選ぶシンプルな実装で、偏りなく抽選されます。

function pickWinner() {
  const pool = [];
  grades.forEach((g, i) => {
    for (let j = 0; j < g.remaining; j++) pool.push(i);
  });
  return pool[Math.floor(Math.random() * pool.length)];
}