JavaScriptこんにちは、稲垣です。今回はサイコロを使ったミニゲーム...ではなく単純にサイコロを振って目が出るだけのものを作成しました。目次デモhtml、CSS、画像ファイル動きの実装まとめデモまずは完成サンプルになります。「サイコロを振る」ボタンをクリックするとサイコロが回ってどの目が出たか表示されます。デモhtml、CSS、画像ファイルhtmlとcss、画像ファイルを準備します。id="button">サイコロを振る</button><p></p>divにはページを開いた時に表示される1の目の画像が入っています。ボタンを押すとすぐに差し替わる部分になるので、最初の目の画像は何を入れてもOKです。0;}}サイコロのモーションは回転とバウンドの2種類の動きを組み合わせています。バウンドの動きはCSSで行うので、.boundにアニメーションの記述を入れておきます。この.boundクラスをボタンを押したタイミングで付与してアニメーションを行います。画像ファイル今回作ったものは一方向にしか回転しないので、全ての目が出るように2パターンの転がり方を準備します。上記を踏まえて、AパターンとBパターン用にサイコロ画像を作りました。動きの実装それでは動きの部分になります。必要な変数と配列を書きます。//出目に対応した画像URLを作るためにjに入れる数字の配列iとjは画像ファイル名を指定する時に使うので、ここを増減させて画像を切り替えサイコロが転がっているように見せていきます。jAryには各出目のjにあたる数値を1から順番に格納しておきます。これを踏まえて、ボタンを押した時に実行する最初の関数を作成します。//数に'a'を渡しkorogasu()を実行}}この関数では出目の決定と、ABパターンの選択を行っています。ABパターンが決定したら次のkorogasu()に引数として渡し実行します。70);}korogasu()ではサイコロを回転させる処理を行います。最初に決めた出目の画像からスタートし、画像が一巡したところでclearIntervalで動きを止めて、変数やバウンド用のクラス削除などの初期化を行います。true);$('#sai').addClass('bound');start();});});まとめ最後にコードをまとめて載せます。true);$('#sai').addClass('bound');start();});});単体で使うことはなさそうですが、他の処理を組み合わせて簡単なゲームを作ったりと応用が効きそうなので、次はサイコロを使ったミニゲームを作ってみたいです。Viewで360°コンテンツをサイトに埋め込むA-Frameを使ってWebVRを実装してみよう無料で使えるJavaScriptやCSSなどのCDNサービスまとめ美しすぎるカードゲームjQueryで作る神経衰弱gulp4に移行するためにタスクを書き換えてみたマグネッツとは?福岡でWEB制作や中小企業様の集客支援などを行っている会社です。