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

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

javascript html

如何使用javascript在游戏屏幕上移动项目？,javascript,html,dreamweaver,Javascript,Html,Dreamweaver,我想在屏幕上移动的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)

我想在屏幕上移动的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>


函数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（函数（）{runIt（$（this））}）；
得分=0；
函数CalcCore（me）{
$（me.hide（）；
分数++；
$（“#message”）.html（“你射门了”+得分）；
如果（分数=8）{
警惕（“你得到了全部！”；
}
}

要修复此问题，只需在页面中添加此css即可

.target {
    position: absolute;
}

并将触发器代码

$（“.target”）.each（function（）{runIt（$（this））}）在文档中准备就绪，如下所示
$(document).ready(function(){
  $(".target").each(function(){runIt($(this))});
})

你好，谢谢！代码可以工作，但是现在图像移动是随机的，有时它们会退出我的背景图像1280x720px，有没有办法限制它们？为此，您必须在左侧指定0而不是负值，如下所示：Replaceanimate（{“left”：“-150px”}
withanimate（{“left”：“0px”}
我尝试过，但问题依然存在。我没有退出宽度的问题，但它会在我的背景图像下方退出高度。然后你必须调整用于更改顶部的偏移量。现在偏移量是800。在所有三个位置都将其更改为600。这解决了问题。我再次调整了居中我的背景图像使用文本对齐：居中和填充，但是，现在事情从图像的左外侧开始，有没有办法解决这个问题？