BLOG

  1. HOME
  2. ブログ
  3. WEB制作・デザイン
  4. コーディング(html/css/JavaScript)
  5. jQueryでサイコロを作ってみた
by 稲垣 稲垣

jQueryでサイコロを作ってみた

jQueryでサイコロを作ってみた

こんにちは、稲垣です。

今回はサイコロを使ったミニゲーム…ではなく単純にサイコロを振って目が出るだけのものを作成しました。

目次

デモ

まずは完成サンプルになります。

「サイコロを振る」ボタンをクリックするとサイコロが回ってどの目が出たか表示されます。

html、CSS、画像ファイル

htmlとcss、画像ファイルを準備します。

html

divにはページを開いた時に表示される1の目の画像が入っています。

ボタンを押すとすぐに差し替わる部分になるので、最初の目の画像は何を入れてもOKです。

css

サイコロのモーションは回転とバウンドの2種類の動きを組み合わせています。

バウンドの動きはCSSで行うので、.boundにアニメーションの記述を入れておきます。

この.boundクラスをボタンを押したタイミングで付与してアニメーションを行います。

画像ファイル

今回作ったものは一方向にしか回転しないので、全ての目が出るように2パターンの転がり方を準備します。

上記を踏まえて、AパターンとBパターン用にサイコロ画像を作りました。

ABパターン

動きの実装

それでは動きの部分になります。

まずは必要な変数と配列を書きます。

iとjは画像ファイル名を指定する時に使うので、ここを増減させて画像を切り替えサイコロが転がっているように見せていきます。

jAryには各出目のjにあたる数値を1から順番に格納しておきます。

これを踏まえて、ボタンを押した時に実行する最初の関数を作成します。

この関数では出目の決定と、ABパターンの選択を行っています。

ABパターンが決定したら次のkorogasu()に引数として渡し実行します。

korogasu()ではサイコロを回転させる処理を行います。

最初に決めた出目の画像からスタートし、画像が一巡したところでclearIntervalで動きを止めて、変数やバウンド用のクラス削除などの初期化を行います。

あとはボタンをクリックした時の処理を書いたら完成です!

まとめ

最後にコードをまとめて載せます。

単体で使うことはなさそうですが、他の処理を組み合わせて簡単なゲームを作ったりと応用が効きそうなので、次はサイコロを使ったミニゲームを作ってみたいです。

マグネッツとは?
福岡でWEB制作や中小企業様の集客支援などを行っている会社です。
新着情報配信中!
商用利用OK&無料!総合素材サイト|ソザイング
ページの先頭に戻る