Question

我正在尝试通过编写一个小游戏来尝试使用Jquery，在该游戏中我使用html div作为游戏角色，因此我将此具有id项目符号的div附加到具有id播放器的另一个div上，因此我将单击动作绑定到了主体这样，当用户单击页面正文的任何部分时，播放器都会触发按钮，而我使用的是jQuery animate方法，它可以正常工作，只是项目符号消失并保留在页面顶部，而我想要一种情况玩家可以同时发射许多子弹，所以我怎么能做到这一点。我不希望我的子弹div停留在顶部。

app.js文件

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

})

Answer 1

这里有一个样本，可在子弹到达顶部后将子弹返回给玩家。它使用animate()和this answer的done选项返回项目符号。

完成动画时，不要用$("#bullet").removeAttr("style")或类似的样式删除整个样式属性，这一点很重要，因为那样会删除x坐标并将子弹放在左边，直到鼠标再次移动。

//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>

jQuery为游戏中的div角色设置动画

1 个答案: