當您使用 html 和 javascript 單擊另一張圖像時如何隨機移動一張圖像

Question

我是 javascript 初學者。 我有兩個圖像。 一個是點擊，另一個是隨機左右移動10px。 單擊“high5”圖像后，“pic2”圖像必須在不超過 10 像素的任何方向上隨機移動。 每次點擊都會添加到分數中，最終生成總分。 我被困在這一點上，我不知道該去哪里。 有人能幫助我嗎？ 如您所見，我已經編輯了我的代碼。 我仍然遇到以下問題：

創建記分板以跟蹤用戶在 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;
}

Answer 1

嘗試這樣的事情：不要在 HTML 中使用onclick我添加了一些 jquery 部分，如果您不需要相應地更改它或讓我知道。

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

當您使用 html 和 javascript 單擊另一張圖像時如何隨機移動一張圖像

問題描述

1 個解決方案

解決方案1
0 已采納 2015-09-26 06:37:38

當您使用 html 和 javascript 單擊另一張圖像時如何隨機移動一張圖像

問題描述

1 個解決方案

解決方案1 0 已采納 2015-09-26 06:37:38

解決方案1
0 已采納 2015-09-26 06:37:38