デルタ システム ソリューションズ 株式会社

Webでスロットゲームをつくろう!(3/4)

よりスロットっぽく!

前のサンプルでは、絵柄が動きはしましたが、まだスロットっぽい動きにはなっていないですよね。
ここから課題をひとつずつ潰して、カスタマイズしていきましょう。

課題1
Q.
スピード感がないよね?
A.
スロットの絵柄の数を増やそう!
5秒間にたくさんの絵柄の移動処理をすれば、スピードはUPします。
課題2
Q.
絵柄が固定だったら、最後に表示される結果はいっしょだね?
A.
絵柄のimgタグの種類をランダムに作成しよう!
もちろん、JavaScriptで。
課題3
Q.
枠の外側にスロットの絵柄がはみ出して見えているよね?
A.
divタグのoverflowスタイルを「hidden」にすれば、はみ出した分は非表示に!
課題4
Q.
easingを'easeOutBack'にした時に、最後に戻る分、白い背景が見えちゃう・・・
A.
marginTopの最終値を0pxではなく、手前のマイナス値でストップしよう!
どの値までが丁度よいかは表示する絵柄の数で変わってくるので、動きを確認しながら調整しましょう。

これらの課題を解消したサンプルがこちらです。


easing:



どうでしょう?
スロットらしくなってきましたね!

ここまでのサンプルのソースです。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script>
// スロット画像配列
var slotImg = ['slot1.jpg','slot2.jpg','slot3.jpg','slot4.jpg','slot5.jpg'];
// 縦に並べるスロット画像の数
var slotNum = 50;
// スロット画像のスタート位置
var startPos = -30 * (slotNum - 3);
// スロット画像の停止位置
var stopPos = -150;
// スロット移動の時間(ミリ秒)
var moveTime = 5000;

$(document).ready(function() {
  // A枠にスロット画像を生成
  slotCreate( $("#slots_a .wrapper") );
  // B枠にスロット画像を生成
  slotCreate( $("#slots_b .wrapper") );
  // C枠にスロット画像を生成
  slotCreate( $("#slots_c .wrapper") );
});

/* スロット画像生成 */
function slotCreate(obj){

  // アニメーションをストップ(アニメーション処理中の場合の対応)
  obj.stop(true, true);
  // 枠内の要素をクリア
  obj.children().remove();
  
  // スロット画像のタグ生成
  for (var i = 1; i <= slotNum; i++) {
    // 画像ファイルは配列からランダムに取得
    var idx = Math.floor(Math.random() * slotImg.length);
    obj.append("<div class='slot'>"
    + "<img border='0'"
    + " src='img/" + slotImg[idx] + "'"
    + " width='40' height='26' />"
    + "</div>");
  }
 
  // スロット画像のスタート位置を設定
  obj.css({
    "margin-top" : startPos + "px"
  });
}

/* スロットスタート */
function slotStart(){
  // A枠のスロット画像移動
  slotMove($("#slots_a .wrapper"));
  // 少し遅れてB枠のスロット画像移動
  setTimeout( function(obj) {
    slotMove(obj);
  }, 200, $("#slots_b .wrapper") );
  // さらに少し遅れてC枠のスロット画像移動
  setTimeout( function(obj) {
    slotMove(obj);
  }, 400, $("#slots_c .wrapper") );
}

/* スロット画像移動 */
function slotMove(obj){
  
  if ( obj.css("margin-top") != startPos ){
    // スロットが動いた後であれば、スロット画像を再作成
    slotCreate( obj );
  }
  
  // スロット画像の移動アニメーション
  obj.animate({
    "margin-top" : stopPos + "px"
  }, {
    'duration' : moveTime,
    'easing' : $("#easing").val()
  });
};
</script>

<style>
* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

#slots_a,
#slots_b,
#slots_c {
  float: left;
  width: 48px;
  height: 94px;
  border: 2px solid;
  overflow: hidden;
}

#slots_a .wrapper,
#slots_b .wrapper,
#slots_c .wrapper {
  width: 46px;
}

#slots_a .wrapper .slot,
#slots_b .wrapper .slot,
#slots_c .wrapper .slot {
  width: 46px;
  height: 30px;
  text-align: center;
  padding-top: 2px;
}
</style>

<div id="slots_a">
  <div class='wrapper'></div>
</div>
<div id="slots_b">
  <div class='wrapper'></div>
</div>
<div id="slots_c">
  <div class='wrapper'></div>
</div>

<br style="clear: both" />

easing:<br />
<select id="easing">
<option value="easeOutQuart">easeOutQuart</option>
<option value="easeOutBack" selected>easeOutBack</option>
<option value="easeOutBounce">easeOutBounce</option>
</select>
<br /><br />
<input type="button" value="スタート!" onclick="javascript:slotStart();" />

あなたへのおすすめ記事