时间戳

首页 > 解决方案 > Jquery 为游戏中的 div 角色设置动画

javascript - Jquery 为游戏中的 div 角色设置动画

问题描述

我正在尝试通过编写一个小游戏来试验 Jquery，其中我使用 html div 作为游戏角色，所以我将这个带有 id 子弹的 div 附加到另一个带有 id 播放器的 div，所以我将点击动作绑定到 body 以便当用户单击页面主体的任何部分，播放器触发按钮，我正在使用 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'})

})

标签： javascriptjquerycss

解决方案

这是一个在子弹到达顶部后将子弹返回给玩家的示例。它使用done选项animate()和这个答案来返回项目符号。

当动画完成时不要删除整个样式属性$("#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>

推荐阅读