Как перемещать элементы на экране для игры с помощью javascript?

Я хочу, чтобы img-файлы перемещались по экрану и исчезали при нажатии, после того, как все ушли, появится всплывающее окно, чтобы показать завершение. Тем не менее, только половина моего кода работает, и файлы img застревают неподвижно.Как перемещать элементы на экране для игры с помощью javascript?

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

источник

2016-01-12 Sergio Koh

Чтобы исправить это, просто добавьте этот CSS на странице

.target { 
    position: absolute; 
}

и поместить код триггера $(".target").each(function(){runIt($(this))}); в документе готов, как показано ниже

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

источник

2016-01-12 08:43:45 Thanga

Привет, спасибо! Работа кода, но теперь, когда движение изображения случайное, иногда они выходят из моего фонового изображения 1280x720px, есть ли способ их ограничить? –

Для этого вам нужно дать 0 вместо отрицательного значения влево, как показано ниже: Заменить 'animate ({" left ":" - 150px "}' с 'animate ({" left ":" 0px "}' – Thanga

I ' Я попытался это сделать, но проблема сохраняется. У меня нет проблем с выходом из ширины, но вместо этого она идет ниже моего фонового изображения, выходя из его высоты. –

Как перемещать элементы на экране для игры с помощью javascript?

ответ

Смежные вопросы