Javascript 如何使图像每半秒移动一定距离？

我正在制作一个网页，上面有两辆车在相互竞争。单击停车灯图像时，比赛开始。创建两个随机数，其中较大的一个将使其中一辆车移动5px。但是当我开始比赛的时候，两辆车在同一时间移动到屏幕的尽头，他们应该每半秒移动50像素，直到他们越过终点

<script>
    var player1 = 0;
    var player2 = 0;
    function setTimer() {
        document.getElementById("race").src = "greenlight.png";
        var i = setInterval(startRace, 200);

    }
    var length = 50;

    function startRace() {


        var num1 = Math.floor(Math.random()*2);

            if (num1 == 0) {

                var move1 = player1 + length;
                player1 = player1 + 50;
                document.getElementById("car1").style.left = move1 + "px";


            }
            else if (num1 == 1) {

                var move2 = player2 + length;
                player2+=50;
                document.getElementById("car2").style.left = move2 + "px";

            }
        }

            if (player1 == 1000)
            {
                alert("Player 1 wins");
                clearInterval(i);
            }
            else if (player2 == 1000)
            {
                alert("Player 2 wins");
                clearInterval(i);
            }

    }




</script>

编辑：我稍微改变了一下。只设置一个随机数变量，如果其中一个图像达到1000px，它将停止。但他们继续前进。为什么呢？现在，我刚刚做了一个，当它达到1000px时，它会显示一个警报，但它会显示获奖者的图像，当前设置为显示：无

<script>
    var player1 = 0;
    var player2 = 0;
    function setTimer() {
        document.getElementById("race").src = "greenlight.png";
        var i = setInterval(startRace, 200);

    }
    var length = 50;

    function startRace() {


        var num1 = Math.floor(Math.random()*2);

            if (num1 == 0) {

                var move1 = player1 + length;
                player1 = player1 + 50;
                document.getElementById("car1").style.left = move1 + "px";


            }
            else if (num1 == 1) {

                var move2 = player2 + length;
                player2+=50;
                document.getElementById("car2").style.left = move2 + "px";

            }
        }

            if (player1 == 1000)
            {
                alert("Player 1 wins");
                clearInterval(i);
            }
            else if (player2 == 1000)
            {
                alert("Player 2 wins");
                clearInterval(i);
            }

    }




</script>

我会参考你们的例子，但这是一个家庭作业，我只能用我学到的东西（我知道你们不可能知道我学到了什么。）

<script>
    var player1 = 0;
    var player2 = 0;
    function setTimer() {
        document.getElementById("race").src = "greenlight.png";
        var i = setInterval(startRace, 200);

    }
    var length = 50;

    function startRace() {


        var num1 = Math.floor(Math.random()*2);

            if (num1 == 0) {

                var move1 = player1 + length;
                player1 = player1 + 50;
                document.getElementById("car1").style.left = move1 + "px";


            }
            else if (num1 == 1) {

                var move2 = player2 + length;
                player2+=50;
                document.getElementById("car2").style.left = move2 + "px";

            }
        }

            if (player1 == 1000)
            {
                alert("Player 1 wins");
                clearInterval(i);
            }
            else if (player2 == 1000)
            {
                alert("Player 2 wins");
                clearInterval(i);
            }

    }




</script>

变量player1=0；
变量player2=0；
函数setTimer（）{
document.getElementById（“race”）.src=“greenlight.png”；
var i=设定间隔（startRace，200）；
}
变量长度=50；
函数startRace（）{
var num1=Math.floor（Math.random（）*2）；
如果（num1==0）{
var move1=播放器1+长度；
player1=player1+50；
document.getElementById（“car1”）.style.left=move1+“px”；
}
否则如果（num1==1）{
var move2=播放器2+长度；
player2+=50；
document.getElementById（“car2”）.style.left=move2+“px”；
}
}
如果（player1==1000）
{
警报（“玩家1获胜”）；
间隔时间（i）；
}
否则如果（player2==1000）
{
警报（“玩家2获胜”）；
间隔时间（i）；
}
}

