Zoom Zoom! Build a Racing Game in Godot

1

🆕

Open Godot and Make a New Project

Every game starts with a blank canvas let's make one!

▶ Current

🎯

Goal for this step

Create a new Godot project called "My Racing Game" and open it up for the first time!

🧒

Hey, little coder! Imagine Godot is a big empty racing track. Right now there's nothing there — no cars, no road, nothing! We're going to build it all ourselves, step by step. You're going to be a game maker!

What to do:

1Double-click the Godot icon to open it. You'll see the Project Manager it's like a bookshelf of all your games.
2Click the big button that says "New Project" (or "+ New").
3In the Project Name box, type: My Racing Game
4Click "Browse" and choose a folder to save it in. Your Desktop is perfect!
5Make sure Renderer is set to Forward+ or Compatibility either is fine for us.
6Click the green "Create & Edit" button. Godot will open!

👨‍👩‍👧

Grown-up: The project folder must be empty Godot will warn you if it isn't. Help the child choose a sensible location. The Compatibility renderer runs on more hardware if you're unsure.

💡

When Godot opens you'll see a big grey area in the middle (that's the Viewport your game world!), a panel on the left (the Scene Tree), and lots of buttons at the top. Don't worry we'll only use the bits we need!

🕹️ Try it!

Click around the Godot editor for 60 seconds. Can you find the FileSystem tab at the bottom? That's where your game files live!

✅ Done! I made my project! →

2

🗺️

Make the Race Track

Draw a road for your car to zoom around!

🔒 Locked

🎯

Goal for this step

Create a new 2D scene, add a coloured background, and draw a simple race track using a TileMapLayer (or just a big colourful rectangle to start).

🧒

Little coder: Think of this step like drawing a race track on paper before you place any toy cars on it. We need a green field and a grey road!

Create a new 2D Scene

1At the top of the screen, click Scene → New Scene.
2In the Scene panel on the left, click the "2D Scene" button. This adds a Node2DA Node2D is like a blank piece of paper it holds everything in your 2D game world! called "Node2D".
3Right-click "Node2D" in the Scene panel and choose Rename. Call it Track.

Add a green background

1With Track selected, click the "+" button (Add Child Node).
2Search for ColorRect and double-click it to add it.
3In the Inspector on the right, click Color and pick a nice green colour that's our grass!
4Set Size to x: 1152, y: 648 (this fills the screen).

Add a grey road rectangle

