[JavaScript]トランプゲーム(戦争)を作る-アニメーション編-

以前構築したトランプゲームの戦争に対して
アニメーションを追加したいと考え今回の記事を作成しました。
ゲーム本体の処理については以前の記事をご確認ください。

あわせて読みたい

今回構築するアニメーションは下記の内容を想定しています。

アニメーション構成

① 対戦相手に向かい前進する
② 初期位置に戻る
③ 勝敗により背景を変更する

アニメーションというにはお粗末な内容かもしれませんが、
対戦相手とぶつかり合い勝敗表示を切替えることは、
対戦ゲーム（カードゲームなど）ではよくある演出かと思います。

構造としては、CSSにて各種レイアウトを構築しjQueryにて動きに関する処理を実装しております。
アニメーション構成の①②の後に③を処理する必要があるため、whenとdoneを利用し順番に処理しています。
また、whenのコードには注意点があり、構文の最後に；(セミコロン)は不要となります。
処理を複数記載したい場合には構文の最後に，(カンマ)を利用します。

トランプゲーム(戦争)のソースコード

<button id="button">move</button>
<div id="conteiner" class="conteiner">
  <div id="a_area" class="a_area">
    <p>A チーム</p>
    <p id="a_result"></p>
  </div>
  <div id="b_area" class="b_area">
    <p>B チーム</p>
    <p id="b_result"></p>    
  </div>
</div>

.conteiner {
  position: relative;
  width: 500px;
  height: 200px;
}

.a_area {
  position: absolute;
  top: 0px;
  left: 100px;
  border: 1px solid #000;
  padding: 20px;
}

.b_area {
    position: absolute;
    top: 200px;
    left: 100px;
    border: 1px solid #000;  
    padding: 20px;
}

$("#button").on("click", function () {

  $.when(
    // 初期化処理
    $("#a_result").html(""),
    $("#b_result").html(""),
    $("#b_area").css('background-color',''),
    // Aチームの処理
    $("#a_area").animate({
      "top": "50px"
    }).animate({
      "top": "0px"
    }, {
      duration: 'slow'
    }),
    // Bチームの処理
    $("#b_area").animate({
      "top": "150px"
    }).animate({
      "top": "200px"
    }, {
      duration: 'slow'
    })
  )
  .done(function() {
    // 勝ち演出
    $("#a_result").html("o");
    // 負け演出
    $("#b_result").html("x");
    $("#b_area").css('background-color','rgba(128,128,128,0.5)');
  });

});