如何移动一个图像随机当你点击另一个图像使用html &javascript

How to move one image randomly when you click on the other image using html & javascript

本文关键字：图像另一个 html javascript 当你何移动移动一个随机更新时间：2023-09-26

我是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;
}

试试这样做:不要在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>