Tengo un programa con dos imágenes para autos y tres botones. El botón PauseRace funciona bien. El botón StartRace funciona, excepto cuando una imagen alcanza los 800 píxeles, las imágenes deberían dejar de moverse y debería aparecer una alerta declarando al ganador. Por último, el botón ResetRace debería mover las imágenes al principio y establecer todos los demás valores en 0.
var timer; var ArandomNumber; var BrandonNumber; var x = 0 var q = 0 function GatherData() { ArandomNumber = GetRandomNumA(); BrandonNumber = GetRandomNumB(); var thedivtop = document.getElementById("Move1"); x += ArandomNumber; thedivtop.style.marginLeft = x + 'px'; var thedivbottom = document.getElementById("Move2"); q += BrandonNumber; thedivbottom.style.marginLeft = q + 'px'; } function StartRace() { timer = setInterval(GatherData, 500); if (document.getElementById("Move1") == 800 + 'px' && document.getElementById("Move2") != 800 + 'px') { alert("Car 1 has won the race!"); } else if (document.getElementById("Move1") != 800 + 'px' && document.getElementById("Move2") == 800 + 'px') { alert("Car 2 has won the race!"); } } function GetRandomNumA() { var x = Math.random(); x = Math.random() + 56; return x; } function GetRandomNumB() { var q = Math.random(); q = Math.random() + 56; return q; } function PauseRace() { clearInterval(timer); } function ResetRace() { timer = 0; x = 0; q = 0; document.getElementById("Move1") == 0 + 'px'; document.getElementById("Move2") == 0 + 'px'; } .moveable { position: absolute; height: 100px; width: 200px; } <body> <b>First to 800 pixels wins!</b> <br> <br> <b>Both cars start at 0 pixels.</b> <br> <br> <input id="Button1" type="button" value="Start Race" onclick="StartRace()" /> <input id="Button1" type="button" value="Pause Race" onclick="PauseRace()" /> <input id="Button1" type="button" value="Reset Cars" onclick="ResetRace()" /> <br> <br> <div id="Move1"> <img id="Car1" class="moveable" src="delorean.jpeg" /> </div> <br> <br> <br> <br> <br> <br> <div id="Move2"> <img id="Car2" class="moveable" src="duster.jpg" /> </div> </body>Sus declaraciones if deben estar en GatherData() y puede usar x y q para verificar cuál está al frente. Además, debe verificar si uno está por delante del otro en caso de que ambos crucen la línea de meta al mismo tiempo. También agregué un clearInterval después de que terminó la carrera.
var timer; var ArandomNumber; var BrandonNumber; var x = 0 var q = 0 function GatherData() { ArandomNumber = GetRandomNumA(); BrandonNumber = GetRandomNumB(); var thedivtop = document.getElementById("Move1"); x += ArandomNumber; thedivtop.style.marginLeft = x + 'px'; var thedivbottom = document.getElementById("Move2"); q += BrandonNumber; thedivbottom.style.marginLeft = q + 'px'; if (x >= 800 && x > q) { alert("Car 1 has won the race!"); clearInterval(timer); } else if (q >= 800) { alert("Car 2 has won the race!"); clearInterval(timer); } } function StartRace() { timer = setInterval(GatherData, 500); } function GetRandomNumA() { var x = Math.random(); x = Math.random() + 56; return x; } function GetRandomNumB() { var q = Math.random(); q = Math.random() + 56; return q; } function PauseRace() { clearInterval(timer); } function ResetRace() { timer = 0; x = 0; q = 0; document.getElementById("Move1") == 0 + 'px'; document.getElementById("Move2") == 0 + 'px'; } .moveable { position: absolute; height: 100px; width: 200px; } <body> <b>First to 800 pixels wins!</b> <br> <br> <b>Both cars start at 0 pixels.</b> <br> <br> <input id="Button1" type="button" value="Start Race" onclick="StartRace()" /> <input id="Button1" type="button" value="Pause Race" onclick="PauseRace()" /> <input id="Button1" type="button" value="Reset Cars" onclick="ResetRace()" /> <br> <br> <div id="Move1"> <img id="Car1" class="moveable" src="delorean.jpeg" /> </div> <br> <br> <br> <br> <br> <br> <div id="Move2"> <img id="Car2" class="moveable" src="duster.jpg" /> </div> </body>