こんにちは〜ららぽてすらです♪
今回は、ルーレットの作り方について詳しく解説していきます！
HTML 部分 :
html
<h2> ルーレット </h2>
<p><canvas id="canvas "></canvas ></p>
<div id="labels"></div>
<p><button id="run"> スタート </button> <button id="stop"> ストップ </button></p>
この部分は、ページに表示される HTML のエレメントを定義しています。 <h2> でページのタイトル、 <canvas > で描画するための領域を確保し、 <div> でルーレットの各部分を表すラベルを表示するための領域を確保しています。 <p> で 2 つのボタンを定義し、それぞれルーレットの開始と停止の動作を制御します。
JavaScript 部分 :
const canvas = document.getElementById('canvas '); const context = canvas .getContext('2d'); ここで、 canvas 要素を取得し、 2D 描画コンテキストを取得しています。 var center = { x: 150, y: 150 }; var radius = 100; ここでは、円の中心座標と半径を定義しています。 var data = [ ... ] ここで、ルーレットの各セグメントに対応するデータを定義します。それぞれの名前、色、そして "weight" （このセグメントがルーレットの全体のうち何割を占めるか）が設定されています。 data.forEach(e => { sum_weight += e.weight; }); unit_weight = 360 / sum_weight; ここで、全てのセグメントの weight の合計を計算し、それをもとに 1 単位の weight が何度分に相当するかを計算します。 init(); showLabel(); drawRoullet(0); ここで、描画の初期化、ラベルの表示、そしてルーレットの初期描画を行っています。 function drawRoullet(offset) {...} これはルーレットの描画を行う関数です。オフセットを引数として受け取り、それをもとにルーレットの各セグメントを描画します。 function runRoullet() {...} これはルーレットを動かす関数です。速度と加速度を使ってルーレットの動きをシミュレートしています。 function endEvent(deg) {...} これはルーレットが停止した時の動作を定義した関数です。ルーレットが指しているセグメントを計算し、その結果を表示します。 function init() {...} これは描画の初期化を行う関数です。 function drawPie(cx, cy, start_deg, end_deg, radius , color) {...} これは円の一部（セグメント）を描画する関数です。 function showLabel() {...} これはルーレットの各セグメントのラベルを表示する関数です。 function showArrow() {...} これはルーレットの矢印を表示する関数です。 document.getElementById('run').addEventListener('click', function() {...}); ここで、スタートボタンがクリックされたときの動作を定義しています。 document.getElementById('stop').addEventListener('click', function() {...}); ここで、ストップボタンがクリックされたときの動作を定義しています。 init(): canvas のサイズを設定し、白色で初期化する関数です。 drawPie(cx, cy, start_deg, end_deg, radius , color): canvas 上に色つきの円の一部（つまり「パイ」）を描画する関数です。中心の位置 (cx, cy) 、開始角度と終了角度（ start_deg と end_deg ）、半径（ radius ）、色（ color ）を指定します。 showLabel(): ルーレットの各セグメントのラベル（つまり、エメラルド、ルビー、ダイヤモンド、サファイア ）を HTML テーブルとして生成し、 labels という ID の div 要素に挿入します。 showArrow(): ルーレットの上部に矢印を描画します。これは現在選択されているルーレットセクションを示します。 document.getElementById('run').addEventListener('click', function() {...}): "run" という ID の要素（スタートボタン）がクリックされたときに runRoullet() 関数を実行します。しかし、これは既にルーレットが開始（ startFlag が true ）または停止（ stopFlag が true ）している場合は動作しません。 document.getElementById('stop').addEventListener('click', function() {...}): "stop" という ID の要素（ストップボタン）がクリックされたときにルーレットの停止を開始します。しかし、これはルーレットが既に開始されていて（ startFlag が true ）、まだ停止していない（ stopFlag が false ）場合にのみ動作します。 runRoullet(): ルーレットを回転させるための関数です。加速度を使ってルーレットが回転する度数を計算します。もし stopFlag が true になった場合（つまり、ストップボタンがクリックされた場合）、ルーレットの速度を徐々に減速させます。速度が 0 になると、タイマーをクリアし、 endEvent(deg) 関数を呼び出します。 endEvent(deg): ルーレットが停止したときに呼び出される関数です。ルーレットが指しているセグメントを計算し、その結果を表示します。また、 startFlag と stopFlag を false にリセットします。
ソースコード ⭐️
canvas {radius : 5px;
button {radius : 5px;
#run {
#stop {canvas id="canvas "></canvas ></p>canvas = document.getElementById('canvas ');canvas .getContext('2d');
var center = {
var radius = 100;
var data = [{サファイア ',
var sum_weight = 0;
data.forEach(e => {
init();
function drawRoullet(offset) {
data.forEach(e => {radius ,
function runRoullet() {
timer = setInterval(function() {
if (deg > 360) {
if (stopFlag) {
context.clearRect(0, 0, canvas .width, canvas .height);
function endEvent(deg) {
for (var i = 0; i < data.length; i++) {
function init() {canvas .width = 300;canvas .height = 300;canvas .width, canvas .height);
function drawPie(cx, cy, start_deg, end_deg, radius , color) {radius , _start_deg, _end_deg, true);
function showLabel() {
function showArrow() {radius );radius - 10);radius - 10);
document.getElementById('run').addEventListener('click', function() {
document.getElementById('stop').addEventListener('click', function() {
⬇️実際にソース入れた際の表示と動き⬇️
ルーレット
スタート ストップ
