Question

我是javascript的初学者。我有两张照片。一个用于点击，另一个用于向左移动10px＆amp;随机的。一旦我点击＆＃34; high5＆＃34;图像，＆＃34; pic2＆＃34;图像必须在任何方向上随机移动不超过10个像素。每次点击都会添加到分数中，以便在结尾处生成总分。我被困在这一点上，我不知道该往哪里去。有谁可以帮助我吗？如您所见，我编辑了我的代码。我仍然遇到问题：

创建记分板以跟踪用户点击的次数在30秒内点击。
我需要一个30秒的计时器。
每当中间的图片移动时，它就会继续前进左侧。

HTML code：

<!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＆amp; amp;单击其他图像时随机移动一个图像的JavaScript

1 个答案: