Javascript: How to create a CSS3 Animation

Question

I'm currently trying to figure out how to create a battle system bar for real time combat for a RTS i'm doing. The bar will move with CSS3 animation for 6 seconds, then turn green, allowing you to take a action. But I need it in a way that skills will only trigger when the time bar is full.

Any help?

// 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!");
    }
});

I posted an answer, although it doesn't use CSS3.

user1508519
– user1508519

2013-10-04 23:18:37 +00:00
Commented Oct 4, 2013 at 23:18 — user1508519
– user1508519, Commented Oct 4, 2013 at 23:18

score 2 · Accepted Answer · 2013-10-04 23:18:59Z

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

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

The principle is simple. The overlay will be on top of the bar and be set to zero. It will increase a proportional amount so you can style it however you want.

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

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

We do a simple equation.

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

Cross-multiply:

currentWidth = (100 / 6) * x

And so that is what we will update the bar's width with.

EDIT

I added a button to demonstrate how you might integrate it in your game.

<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);
  });

Conqueror · Accepted Answer · 2013-10-05 00:24:39Z

0

Here is an example of animating a bar with 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/

answered Oct 5, 2013 at 0:24

Conqueror

4,5338 gold badges37 silver badges42 bronze badges

Collectives™ on Stack Overflow

Javascript: How to create a CSS3 Animation

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related