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 回答
0

下面是一个使用 CSS3 为栏设置动画的示例：

.outerBar{
  width:120px;
  height:40px;
  background:black;
}

.innerBar{
  width:0px;
  height:40px;
  -webkit-animation: grow 6s;   
}

@-webkit-keyframes grow{
 0%{width:0px; background:black;}
 16.6%{width:20px; background:green;}
 33.2%{width:40px; background:green;}
 49.8%{width:60px; background:green;}
 66.4%{width:80px; background:green;}
 83%{width:100px; background:green;}
 100%{width:120px; background:green;}
}

http://jsfiddle.net/msfx9/

于 2013-10-05T00:24:39.883 回答