如何在使用 javascript 的游戏中移动屏幕上的项目？

Question

我希望 img 文件在屏幕上移动并在单击时消失，所有消失后会有一个弹出窗口显示完成。但是，我的代码只有一半有效，而且 img 文件卡在静止状态。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>

   function runIt(me) {
      $(me).css("top",Math.random()*800)
      .animate({"left":"1200px"},Math.random()*3000+1500,function(){$(me).css("top",Math.random()*800)})
      .animate({"left":"-150px"},Math.random()*3000+1500,function(){$(me).css("top",Math.random()*800);runIt(me)});
   }
   $(".target").each(function(){runIt($(this))});

score = 0;
function calcScore(me){
  $(me).hide();
  score++;
  $("#message").html("You shot "+score);
  if(score==8){
    alert("You got all of them!");
  }
}
</script>
<body>
<div id="container">
<div id="background">
<div class="target" onclick="calcScore(this)"><img src="images/bottle.png" width="80" height="80" alt=""/></div>
<div class="target" onclick="calcScore(this)"><img src="images/bottle.png" width="80" height="80" alt=""/></div>
<div class="target" onclick="calcScore(this)"><img src="images/bottle.png" width="80" height="80" alt=""/></div>
<div class="target" onclick="calcScore(this)"><img src="images/bottle.png" width="80" height="80" alt=""/></div>
<div class="target" onclick="calcScore(this)"><img src="images/bottle.png" width="80" height="80" alt=""/></div>
<div class="target" onclick="calcScore(this)"><img src="images/bottle.png" width="80" height="80" alt=""/></div>
<div class="target" onclick="calcScore(this)"><img src="images/bottle.png" width="80" height="80" alt=""/></div>
<div class="target" onclick="calcScore(this)"><img src="images/bottle.png" width="80" height="80" alt=""/></div>
</div>
</div>
</body>

Answer 1

要修复它，只需在您的页面中添加此 css

.target {
    position: absolute;
}

并将您的触发代码 $(".target").each(function(){runIt($(this))}); 放入文档中，如下所示

$(document).ready(function(){
  $(".target").each(function(){runIt($(this))});
})

如何在使用 javascript 的游戏中移动屏幕上的项目？

How to move items on the screen for a game using javascript?

html

javascript

dreamweaver