发生的事情是，while的每个循环都是如此之快，以至于眼睛看不见，所以你只能看到它，就好像它会一直走到最后一样

<script>
    var player1 = 0;
    var player2 = 0;
    function setTimer() {
        document.getElementById("race").src = "greenlight.png";
        var i = setInterval(startRace, 200);

    }
    var length = 50;

    function startRace() {


        var num1 = Math.floor(Math.random()*2);

            if (num1 == 0) {

                var move1 = player1 + length;
                player1 = player1 + 50;
                document.getElementById("car1").style.left = move1 + "px";


            }
            else if (num1 == 1) {

                var move2 = player2 + length;
                player2+=50;
                document.getElementById("car2").style.left = move2 + "px";

            }
        }

            if (player1 == 1000)
            {
                alert("Player 1 wins");
                clearInterval(i);
            }
            else if (player2 == 1000)
            {
                alert("Player 2 wins");
                clearInterval(i);
            }

    }




</script>

您可以尝试使用setTimer更好地控制每个循环，如下所示：

<script>
    var player1 = 0;
    var player2 = 0;
    function setTimer() {
        document.getElementById("race").src = "greenlight.png";
        var i = setInterval(startRace, 200);

    }
    var length = 50;

    function startRace() {


        var num1 = Math.floor(Math.random()*2);

            if (num1 == 0) {

                var move1 = player1 + length;
                player1 = player1 + 50;
                document.getElementById("car1").style.left = move1 + "px";


            }
            else if (num1 == 1) {

                var move2 = player2 + length;
                player2+=50;
                document.getElementById("car2").style.left = move2 + "px";

            }
        }

            if (player1 == 1000)
            {
                alert("Player 1 wins");
                clearInterval(i);
            }
            else if (player2 == 1000)
            {
                alert("Player 2 wins");
                clearInterval(i);
            }

    }




</script>

var i=5；
函数moveCar（）{
setTimeout（函数（）{
//你的代码
var num1=Math.floor（Math.random（）*2）；
var num2=Math.floor（Math.random（）*2）；
如果（num1>num2）{
var增量=i+‘px’；
document.getElementById（“car1”）.style.left=增量；
}
否则如果（num2>num1）{
var增量=i+‘px’；
document.getElementById（“car2”）.style.left=增量；
}
否则{
var增量=i+‘px’；
document.getElementById（“car1”）.style.left=增量；
document.getElementById（“car2”）.style.left=增量；
}
i=i+5；
//你的代码
如果（i<$（window）.width（）-120）{
//width（）返回屏幕宽度
//-120因为到达终点时箱子的大小，不一定是您的箱子
moveCar（）；//继续调用函数
}
}，50）；//执行每个moveCar（）循环的时间
}
$（“#开始”）。单击（函数（）{
moveCar（）；
});
.box{
背景色：#dddddd；
高度：120px；
宽度：120px；
位置：绝对位置；
字体系列：Helvetica；
}
#car1{
顶部：20px；
左：0px；
}
#car2{
顶部：160px；
左：0px；
}
#开始{
顶部：360px；
左：0px；
}

汽车1
汽车2
开始
发生的事情是，while的每个循环都是如此之快，以至于眼睛看不见，所以你只能看到它，就好像它会一直走到最后一样

<script>
    var player1 = 0;
    var player2 = 0;
    function setTimer() {
        document.getElementById("race").src = "greenlight.png";
        var i = setInterval(startRace, 200);

    }
    var length = 50;

    function startRace() {


        var num1 = Math.floor(Math.random()*2);

            if (num1 == 0) {

                var move1 = player1 + length;
                player1 = player1 + 50;
                document.getElementById("car1").style.left = move1 + "px";


            }
            else if (num1 == 1) {

                var move2 = player2 + length;
                player2+=50;
                document.getElementById("car2").style.left = move2 + "px";

            }
        }

            if (player1 == 1000)
            {
                alert("Player 1 wins");
                clearInterval(i);
            }
            else if (player2 == 1000)
            {
                alert("Player 2 wins");
                clearInterval(i);
            }

    }




