Monday, May 28, 2012

Scratch Car Race Part 4

Welcome to Part 4 of our Car Race Game made in Scratch.

Click the Green Flag to start and then choose one of the three race tracks to use.

Use the following keys to drive around the track:

Use the Up Arrow to accelerate forwards, and the Down arrow to reverse.

Use the Left and Right Arrows for steering, and Space Bar for brakes. (The faster you go the tighter the steering, so be careful not to oversteer at higher speeds).

If you hit the grass, the car slows down dramatically.

The car also has a limiter that slows it back down if maximum speed is exceeded.

The car is hard to steer once the speed gets up, and stays at a constant speed until you either brake or hit the grass.

Concentrate mainly on steering with the left arrow key, and only tap the up key to go faster as you get better on each lap.

It is best to drive the car towards the middle or the outside of the track.

Keep practicing until you achieve mastery.

Try holding down on the up arrow, and when the car gets too fast, you should see a pair of tyre skids appear which slow the car down.    

In this Part 4 of the Car Race we change the previous part's overspeed skids to be proper dual tyre skids, and we also add dual tyre skids to the car's brakes.     

 Producing Dual Tyre Skids
  Computer game Math 5
Image Copyright 2012 by Passy's World

Producing dual tyre skids proved to be the most challenging part of making the car game.

Skids are shown on the track for three seconds every time the car goes over its top speed of "7", and automatically applies its brakes.

A different pair of skids are also shown whenever we hit the space bar and apply the brakes.

All skid marks are cleared from the track at the end of each lap.

Making skids involves using (x,y) coordinates, Algebra, and Trigonometry.

The tyre skid needs to go in the opposite direction that the car is going in, so it would make sense to make the angle of the skid to be 180.

However we actually need to make the angle less than this, so that we can splay the skid direction out at an angle, and then use Sin and Cos Trigonometry to move the (x,y) coordinates of the skid to a position at the back of the car that will look like it came from the tyres.

For this reason, we need to have two separate skids that we run at the same time: a Left Skid and a Right Skid. Let's take a look at how we make the left tyre skid. Consider this diagram of the car.

Computer Game Trigonometry 1
Image Copyright 2012 by Passy's World

The (x,y) position of the car is located at the center of the car.

If we put the skid at a full -180 to the front of the car, then we will only get one tyre skid coming from the very middle of the back of the car.

If we set the skid direction as being -150, rather than -180 then we get the diagram shown above.

Angle A is the internal angle in our triangle, which will be 60 degrees, (because the other angle of the triangle next to white dot is 180 - 150 = 30 degrees). The yellow dot is where we want the (x,y) coordinates of the left tyre skid to be, relative to the white dot where the car center is.

To get the yellow dot's coordinates, we do some Trigonometry as follows :

x of skid = the x of the car + (sinA x the blue hypotenuse)

y of skid = the x of the car + (CosA x the blue hypotenuse)

The green line marked SinA in our car diagram will be negative because we are in the second quadrant of the Cartesian Plane.

The pink line marked CosA will be positive in this second quadrant.

This will have the effect of moving the white dot of the car, across to the yellow dot where we want the skid to be. The Car's X coordinate will have the green line length subtracted from it, and the y coordinate of the car's center will have the length of the pink line added to it.

Because Sin and Cos will have positive or negative values depending on which of the four quadrants the Angle of the skid is, this translation of coordinates works for the full 360 degrees of direction that the car can drive in.

This is very neat use of the Trigonometry of the standard 360 Degree Unit Circle.  

We write the processing into the Scratch Code with the variable "skidDir" to be the angular direction of the skid at any time. We then do the Trig Calculation in a very long piece of code at the bottom of this script.

Computer Game Math 7
Image Copyright 2012 by Passy's World

Here are the bottom of screen blue code blocks for the coordinates magnified to be a bit clearer:

Computer Game Trigonometry 2
Image Copyright 2012 by Passy's World

Computer Game Trigonometry 1
Image Copyright 2012 by Passy's World

The Right Tyre skid is made exactly the same way, except that we set the "skidDir" angle to be the car's angle +150, rather than -150.      

Detailed Instructions for Dual Skids

The following PDF document gives full instructions on how to make dual skids.

If you would like to have your own full size copy of this PDF, then simply click the save disk icon button on the PDF viewer, and you should be able to save it to your own hard disk.

Alternatively, you can view or save the full size PDF by clicking the link below:

Related Items

Scratch Car Race Part 1
Scratch Car Race Part 2
Scratch Car Race Part 3

Big Passy Wasabi