如何在使用html和javascript單擊其他圖像時隨機移動一個圖像

-3

我是一名JavaScript初學者。我有兩個圖像。一個用於點擊，另一個用於隨機右移10px到左邊的&。一旦我點擊「high5」圖像，「pic2」圖像必須在任何方向上隨機移動不超過10個像素。每次點擊都會添加到分數中，以在最後生成總分。我被困在這一點上，我不知道該去哪裏。有人能幫助我嗎？正如你所看到的，我編輯了我的代碼。我仍然遇到以下問題：如何在使用html和javascript單擊其他圖像時隨機移動一個圖像

創建記分牌以跟蹤用戶在30秒內點擊了多少次點擊。
我需要一個計時器，計數30秒。
每當中間的圖片移動時，它會繼續向左移動。

HTML代碼：

<!DOCTYPE html> 
<!-- game.html 
     Uses game.js 
     Illustrates visibility control of elements 
    --> 
<html lang="en"> 
    <head> 
    <title>Visibility control</title> 
    <meta charset="utf-8" /> 
    </head> 
    <body> 
    <div id="score"> 
     0 
    </div> 

    <div id="high5" style="position: relative; left: 10px;"> 
     <img onclick= "moveImg(); clicked();" src="pics/high5.jpg" 
     style="height:250px; width:250px; " alt="Minion High Five" /> 
    </div> 

    <div id="pic2" style="position: relative; top: 20px; left: 650px;"> 
     <img src="pics/pic2.gif" style="height:250px; width:350px;"/> 
    </div> 

     <script type="text/javascript" src="game.js" ></script> 
    </body> 
</html>

的javascript：

var x = 0; 
var y = 0; 
var timer = 30; 
var count = 0; 
var isDone = true; 

function moveImg() { 
    x += Math.floor(Math.random() * 20) - 10; 
    y += Math.floor(Math.random() * 20) - 10; 

    pic2.style.left = x + "px"; 
    pic2.style.top = y + "px"; 

    if(timer > 0) { 
     setTimeout("moveImg()", 50); 
     timer--; 
    } 
    else { 
     timer = 30; 
    } 
} 

function clicked() { 
    timer = 30; 
    count++; 
    score.innerHTML = count; 
}

來源

2015-09-26 SGIL

你錯過了右括號'）'在你的每一個'if'語句。你也錯過了'if'語句中的大括號'}'。 –

謝謝，但我的代碼仍然不起作用。 :(任何建議？ – SGIL

我開始幫你解決這個問題，但是如果我可以說實話，這段代碼有嚴重的錯誤，你應該把所有東西都分開，這樣它就可讀了，把pixelLeft改爲marginLeft，清理if和其他的結局，有些人有}和一些不（這可以回去，只是太空了你的代碼，javascript應該被很好地美化）。parseInt以獲得marginLeft的價值，設置保證金 – Jesse

嘗試是這樣的：不要使用onclick內HTML.I增加了一些jQuery的一部分，如果你不需要相應地改變它或讓我知道。

var high5,myVar; 
 
$(function(){ 
 
$("img").on("click",function(){ 
 
\t console.log($(this)); 
 
\t if($(this).data('id') == "minion"){ 
 
\t high5=document.getElementById('pic2'); 
 
\t high5.style.left="10px"; 
 
\t moveImg(); \t 
 
\t } 
 
}); 
 
    setInterval(function(){ myStopFunction(); }, 3000);//call to stop shacking after 3000 miliseconds. 
 
}); 
 

 
function moveImg() { 
 
\t //alert("hi"); 
 
    var x; 
 
    x = Math.floor(Math.random()*4)+1; 
 
    left = parseInt(high5.style.left.replace('px', '')); 
 
    console.log(x+ "," +left); 
 
    if (x==4 && left >= 10) { 
 
     high5.style.left = (left - 10) + 'px';; 
 
     } 
 
    if (x==3 && left <= 650) { 
 
     high5.style.left = (left + 10) + 'px'; 
 
    } 
 
    if (x==2 && left >= 10) { 
 
     high5.style.left = (left - 10) + 'px';; 
 
    } 
 
    if (x==1 && left <= 450) { 
 
     high5.style.left = (left + 10) + 'px'; 
 
    } 
 
    
 
    myVar = setTimeout(function(){moveImg();},100); 
 
} 
 
function myStopFunction() { 
 
clearTimeout(myVar); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id = "high5" style = "position: absolute;"> 
 
    <img src="pics/high5.jpg" style="height:250px; width:250px; 
 
     margin-top: 50px; margin-left: 50px; border:none;" 
 
alt="Minion High Five" data-id="minion"/> 
 
    </div> 
 

 
    <div id = "pic2" style=" position: absolute; width:350px;height:250px;margin-left: 550px;border:1px solid black;margin-top:150px;"> 
 
    <img src="pics/pic2.gif" style="width:350px;height:250px;" alt="Minion High Five"/> 
 
    </div>

來源

2015-09-26 06:37:38

謝謝你的代碼，但是當我點擊high5圖片，圖片2必須動搖。 – SGIL

@SGIL嘗試更新的代碼。 –

非常感謝。如何讓它在幾毫秒後停止晃動？ – SGIL

如何在使用html和javascript單擊其他圖像時隨機移動一個圖像

回答

相關問題