Question

所以我在两张照片之间有一场“比赛”。它们从左侧开始，当我点击第三个图像时它开始比赛，当一个人向右侧时它停止它们。并提醒胜利者。我无法发生的两件事......我点击的图像不会改变为不同的图像。在“比赛”结束后，当我再次点击图像时，它不会重置所有内容并重新开始。无论随机数是什么，我都会继续。小提琴：http://jsfiddle.net/y71kpg1o/

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <link href="style.css" rel="stylesheet">
   <title>The Amazing Race</title>
</head>

<body>
   <img src="images/tie.png" class="img1" id="Stewie" alt="tie"></br>
   <img src="images/xwing.png" class="img2" id="Squidward" alt="xwing">
   <input type="image" src="images/death.png" class="img3" alt="dstar" onclick="interval = setInterval( fly, 250 )">




<script>
var racers   = [ document.getElementById("Cartman"), document.getElementById("Stewie") ];

function fly() {
var racer  = racers[ Math.floor(Math.random() * racers.length) ];
var newPos = parseInt( racer.style.left || 0 ) + 25;
racer.style.left = newPos + "px";
if( (newPos + racer.clientWidth) >= window.innerWidth){
    clearInterval( interval );
    alert( "And the winner is " + racer.id );
}    
}
</script>

</body>
</html>

另外，我有一个CSS来放置图像和大小。关于我做错了什么想法？

由于

Answer 1

虽然我同意@jacelysh你应该为这样的问题提供一个小提琴，但答案很可能是显而易见的，它并不重要。

您正在寻找

[ document.getElementById("Cartman"), document.getElementById("Stewie") ]

但是你的div ids表明你应该寻找

[ document.getElementById("Squidward"), document.getElementById("Stewie") ]

•要更改单击的图像，您只需更新它的src属性

完成后有一百种方法可以让游戏重置，但首先要关闭 •我将它包装在像endRace（）这样的函数中 •您可以在容器中添加一个类，子元素可以使用它来重置自己。

•作为旁注，你应该试着养成将你的javascript移出dom的习惯。因此，听取javascript中的点击而不是dom中的onclick处理程序。

我无所事事，所以我给小提琴做了一点改革，说明了我在说什么。 http://jsfiddle.net/ryanore/y71kpg1o/1/

Javascript更改图像并重置页面unpon完成

1 个答案: