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

#1 chrisp200  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • 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  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 4438
  • View blog
  • Posts: 12,310
  • 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>
<head>
<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>
</head>

<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!" :snap:
Was This Post Helpful? 0
  • +
  • -

#3 chrisp200  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • 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

Thank you for your help

// 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);
		alert("Congratulations To BART!");
		}
		
	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);
		alert("Congratulations To HOMER!");
}
}


Was This Post Helpful? 0
  • +
  • -

#4 Sai Jen  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • 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.

Thank you in advance.

View Postchrisp200, 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

Thank you for your help

// 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);
		alert("Congratulations To BART!");
		}
		
	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);
		alert("Congratulations To HOMER!");
}
}


Was This Post Helpful? 0
  • +
  • -

#5 Dogstopper  Icon User is offline

  • The Ninjaducky
  • member icon



Reputation: 2876
  • View blog
  • Posts: 11,051
  • 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.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1