3 moving images

squirellplaying

05-30-2004, 03:21 PM

I'm writing a program where when the user clicks the button it starts the race. Right now I'm just trying to get the images to move. The problem is I can't get it to work with passing variables in. When I learned it I used document.getElementById('id').style.left = leftLocation. But that was for one image. I'm trying to make one function to move 3 images so I passed in the variables that had the id's of the 3 images. The problem is, h only increases to 20 and stops, or 10 keeps increasing by 10 to 20 so I only see 20. Also my images don't move.

I need to make the three images move across the screen.

<html>
<head>
<style>
#hImg1{
width:100px;
height:67.4px;
position:absolute;
top:10px;
}
#hImg2{
width:100px;
height:67.4px;
position:absolute;
top:77.4px;
}
#hImg3{
width:100px;
height:67.4px;
position:absolute;
top:144.8px;
}

#startButton{
position: relative;
top:150px;
}
</style>

<script>
function startRace(){
raceTimer1 = setInterval("moveHorse(document.getElementById('hImg1'))", 1000)
raceTimer2 = setInterval("moveHorse(document.getElementById('hImg2'))", 1000)
raceTimer3 = setInterval("moveHorse(document.getElementById('hImg3'))", 1000)
}

function moveHorse(h){
a=h.style.left
b=parseInt(a)
b = b + 10
h = b
}
</script>
</head>
<body>
<img src="horse1.png" style="left:10px;" id="hImg1" /><br />
<img src="horse2.png" style="left:10px;" id="hImg2" /><br />
<img src="horse3.png" style="left:10px;" id="hImg3" /><br />
<input type="button" id="startButton" value="Start the Race!" onclick="startRace()" />
</body>
</html>

glenngv

05-31-2004, 06:05 AM

You should have something random or else all horses will move with the same speed.

function moveHorse(h){
h.style.left=parseInt(h.style.left) + Math.floor(Math.random()*10) + "px";
}

squirellplaying

05-31-2004, 07:18 PM

I know, and I will I have an idea how to do that. Since the horsed will stop at a left = num then the timer will be reset. The rate at which the horse will move will be desided from round to round based on a random number between 1-10.

But right now they don't move at all.

glenngv

06-01-2004, 03:38 AM

Did you try the code I posted?

squirellplaying

06-01-2004, 07:54 PM

Yes. But the spead changes. I need the speed to remain constant inorder to check for a winner. There is also another part to my program where the horses get another random number where they either gain or lost speed based on the random number. For example If horse 1 is set to a speed of 8, horse 2 is 6 and horse 3 is set to 4 then horse one wins. Random numbers of -1.4 , 2.3, and 3.7 are made. Then in the next race horse one will have a speed of 6.6 , horse 2 8.3 and horse 3 will have a speed of 7.7. Then horse two will win. And it repeats again.

glenngv

06-02-2004, 07:21 AM

Play around with this:

<html>
<head>
<style type="text/css">
#Horse1{
width:100px;
height:67.4px;
position:absolute;
top:10px;
}
#Horse2{
width:100px;
height:67.4px;
position:absolute;
top:77.4px;
}
#Horse3{
width:100px;
height:67.4px;
position:absolute;
top:144.8px;
}

#startButton{
position: relative;
top:150px;
}
</style>

<script type="text/javascript">
var finishLine = 100; //x coordinate of the finished line
var raceTimer1,raceTimer2,raceTimer3;
var winner = new Array();

function startRace(btn){
btn.disabled=true;
resetRace();
raceTimer1 = setInterval("moveHorse(document.getElementById('Horse1'))", 1000)
raceTimer2 = setInterval("moveHorse(document.getElementById('Horse2'))", 1000)
raceTimer3 = setInterval("moveHorse(document.getElementById('Horse3'))", 1000)
}

function resetRace(){
winner.length=0;
clearInterval(raceTimer1);
clearInterval(raceTimer2);
clearInterval(raceTimer3);
document.getElementById('Horse1').style.left="10px";
document.getElementById('Horse2').style.left="10px";
document.getElementById('Horse3').style.left="10px";
}
function moveHorse(h){
h.style.left=parseInt(h.style.left) + Math.floor(Math.random()*10) + "px";
if (parseInt(h.style.left)>=finishLine){
var horseId = h.id;
winner[winner.length] = horseId;
clearInterval(window["raceTimer"+horseId.substring(horseId.length-1)])
if (winner.length==3){
document.getElementById('startButton').disabled=false;
var rank = '';
for (var i=0;i<winner.length;i++){
rank += i + 1 + " - " + winner[i] + "\n";
}
alert("Race finished. Here are the ranks:\n"+rank);
}
}
}

function moveHorse2(h){
var a=h.style.left
varb=parseInt(a)
varb = b + 10
var h = b
}
</script>
</head>
<body>
<img src="horse1.png" style="left:10px;" id="Horse1" /><br />
<img src="horse2.png" style="left:10px;" id="Horse2" /><br />
<img src="horse3.png" style="left:10px;" id="Horse3" /><br />
<form name="f">
<input type="button" id="startButton" value="Start the Race!" onclick="startRace(this)" />
</form>
</body>
</html>