使用JavaScript在网站上竞赛两个图像

Question

我需要做的是:让两个图像在屏幕上相互竞争.必须随机移动对象并使它们随机移动.一个人到达某个点然后我会显示一个图像以显示获胜者.

我有它移动的地方,它产生数量和时间.当我单击图像以启动功能时,最终会发生什么,他们只是在适当的位置进行抖动,好像他们不理解他们在场上的最后位置.我确信这很简单,我很想知道,但我会很乐意帮忙.是的,这是一个中期项目,我一直在努力,但我不是要求你为我做功课,因为这是错误的.这就是我所拥有的.

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<style>

body{
    background-image:url('Images/duckstadium.png');
    background-repeat:no-repeat;
    background-position:center top;
}

</style>
<script>

var randleng;

function resetRace(){
window.location.reload();
}
//CHANGES ARE BELOW
//PLACED THE POS1 & POS2 OUTSIDE OF THE FUNCTION
    var pos1 = 0;
    var pos2 = 0;

function startRace() {

    var myVar1 = setInterval(startRace, 1000);
    var ranNum = Math.floor(Math.random()*2);
    randleng = Math.floor(Math.random()*5);

  if(ranNum == 0){

    var leng1 = pos1 + randleng;
    pos1+=randleng;
    document.getElementById("yellowHelmet").style.left = leng1 + "px";

    } 

    else if (ranNum == 1){

    var leng2 = pos2 + randleng;
    pos2+=randleng;
    document.getElementById("chromeHelmet").style.left = leng2 + "px";

  }
  //NOW THEY JUST NEED TO STOP FLYING OFF INTO TIME AND SPACE


if (pos1 == 1000)
  {
    alert("Yellow Helmet is the winner!");
    stopHelmets();
  }
  else if (pos2 == 1000)
  {
    alert("Chrome Helmet is the winner!");
    stopHelmets();
  }
  function stopHelmets(){
  clearInterval(myVar1);
  }
}

</script>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>The Great Oregon Duck Helmet Race!</title>
</head>

<body>
<img style="width:150px; height:inherit; position:absolute; top:400px;" src="Images/Oregon_Lightning_Mini_Helmet.png" id="yellowHelmet"/>
<img style="width:150px; height:inherit; position:absolute; top:600px;" src="Images/Oregon-Ducks-Helmet-psd88550.png" id="chromeHelmet"/>
<img style="width:200px; height:inherit; position:absolute; right:0px; cursor:pointer;" src="Images/oregon-logo.jpg" id="resetButton" onclick="resetRace()"/>
<img style="width:200px; height:inherit; cursor:pointer;" src="Images/oregon-ducks-logo_large.png" id="startButton" onclick="startRace()"/>

</body>

</html>

Answer 1

你需要利用pos1和pos2.目前,您只需left按每个周期的随机移动量更改每个图像的属性.你需要:

• 将随机值添加到leftor 的当前值
• 保留leftpos变量中的总值,并将其值分配给left属性

代码错误的单一图像示例:

• 左边是0
• 兰德是5
• 左边现在是5
• 下一个兰特是10
• left现在是10,这是错误,因为它应该是5 + 10

这是一个简单的例子,展示了我的意思:http://jsfiddle.net/6ja5fx1f/