Javascript racing game

Page 1 of 1

4 Replies - 9519 Views - Last Post: 05 April 2010 - 06:28 PM

#1 chrisp200

Reputation: 0
• Posts: 82
• Joined: 18-November 08

Javascript racing game

Posted 13 December 2009 - 07:32 PM

I am creating a simple racing game with javascript and html. What I want to do is have two .gif pictures on the left side of the screen and have a finish line on the right. When the user clicks start each image will have a random speed applied to it and the first racer to reach the finish line will win the race.

I am confused on how I should go about having a random speed for each image and how to apply on onlick to both images.

heres what i Have so far...

```<img src="baby_crawling.GIF" alt="" style="position: absolute; top: 50px;">

<form>
<input type="button" value="Move" onclick="movep()">
</form>

<script type="text/javascript">

var times = 50;
var dist = 0;
var step = 10;
var counter = 0;
function movep()
{
document.images[0].style.left = dist + "px";
dist += step;
counter++;
if (counter < times)
setTimeout("movep()", 100);
}

```

Is This A Good Question/Topic? 0

Replies To: Javascript racing game

#2 Martyr2

• Programming Theoretician

Reputation: 5224
• Posts: 14,003
• Joined: 18-April 07

Re: Javascript racing game

Posted 13 December 2009 - 08:26 PM

Well, lets break this problem down....

1) We need to get a random speed for each racer. This is simply generating a random number for each between some values. If your race track was 600px in width, you might want a random number between like 1 and 20.

2) Now that you have random numbers, you need to have a looping mechanism that will continue until one of the pictures has a right edge across the finish line (right edge = left edge + width of pic). That is, some picture's right edge is at a position greater than the left edge of the finish line coordinates. This looping mechanism can be your setTimeout function which calls a function every so many X milliseconds.

3) Each time through the loop you add the random number to the pictures left edge coordinate. To use the .left property, your pictures will have to be position either using relative or absolute positioning. So make sure to set the appropriate CSS.

4) Each time through the loop you will also test the right edge against the finish line. At which time you will stop the setTimeout mechanism.

5) Your onclick of the button will kick off the setTimeout timer to call the function.

Hopefully you get what I am saying here.

Here is an example...

```<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<title>Race test demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

// Setup one speed
var speed1 = Math.floor(Math.random()*20) + 1;

// This will be our timer
var timer;

// Run the race!
function RunRace() {
// Get the image, grab its left coordinate (notice it is positioned as relative)
var racer1 = document.getElementById("racer1");
var left = parseInt(racer1.style.left.replace("px",""));
var width = parseInt(racer1.width);

// Add the speed onto the left
racer1.style.left = (left + speed1) + "px";

// Calculate right edge and check if it is less than 800 (length of race track)
// If so, keep racing, otherwise clear the timeout and declare your winner
if ((left + width) < 800) {
timer = setTimeout("RunRace()",1000);
}
else {
clearTimeout(timer);
}
}

</script>

<body>

<img src="yourimage.jpg" style="position: relative; top: 0px; left: 0px;" id="racer1"/>

<br/><br/>
<input type="button" name="go" value="Race!" onclick="setTimeout('RunRace()',1)"/>

</body>
</html>

```

Enjoy!

"At DIC we be pic racing code ninjas.... go go gadget ninjas!"

#3 chrisp200

Reputation: 0
• Posts: 82
• Joined: 18-November 08

Re: Javascript racing game

Posted 15 December 2009 - 03:05 PM

Thank you for the help! I have been messing around with the code and have it so 2 images (Bart and Homer) race each, both with a random speed. My problem is I wanted to create an alert that said who wins. From what I see my code looks correct, but anytime racer 2 wins the race he keeps moving until racer 1 finishes the race, then when racer 1 finally finishes the race it says that he won the race.

hope this makes sence

```// Setup one speed
var speed1 = Math.floor(Math.random()*33) + 1;

// This will be our timer
var timer;

// Run the race!
function RunRace() {
// Get the image, grab its left coordinate (notice it is positioned as relative)
var racer1 = document.getElementById("racer1");
var left = parseInt(racer1.style.left.replace("px",""));
var width = parseInt(racer1.width);

// Add the speed onto the left
racer1.style.left = (left + speed1) + "px";

// Calculate right edge and check if it is less than 800 (length of race track)
// If so, keep racing, otherwise clear the timeout and declare your winner
if ((left + width) < 800) {
timer = setTimeout("RunRace()",800);

}

else if ((left + width) > 800){
clearTimeout(timer);
}

var speed2 = Math.floor(Math.random()*33) + 1;

var racer2 = document.getElementById("racer2");
var left2 = parseInt(racer2.style.left.replace("px",""));
var width2 = parseInt(racer2.width2);

// Add the speed onto the left
racer2.style.left = (left2 + speed2) + "px";
if ((left2 + width2) < 800) {
timer = setTimeout("RunRace()",800);
}

else if ((left2 + width2) > 800){
clearTimeout(timer);
}
}

```

#4 Sai Jen

Reputation: 0
• Posts: 2
• Joined: 04-April 10

Re: Javascript racing game

Posted 04 April 2010 - 10:17 PM

Anyone figure this second question out? I am in the same boat, as I have four "racers", and I cannot for the life of me figure this out.

chrisp200, on 15 December 2009 - 02:05 PM, said:

Thank you for the help! I have been messing around with the code and have it so 2 images (Bart and Homer) race each, both with a random speed. My problem is I wanted to create an alert that said who wins. From what I see my code looks correct, but anytime racer 2 wins the race he keeps moving until racer 1 finishes the race, then when racer 1 finally finishes the race it says that he won the race.

hope this makes sence

```// Setup one speed
var speed1 = Math.floor(Math.random()*33) + 1;

// This will be our timer
var timer;

// Run the race!
function RunRace() {
// Get the image, grab its left coordinate (notice it is positioned as relative)
var racer1 = document.getElementById("racer1");
var left = parseInt(racer1.style.left.replace("px",""));
var width = parseInt(racer1.width);

// Add the speed onto the left
racer1.style.left = (left + speed1) + "px";

// Calculate right edge and check if it is less than 800 (length of race track)
// If so, keep racing, otherwise clear the timeout and declare your winner
if ((left + width) < 800) {
timer = setTimeout("RunRace()",800);

}

else if ((left + width) > 800){
clearTimeout(timer);
}

var speed2 = Math.floor(Math.random()*33) + 1;

var racer2 = document.getElementById("racer2");
var left2 = parseInt(racer2.style.left.replace("px",""));
var width2 = parseInt(racer2.width2);

// Add the speed onto the left
racer2.style.left = (left2 + speed2) + "px";
if ((left2 + width2) < 800) {
timer = setTimeout("RunRace()",800);
}

else if ((left2 + width2) > 800){
clearTimeout(timer);
}
}

```

#5 Dogstopper

Reputation: 2965
• Posts: 11,222
• Joined: 15-July 08

Re: Javascript racing game

Posted 05 April 2010 - 06:28 PM

Oh...this post is back from '09 and it hasn't been answered. Probably a better idea to start you own thread explaining the issue and to not necro old topics like this.