javascript - 使用 JavaScript 在网站上竞速两张图片-6ren

javascript - 使用 JavaScript 在网站上竞速两张图片

转载作者：太空宇宙更新时间：2023-11-04 15:06:34

我需要做的是:让两个图像在屏幕上相互竞争。必须随机移动物体并使它们移动随机长度。一个达到一定程度，然后我会显示一张图片以显示获胜者。

我把它放在他们移动的地方，它会生成数字和时间。当我单击图像以启动该功能时，最终发生了什么，它们只是在原地抖动，就好像他们不了解自己在场上的最后位置一样。我敢肯定这是我所缺少的简单事情，但希望得到一些帮助。是的，这是一个中期项目，我一直在努力，但我不是要你为我做作业，因为那样做是错误的。这是我的。

        <!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>