-1

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

})
Desmond ade
  • 13
  • 7
  • Good question, I would just add that unless you make this into a working script (by using a code snippet) I would suggest taking out all of the unnecessary code that isn't directly involved with your question. You can learn more about that [here](https://stackoverflow.com/help/mcve). I hope this helps! – Jake Feb 13 '19 at 23:32
  • I can't get your code to work, and looks like your CSS is incomplete. Would be helpful if you provide a code snippet like Jake suggested. – sn3p Feb 13 '19 at 23:37
  • Ok i will take out all unnecessary code as you said – Desmond ade Feb 13 '19 at 23:56
  • So i guess the problem is with my jquery – Desmond ade Feb 13 '19 at 23:56
  • I have changed it to a code snippet – Desmond ade Feb 13 '19 at 23:57

1 Answers1

0

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>
Steve0
  • 2,233
  • 2
  • 13
  • 22