Javascriptでルーレット作成、円形に要素を配置してルーレットする

Javascriptでルーレット作成、円形に要素を配置してルーレットする

こんにちは!

dynaです(^^)

この記事は、Javascriptで円周上に要素を配置してルーレットを作成した記録です。

 

この記事から分かること
・javascriptで要素を円形に配置する考え方
・ルーレット作成の考え方

 

デモはこちら↓ スタートボタン押してみてねฅ(ミ・ﻌ・ミ)ฅ

See the Pen 円形に要素を配置し、ランダムなルーレットをする by dyna (@sakudyna) on CodePen.

どんな内容?
・スタートを押すと、ランダムに数字が光り、ストップで止まります。

・スタートを再押下でまたルーレットします。(1度ストップしたところはルーレットしない)。

・リセットボタンですべてリセット。

もっといいコードがあると思いますが、とりあえず動いたので記録です。(気になった点や指摘があれば、お問い合わせからお願いします!)

 

 

全体のコード

長いので、考え方が気になる方は飛ばしてOKです!

一応全体のコードを載せておきます。

まずは円周上に要素を配置するところから。

Javascriptで円形(円周上)に要素を配置

 

地味に難しかった・・・。

   

参考にさせていただいたサイトはこちら↓

 

考え方としては以下の順で考えました。

考え方
  • (1)要素をJSで表示させるので、表示させたい枠(div)を取得
  • (2)表示する要素数を決める(ここでは10個)
  • (3)円周上に配置したいので(1)(表示枠)の半径を算出する
  • (4)円周上に配置するので、360度÷(2)(配置する要素数)をする
  • (5)CSS操作できるように、(4)をラジアンに変換する
  • (6)要素を表示する
  • (6)-1.エレメントの追加(class,idの追加)、(6)-2.x,y座標の追加

※下記コードに対応個所を()数字で振っています。

 

円周上に要素を配置するコードはこちら↓

 

先ほどの「考え方」の「(6)-2、要素を追加して、x、y座標に設定する」ところが躓いたので、そちらをメモしておきます。

 

気になるのが

const x = Math.cos(rad * i) * r + r;
const y = Math.sin(rad * i) * r + r;

 

sin,cos(サインコサイン)って昔勉強したなあ・・・
もう覚えてない( ^ω^)・・・

 

このサイトが分かりやすかったです。

Mathオブジェクトのcos()メソッドは、コサイン(余弦)を返します。 引数にラジアン単位の角度を指定すると、指定した引数のコサイン(余弦)を返します。

引用元:★JavaScriptリファレンス Math.cos() …… コサイン(余弦)を返す

Math.cos(角度 * (Math.PI / 180))

デモコードのラジアン計算しているところが、

let deg = 360.0/item_length; 

let rad = (deg*Math.PI/180.0);

に当たります。

 

これを元に考えると、上記のコードはradの変数にラジアン計算をしているので、

const x = Math.cos(rad * i) * r + r; は

const x = Math.cos(rad * 要素が何個めか) * 半径 + 半径;

ということになります。 

 

これで、要素のiが変化して、円周上のx(コサイン)、y(サイン)で要素数分位置を算出してくれます。

このx、yの値を、トップから〇px、左に〇px、とずらして表示しています。

 

なんとなく分かったけど、使いこなすの難しいね・・・(;’∀’)

 

ルーレット作成の考え方

先ほどの円周上に要素を作ることで表示ができたので、次はルーレットを作成します。

 

考え方
  • スタート準備状態(stert_set)、スタートボタン押下時(start_go)、ストップボタン押下時(stop_set)、リセットボタン押下時(reset_set)で考える
  • 1.スタートボタン押下時
    ・・・表示している要素をランダムに選び、背景色を表示するクラスを付与する。
  • 2.ストップボタン押下時
    ・・・現在選択しているランダムな数字を取得し、ストップの背景色を付与する。また、選んだものを元の配列から減らす。
  • 3.リセットボタン押下で色のクリア(初期化)、配列のクリア(初期化)
  • スタート準備状態で、スタートボタン押下時の実行処理のタイミングを設定する
  • スタート、ストップ、リセットのボタンを取得
  • それぞれ押下時のクリックイベント処理の追加をする

ちょっとしたポイントは、フラグ処理 (let first )で制御していることです。

「スタート準備状態時(start_set)にfirst===falseならスタートボタン押下処理を、一定の間隔で実行する」

としています。

あとはコードにメモがあるので、それを見ればやっていることは単純なので、なんとなく分かります。

 

やりたい処理を、分けて考えるの難しいよね~
こればっかりは練習が必要だね( ^ω^)・・・

 

「どう組み立てたら動くか」の考え方が大事だなーと思った学習でした。

やりたい事をできるようにする為に、今後も勉強していきたいと思います!!

ここまで読んで下さりありがとうございます。

 

よかったら1ポチっとお願いします(`・ω・´)

このエントリーをはてなブックマークに追加 ブログランキング・にほんブログ村へ