Webでスロットゲームをつくろう！（2/4）

スロット画像を上から下へ動かす動作は、CSSのmarginTop値を変化させることで実現できます。

画像を包含するdivタグのmarginTopの初期値をマイナス値にすることで上の位置からスタートし、marginTopをマイナス値から0に徐々に変化させることでスロットの絵柄が下に移動するというわけです。

marginTop値の変化はJavaScriptで実装するのですが、ここではそういったアニメーション機能が備わっている「jQuery」ライブラリを利用しましょう。

jQueryライブラリは、公式サイトからJSファイルをダウンロードして利用してもいいですし、お手軽にGoogleにホストされているファイルを読み込んでもいいですね。

• https://jquery.com/download/
• https://developers.google.com/speed/libraries/#jquery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 

DOM操作もjQuery記述で簡略化できます。
詳しい使い方は「jQuery 日本語リファレンス」がわかりやすいです。

<script>
  $("#slots_a .wrapper").animate({
    "margin-top" : "0px"
  }, {
    'duration' : 5000,
    'easing' : 'easeOutQuart'
  });
</script>

上の例では、wrapperクラスのdivタグのmarginTopを5秒間かけて0pxに変化させていきます。

'easing'は「徐々に速くなる」「最後にゆっくりになる」など、アニメーションの動きを決めるエフェクト設定です。
この値を切り替えることで、面白い動きが表現できます。

ただし、jQuery標準では'swing'と'linear'のエフェクトしかサポートしていませんので、「jQuery easing」ライブラリを別途ダウンロードして読み込む必要があります。

• http://gsgd.co.uk/sandbox/jquery/easing/

<script src="js/jquery.easing.1.3.js"></script> 

下のサンプルで、「easing」を選択してスタートボタンを押してみてください。
各easingでの動きの違いにも注目です。

easing: swing linear easeOutQuart easeOutBack easeOutBounce

ひとまずは、動きましたね！
次は、このサンプルから見えてくる課題を解決していきます。