Animation in javascript, how to fire bullets one by one?

Question

I am trying to make a gunshot simple animation in javascript . Here is my code for the bullet fire.

JavaScript code:

function myMove() {
    var elem = document.getElementById("myAnimation");   
    var pos = 0;
    var id = setInterval(frame, 5);
    function frame() {
        if (pos == 350) {
            clearInterval(id);
            document.getElementById('myAnimation').style.display='none';
        } else {
            pos++; 
            //elem.style.top = pos + 'px'; 
            elem.style.left = pos + 'px'; 
        }
    }
}

Html code:

        <div class ="col-md-12"><div class="col-md-3"><img src="images/gun.jpg" onclick="myMove()"></div>
<div id="myAnimation" class="col-md-7">

<img  src="images/Bullet.png"><br>
<img  src="images/Bullet.png"><br>
<img  src="images/Bullet.png"><br>
<img  src="images/Bullet.png"><br>
<img  src="images/Bullet.png"><br>
</div>


</div>

The problem is when I click once, all the bullets get fired simultaneously. I want the bullets to get fired one by one only when I click the trigger of gun.jpg. No other complicated scenario is required.

Answer 1

This demo is pure CSS. It involves font-icons, radio buttons, and labels. CSS animation is far easier to use and takes advantage of GPU processing. Click the gun as much as you want and as fast as you can, it won't break.

Demo

.range {
  display: block;
  width: 100%;
  position: absolute;
}

.gun {
  font-size: 80px;
  margin-left: 70%;
  position: relative;
  display: block;
  line-height: 1;
  cursor: pointer
}

.gun::before {
  opacity: 0;
  content: '';
  font-size: 30px;
  display: inline-block;
  position: absolute;
  left: -10%;
  top: 22px;
}

.gun:active::before {
  opacity: 1;
}

#trigger1,
#trigger2 {
  display: none;
}

.shot {
  position: absolute;
  opacity: 0;
  left: 70%;
  top: 12px;
  font-size: 40px;
}

.trigger:checked+.range .gun+.shot {
  opacity: 1;
  transform: translateX(-10000%);
  transition: opacity .1s, transform .7s;
}

.trigger:checked+.range .gun {
  display: none;
}

/**
 * Added to remove blue highlighting
 * https://stackoverflow.com/a/21003770/2813224
 */
.noSelect {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.noSelect:focus {
    outline: none !important;
}

<input id='trigger1' class='trigger' type='radio' name='fire'>
<span class='range'>
<label class="gun noSelect" for='trigger1'></label>
<output class='shot'>⁌</output>
</span>

<input id='trigger2' class='trigger' type='radio' name='fire' checked>
<span class='range'>
<label class="gun noSelect" for='trigger2'></label>
<output class='shot'>⁌</output>
</span>

Answer 2

Here you go with a solution https://jsfiddle.net/5bcncsv2/

var width = $('body').width();
var bullets = $('#myAnimation').children();
var cnt = 1;

var interval = setInterval(function(){
 var calWidth = width - $('img:nth-child(' + cnt + ')').width();
 $("#myAnimation img:nth-child(" + cnt + ")").animate({left: calWidth });
  cnt++;
  if(cnt === bullets.length)
   clearInterval(interval);
}, 50);

img{
  width:50px;
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class ="col-md-12">
  <div class="col-md-3">
    <img src="images/gun.jpg" onclick="myMove()">
  </div>
  <div id="myAnimation" class="col-md-7">
    <img  src="http://www.freeiconspng.com/uploads/bullet-png-pictures-1.png"><br>
    <img  src="http://www.freeiconspng.com/uploads/bullet-png-pictures-1.png"><br>
    <img  src="http://www.freeiconspng.com/uploads/bullet-png-pictures-1.png"><br>
    <img  src="http://www.freeiconspng.com/uploads/bullet-png-pictures-1.png"><br>
    <img  src="http://www.freeiconspng.com/uploads/bullet-png-pictures-1.png"><br>
  </div>
</div>

Animation is getting triggered on document ready, for your scenario may be onclick.

First get the number childs of #myAnimation, that will help you to clear the interval (once you reach the last child).

Get the width till where it should animate & within the setInterval provide the details.

Hope this will help you.

Answer 3

function myMove(){
  var index = 0;
  var elem = document.getElementsByClassName("bullets");
  var pos = 0;
  var id = setInterval(function(){frame()}, 1000);
  function frame() {
    elem[index].style.marginLeft = '350px'; 
    index ++;
    if (index === 5) {
      clearInterval(id);
      document.getElementById('myAnimation').style.display='none'
    }
  }
}

<div class ="col-md-12"><div class="col-md-3"><img src="images/gun.jpg" alt = "SHOOT" onclick="myMove()"></div>
  <div id="myAnimation" class="col-md-7">
    <img  class = "bullets" src="images/Bullet.png" alt = "bullet1"><br>
    <img class = "bullets"  src="images/Bullet.png" alt = "bullet2"><br>
    <img class = "bullets"  src="images/Bullet.png" alt = "bullet3"><br>
    <img class = "bullets"  src="images/Bullet.png" alt = "bullet4"><br>
    <img class = "bullets"  src="images/Bullet.png" alt = "bullet5"><br>
  </div>
</div>