2

私は現在、RTS のリアルタイム戦闘用の戦闘システム バーを作成する方法を理解しようとしています。バーは CSS3 アニメーションで 6 秒間動き、その後緑色に変わり、アクションを実行できるようになります。しかし、タイムバーがいっぱいになったときにのみスキルがトリガーされるようにする必要があります.

何か助けはありますか？

// ATB DIV bar for the CSS3 animation
<div id="atbbar"> </div>


// ATTACK SKILL
document.getElementById("attack").addEventListener('click', function(){
    var damage = Math.floor(Math.random() * characterstats.strength + 1);
    damage -= dragonstats.armor;
    dragon.hp -= damage;
    if (damage <= 0) {
        addMessage("Armor negated your attack!");
        }
    else {  
    document.getElementById("npchp").innerHTML = dragon.hp;
    addMessage("You hit the dragon for " + damage + " hp!");
    }
});
4

2 に答える 2

2

http://jsbin.com/oXuzASA/2/edit

<div class='bar'>
  </div>
  <div class='bar_overlay'>
  </div>

原理は簡単です。オーバーレイはバーの上にあり、ゼロに設定されます。比例して量が増えるので、好きなようにスタイルを設定できます。

.bar {
  background-color: #000;
  display: block;
  width: 100px;
  height: 20px;
}

.bar_overlay {
  background-color: green;
  margin-top: -20px;
  width: 100px;
  height: 20px;
  display: block;
}

簡単な方程式を立てます。

currentSeconds / maxSeconds = currentWidth / maxWidth
x / 6 = y / 100

交差乗算:

currentWidth = (100 / 6) * x

これでバーの幅を更新します。

編集

ゲームに統合する方法を示すボタンを追加しました。

<input type='button' id='attack' value='Attack!' />

$("#attack").click(function() {
    $("#attack").attr("disabled", "disabled");

    var timer;
    timer = setInterval(function() {
    seconds++;
  $('.bar_overlay').css('width', (100/6) * seconds);

      if (seconds == 6)
      {
        clearInterval(timer);
seconds = 0;
        $("#attack").removeAttr("disabled");
      }
  }, 500);
  });
于 2013-10-04T23:12:32.087 に答える