</script>

您可以尝试使用setTimer更好地控制每个循环，如下所示：

<script>
    var player1 = 0;
    var player2 = 0;
    function setTimer() {
        document.getElementById("race").src = "greenlight.png";
        var i = setInterval(startRace, 200);

    }
    var length = 50;

    function startRace() {


        var num1 = Math.floor(Math.random()*2);

            if (num1 == 0) {

                var move1 = player1 + length;
                player1 = player1 + 50;
                document.getElementById("car1").style.left = move1 + "px";


            }
            else if (num1 == 1) {

                var move2 = player2 + length;
                player2+=50;
                document.getElementById("car2").style.left = move2 + "px";

            }
        }

            if (player1 == 1000)
            {
                alert("Player 1 wins");
                clearInterval(i);
            }
            else if (player2 == 1000)
            {
                alert("Player 2 wins");
                clearInterval(i);
            }

    }




</script>


var i=5；
函数moveCar（）{
setTimeout（函数（）{
//你的代码
var num1=Math.floor（Math.random（）*2）；
var num2=Math.floor（Math.random（）*2）；
如果（num1>num2）{
var增量=i+‘px’；
document.getElementById（“car1”）.style.left=增量；
}
否则如果（num2>num1）{
var增量=i+‘px’；
document.getElementById（“car2”）.style.left=增量；
}
否则{
var增量=i+‘px’；
document.getElementById（“car1”）.style.left=增量；
document.getElementById（“car2”）.style.left=增量；
}
i=i+5；
//你的代码
如果（i<$（window）.width（）-120）{
//width（）返回屏幕宽度
//-120因为到达终点时箱子的大小，不一定是您的箱子
moveCar（）；//继续调用函数
}
}，50）；//执行每个moveCar（）循环的时间
}
$（“#开始”）。单击（函数（）{
moveCar（）；
});
.box{
背景色：#dddddd；
高度：120px；
宽度：120px；
位置：绝对位置；
字体系列：Helvetica；
}
#car1{
顶部：20px；
左：0px；
}
#car2{
顶部：160px；
左：0px；
}
#开始{
顶部：360px；
左：0px；
}

汽车1
汽车2
开始
您可以尝试此框架并重新使用它

<script>
    var player1 = 0;
    var player2 = 0;
    function setTimer() {
        document.getElementById("race").src = "greenlight.png";
        var i = setInterval(startRace, 200);

    }
    var length = 50;

    function startRace() {


        var num1 = Math.floor(Math.random()*2);

            if (num1 == 0) {

                var move1 = player1 + length;
                player1 = player1 + 50;
                document.getElementById("car1").style.left = move1 + "px";


            }
            else if (num1 == 1) {

                var move2 = player2 + length;
                player2+=50;
                document.getElementById("car2").style.left = move2 + "px";

            }
        }

            if (player1 == 1000)
            {
                alert("Player 1 wins");
                clearInterval(i);
            }
            else if (player2 == 1000)
            {
                alert("Player 2 wins");
                clearInterval(i);
            }

    }




</script>


var cars=document.getElementsByClassName（'car'）；
var线程id；
var run\u way=document.getElementById（'view\u port'）；
document.getElementById（'start\u btn'）。onclick=function（）{
if（线程id）{
clearInterval（线程id）；
}
汽车边缘；
var quit_race=false；
var最大转速=5；
var total_cars=cars.length；
而（总车数--）
车数[总车数].style.left=“0px”；
线程id=setInterval（函数（）{
var finish_line=运行方式偏移网络宽度；
var move_by；
车辆总数=车辆长度；
而（总车数--）{
如果（退出比赛）{
返回；
}
move_by=Math.floor（Math.random（）*最大速度）；
car_edge=parseInt（cars[total_cars].offsetLeft）+cars[total_cars].宽度；
如果（（轿厢边缘+移动）<终点线）{
汽车[total_cars].style.left=（汽车边缘+移动方向）+“px”；