Jquery animate a div character in a game


I am trying to experiment with Jquery by writing a small game where i am using html div's as game character, so i have this div with id bullet attach to another div with id player, so i have bind on click action to body so that when user click any part of the page body the player fires the button and i am using the Jquery animate method to do that and it works fine except the bullet goes and remain at the top of the page, whereas i want a case where player can fire many bullets at the same time so how can i achieve this. I do not want my bullet div to go and stick at the top.

app.js file

//Control mouse movement and bullet movement
$(document).ready(function(){
    $('body').mousemove(function(event){
        var msg = 'Handler for mouse called at'
        //moves bullet to current mouse position and player position
        $('#bullet').css({'left':event.pageX})
        //moves player to the current mouse postion
        $('#player').css({'left':event.pageX})
    })
})

//Fires bullet
$('body').click(function(){
    $('#bullet').animate({'bottom':'500px'})

})


Answers:


Here is a sample that returns the bullet to the player after it reaches the top. It uses the done option of animate() and this answer to return the bullet.

It is important when the animation is done not to remove the entire style attribute with $("#bullet").removeAttr("style") or similar because that would remove the x-coordinate and place the bullet off to the left until the mouse moves again.

//Control mouse movement and bullet movement
$(document).ready(function() {
  $('body').mousemove(function(event) {
    var msg = 'Handler for mouse called at'
    //moves bullet to current mouse position and player position
    $('#bullet').css({
      'left': event.pageX
    })
    //moves player to the current mouse postion
    $('#player').css({
      'left': event.pageX
    })
  })
})

//Fires bullet
$('body').click(function() {
  $('#bullet').animate({
    'bottom': '500px'
  }, {
    done: function() {
      $('#bullet').attr('style', function(i, style) {
        return style && style.replace(/bottom[^;]+;?/g, '');
      });
    }
  });
});
#player {
  height: 50px;
  width: 50px;
  background-color: red;
  position: relative;
}

#bullet {
  margin-top: 550px;
  height: 25px;
  width: 15px;
  position: relative;
  margin-left: 18px;
}
<!DOCTYPE html>
<html>

<head>
  <!--Import Google Icon Font-->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

<body class="blue lighten-4" id="body">
  <div class="orange darken-1" id="bullet">
  </div>
  <div class="" id="player">
  </div>




  <footer class="page-footer green lighten-1" id="footer">
    <div class="container">
      <div class="row">
        <div class="col l6 s12">
          <!-- <h5 class="green-text lighten-1">Footer Content</h5>
                <p class="green-text lighten-1">You can use rows and columns here to organize your footer content.</p> -->
        </div>
        <div class="col l4 offset-l2 s12">
          <!-- <h5 class="white-text">Links</h5>-->
          <ul>
            <!--  <li><a class="grey-text text-lighten-3" href="#!">Link 1</a></li>
                  <li><a class="grey-text text-lighten-3" href="#!">Link 2</a></li>
                  <li><a class="grey-text text-lighten-3" href="#!">Link 3</a></li>
                  <li><a class="grey-text text-lighten-3" href="#!">Link 4</a></li> -->
          </ul>
        </div>
      </div>
    </div>
    <div class="footer-copyright">
      <div class="container">
        <!--  © 2014 Copyright Text
            <a class="grey-text text-lighten-4 right" href="#!">More Links</a> -->
      </div>
    </div>
  </footer>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>

</html>