1Add another ColorRect as a child of Track.
2Make it dark grey (hex: #444444).
3Set its size to x: 200, y: 648 and position it in the centre: x: 476, y: 0. That's our first straight road!
4Press Ctrl + S to save. Call the scene track.tscn.

👨‍👩‍👧

Grown-up: For a more impressive track later, look into Godot's TileMapLayer but a simple rectangle track is perfect for a first build. We can always make it fancier! The important thing is getting the car moving first.

✅

Quick trick: Can't see your rectangles? Press the "Frame Selected" button (or press F on keyboard) in the viewport to zoom to fit everything!

✅ Track is ready! →

3

🚗

Add Your Car!

Every race needs a car let's put one in the game!

🔒 Locked

🎯

Goal for this step

Create a car scene using a CharacterBody2D node with a coloured rectangle as the car body. We'll make it look like a proper top-down car!

🧒

Little coder: Right now our track has no cars like an empty racing track! Let's build a car and park it on the road. Then next step we'll make it move! 🏎️

Why a separate scene for the car?

💡

In Godot, we put the car in its own scene file. That way we can use it in lots of different levels later like having one toy car you can put on any track!

Create the car scene

1Go to Scene → New Scene.
2Click "Other Node" and search for CharacterBody2D. Add it! Rename it to Car.
3Add a child node: ColorRect. Set size to x: 40, y: 72. Set position to x: -20, y: -36 (this centres it on the car).

Choose your car colour! 🎨

Pick a colour for your car below — remember what you pick and set it in Godot!

✨ Great choice! Set your ColorRect's colour to #ff6b35 in Godot.

Add a CollisionShape2D

1Add a child to Car: search for CollisionShape2D and add it.
2In the Inspector, click next to Shape and choose "New RectangleShape2D".
3Set the shape size to match your car: x: 40, y: 72.

👨‍👩‍👧

Grown-up: The CollisionShape2D is the car's invisible "bumper" it's what Godot uses to detect crashes. Without it, the car would pass through walls. The child doesn't need to fully understand this yet, just follow the steps!

Your scene should look like this:

📦 Car (CharacterBody2D)

🟧ColorRect ← the car body you can see

🔷CollisionShape2D ← invisible bumper

4Press Ctrl + S and save this scene as car.tscn.

Place the car on the track

1Open your track.tscn scene (click it in the FileSystem at the bottom).
2Drag car.tscn from the FileSystem into the viewport. It appears on screen!
3Drag it to sit on your grey road.
4Save with Ctrl + S.

✅ My car is on the track! →

4

⌨️

Make the Car Move!

Time to write your first code! Don't worry it's just 15 lines.

🔒 Locked

🎯

Goal for this step

Write a GDScript that makes the car move with arrow keys (or WASD). By the end, you'll be able to press Play and drive!

🧒

Little coder: Code is like giving instructions to your car. We're going to say: "When I press the UP key, move forwards!" It's like talking to your game! 🗣️🎮

Add a script to the Car

1Open your car.tscn scene.
2Click the Car node in the Scene panel.
3Click the scroll icon at the top (or right-click → Attach Script).
4Leave everything as default and click Create. The script editor opens!

Type in this code

👨‍👩‍👧

Grown-up: Let the child type this themselves, letter by letter — even if it takes a while! The act of typing code is part of learning. You can spell out words for them. Typos are normal; we'll fix them together!

car.gd

extends CharacterBody2D

# How fast the car goes
var speed = 300

# How fast the car turns
var turn_speed = 3.0

func _physics_process(delta):
	# Check if up/down arrow keys are pressed
	var drive = Input.get_axis("ui_down", "ui_up")

	# Check if left/right arrow keys are pressed
	var steer = Input.get_axis("ui_left", "ui_right")

	# Turn the car (only when moving)
	if drive != 0:
		rotation += steer * turn_speed * delta

	# Move the car forward/backward in the direction it faces
	velocity = Vector2.UP.rotated(rotation) * drive * speed

	# Actually move it!
	move_and_slide()

✅

Spaces or tabs? In GDScript, the lines under func _physics_process must be indented! Press Tab at the start of those lines. Godot will usually do this for you automatically.

Press Play! 🟢

1Press Ctrl + S to save the script.
2Click the ▶ Play Scene button at the top (or press F6).
3A game window opens — press the arrow keys!

🧒

🎉 IT MOVES! You just wrote code that makes a car drive! You are officially a Game Developer! High five! ✋

What does each line mean?

var speed = 300

This is like setting the car's top speed. Try changing 300 to 500 is it faster? What about 100?

var turn_speed = 3.0

How quickly the car turns. A bigger number = spinny! A smaller number = more like a truck.

🕹️ Try it!

Change speed to 600 and play again. Whoa! Now try 100. What feels best to you? Change it back to whatever feels fun!

✅ My car drives! →

5

📸

Add a Camera So We Can See!

The camera follows the car wherever it goes!

🔒 Locked

🎯

Goal for this step

Add a Camera2D to the car so the view follows it around the track!

🧒

Little coder: Imagine a TV camera following a racing car that's what we're making! The camera will always stay right behind our car so we can see where it's going! 📸

1Open car.tscn.
2Click the Car node and add a child: search for Camera2D and add it.
3In the Inspector, make sure "Enabled" is ticked ✓.
4You can also tick "Position Smoothing → Enabled" to make the camera glide smoothly. It looks much better!
5Set Zoom to x: 1.5, y: 1.5 to zoom in a bit closer.

Your Car scene now looks like this:

📦 Car (CharacterBody2D)

🟧ColorRect

🔷CollisionShape2D

📸Camera2D ← NEW!

✅

Press F6 (Play Scene) and drive around. The camera should now follow the car. If the track disappears, make sure your track and car are in the same scene drag car.tscn into track.tscn!

✅ Camera is following my car! →

6

⏱️

Add a Lap Timer!

Every racing game needs a timer let's count the seconds!

🔒 Locked

🎯

Goal for this step

Add a Label to the screen that shows how many seconds the player has been driving. It counts up like a stopwatch!

🧒

Little coder: Real racing games show a big timer so you can beat your own record. We're going to put one in our game and then you can time yourself doing laps! ⏱️

Add a CanvasLayer for the UI

💡

A is like a sheet of glass on top of the game world. Anything we put in it stays on screen even when the car drives away!

1Open track.tscn.
2Add a child to Track: search for CanvasLayer and add it.
3Add a child to CanvasLayer: search for Label and add it.
4Rename the Label to TimerLabel.
5In the Inspector, change the Text to Time: 0.0
6Set Position to about x: 20, y: 20 top left corner.
7In the Theme Overrides → Font Sizes section, set the font size to 32. Big and easy to read!

Add a script to the Track

1Click the Track node in the Scene panel.
2Attach a script to it. Call it track.gd.
3Type this code:

track.gd

extends Node2D

# How many seconds have passed
var elapsed = 0.0

func _process(delta):
	# Add the time since last frame
	elapsed += delta

	# Update the timer label on screen
	$CanvasLayer/TimerLabel.text = "Time: " + str(snappedf(elapsed, 0.1))

✅

The $CanvasLayer/TimerLabel part is the path to your Label node like an address! Make sure your nodes are named exactly CanvasLayer and TimerLabel, otherwise it won't find them.

👨‍👩‍👧

Grown-up: delta is the time (in seconds) since the last frame. Adding it up gives us total elapsed time this is the standard game-loop pattern. snappedf rounds it to 1 decimal place so it doesn't scroll too fast.

🕹️ Try it!

Press Play! Do you see a timer in the top left? Drive your car around and watch the seconds tick up! Can you do a lap in under 10 seconds?

✅ Timer is working! →

7

🏁

Add a Finish Line!

You can't win a race without a finish line!

🔒 Locked

🎯

Goal for this step

Place a finish line on the track. When the car crosses it, the timer stops and a "You Win!" message appears!

🧒

Little coder: A race with no finish line goes on forever and that would be exhausting! We need a special magic line that knows when the car crosses it. In Godot we use an Area2D it's an invisible detector! 🔍

Create the Finish Line

1Open track.tscn.
2Add a child to Track: search for Area2D. Rename it FinishLine.
3Add a child to FinishLine: CollisionShape2D. Set shape to RectangleShape2D, size x: 200, y: 20.
4Add another child to FinishLine: ColorRect, size x: 200, y: 20, colour: white-and-black chequerboard. (Just use white for now we'll say it's the finish line!)
5Move FinishLine to sit across your road near the top.

Add a "You Win!" Label

1Add a child to CanvasLayer: a new Label. Rename it WinLabel.
2Set the text to 🏁 YOU WIN!.
3Set font size to 64. Position it in the centre of the screen (about x: 400, y: 280).
4In the Inspector, set Visible to OFF (untick the eye icon). We'll turn it on with code!

Update track.gd to detect the finish

track.gd (updated)

extends Node2D

var elapsed = 0.0
var racing = true   # is the race still going?

func _ready():
	# Connect the finish line signal
	$FinishLine.body_entered.connect(_on_finish)

func _process(delta):
	if racing:
		elapsed += delta
		$CanvasLayer/TimerLabel.text = "Time: " + str(snappedf(elapsed, 0.1))

func _on_finish(body):
	if body.name == "Car":
		racing = false
		$CanvasLayer/WinLabel.visible = true

👨‍👩‍👧

Grown-up: The body_entered signal fires whenever a physics body enters the Area2D. We connect it in _ready() to our _on_finish function. This is a core Godot pattern signals instead of polling!

🕹️ Try it!

Play the game and drive to the finish line! Does the "YOU WIN!" message appear? What's your best time? Try to beat it!

✅ Finish line works! →

8

🎉

Make It Your Own!

Add your favourite colour, your name, and make it special!

🔒 Locked

🎯

Goal for this step

Customise your game — change colours, add your name, adjust the speed, and share it with someone!

🧒

Little coder: You built a real game! Now it's time to make it yours. Change the colours, the speed, add your name you're the game designer now! What would make your game even more fun?

🎨 Things to customise

🏎️ Car changes

Change the car's colour in car.tscn. Change speed and turn_speed in car.gd. Can you make it feel just right?

🗺️ Track changes

Add more ColorRect rectangles to make a bigger track with corners! Make the grass a different shade. Add some obstacles!

📝 Add your name

Add a new Label to the CanvasLayer that says your name and "presents:" at the top. Every great game has the maker's name on it!

🔄 Restart button

Add a Button node to the CanvasLayer. When clicked, call get_tree().reload_current_scene() to restart the race!

🌟 Bonus challenges

⭐Add a best time that saves between races. Hint: use a second Label!
⭐Add a countdown: 3, 2, 1, GO! before the timer starts. Use a Timer node!
⭐Add skid marks: when the car turns sharply, draw a line with a Line2D!
⭐Make a second track scene that's harder more corners, narrower road!

👨‍👩‍👧

Grown-up: Amazing work today! Your child now understands scenes, nodes, scripts, variables, signals, and physics core Godot concepts. Next steps: look at Godot's free docs, YouTube channels like "GDQuest", and the Godot forums. You've given them a superpower! 🚀

✅ Final Checklist

My car can drive with arrow keys

The camera follows my car

A timer counts up on screen

The timer stops at the finish line

"YOU WIN!" appears when I finish

I changed the car to my favourite colour

I showed someone my game!

🏁 I finished my racing game! →

Zoom Zoom! 🏁
Build a Racing Game

🧒 For the child

👨‍👩‍👧 For the grown-up

What to do:

Create a new 2D Scene

Add a green background

Add a grey road rectangle

Why a separate scene for the car?

Create the car scene

Choose your car colour! 🎨

Add a CollisionShape2D

Your scene should look like this:

Place the car on the track

Add a script to the Car

Type in this code

Press Play! 🟢

What does each line mean?

var speed = 300

var turn_speed = 3.0

Your Car scene now looks like this:

Add a CanvasLayer for the UI

Add a script to the Track

Create the Finish Line

Add a "You Win!" Label

Update track.gd to detect the finish

🎨 Things to customise

🏎️ Car changes

🗺️ Track changes

📝 Add your name

🔄 Restart button

🌟 Bonus challenges

✅ Final Checklist

Make It Yours

Zoom Zoom! 🏁Build a Racing Game

🧒 For the child

👨‍👩‍👧 For the grown-up

What to do:

Create a new 2D Scene

Add a green background

Add a grey road rectangle

Why a separate scene for the car?

Create the car scene

Choose your car colour! 🎨

Add a CollisionShape2D

Your scene should look like this:

Place the car on the track

Add a script to the Car

Type in this code

Press Play! 🟢

What does each line mean?

var speed = 300

var turn_speed = 3.0

Your Car scene now looks like this:

Add a CanvasLayer for the UI

Add a script to the Track

Create the Finish Line

Add a "You Win!" Label

Update track.gd to detect the finish

🎨 Things to customise

🏎️ Car changes

🗺️ Track changes

📝 Add your name

🔄 Restart button

🌟 Bonus challenges

✅ Final Checklist

Make It Yours

Zoom Zoom! 🏁
Build a Racing Game