-
fix my codes
hi there,
finnaly I managed to move images and created a car race.The problem
is that I can not stop the cars at a certain position.
1.How can I tell all my three cars to return to the starting point(x=100)
2.How can I stop the race when any of the car get say x=5000 point(finishing line)
Could you please fix my codes belove?
thanks
<html>
<head>
<style>
#line{position:absolute;top:10;left:750;color:blue;height:200;width:5;background-color:blue;}
</style>
<script language="javascript">
a=setInterval('race()',100);
function race()
{
cc1=Math.floor(Math.random()*10)+1
cc2=Math.floor(Math.random()*10)+1
cc3=Math.floor(Math.random()*10)+1
var target1=document.getElementById("text1");
target1.style.posLeft+=cc1;
if(target1>715)
{
target1.style.posLeft=100;
}
var target2=document.getElementById("text2");
target2.style.posLeft+=cc2;
var target3=document.getElementById("text3");
target3.style.posLeft+=cc3;
}
</script>
</head>
<body bgcolor=pink>
<div id=line><hr></div>
<input type="text"style="position:absolute;" name="text1" size=3 height=10 id="text1"><br><br><br>
<input type="text"style="position:absolute;background-color:blue" name="text2" size=3 height=10 id="text2"><br><br>
<input type="text"style="position:absolute;background-color:yellow" name="text3" size=3 height=10 id="text3"><br><br>
<input type=button value="GO" onclick="window.location.reload()">
<a href="javascript:window.location.reload()">start</a>
..........<a href="javascript: clearInterval(a)"> STOP!-dur </a>
</body>
</html>
-
here is the answer
Oh at last I fixed it my self....
<html>
<head>
<style>
#line{position:absolute;top:10;left:750;color:blue;height:200;width:5;background-color:blue;}
</style>
<script language="javascript">
a=setInterval('race()',100);
function race()
{
cc1=Math.floor(Math.random()*10)+1
cc2=Math.floor(Math.random()*10)+1
cc3=Math.floor(Math.random()*10)+1
var target1=document.getElementById("text1");
target1.style.posLeft+=cc1;
if(target1.style.posLeft>=715)
{
clearInterval(a)
alert("the white car won");
}
var target2=document.getElementById("text2");
target2.style.posLeft+=cc2;
if(target2.style.posLeft>=715)
{
clearInterval(a)
alert("blue car won");
}
var target3=document.getElementById("text3");
target3.style.posLeft+=cc3;
if(target3.style.posLeft>=715)
{
clearInterval(a)
alert("the yellow car won");
}
}
</script>
</head>
<body bgcolor=pink>
<div id=line><hr></div>
<input type="text"style="position:absolute;" name="text1" size=3 height=10 id="text1"><br><br><br>
<input type="text"style="position:absolute;background-color:blue" name="text2" size=3 height=10 id="text2"><br><br>
<input type="text"style="position:absolute;background-color:yellow" name="text3" size=3 height=10 id="text3"><br><br>
<input type=button value="GO" onclick="window.location.reload()">
<a href="javascript:window.location.reload()">start</a>
..........<a href="javascript: clearInterval(a)"> STOP!-dur </a>
</body>
</html>:wave:
