🏎️ Free · Ages 10+ · JavaScript · No download

How to make a Retro Racing game in JavaScript

Dodge the traffic — the road gets faster and faster. Play it first, then open it in the Game Studio and change it until it is your own game.

🎮 Controls: ← → to steer (or A / D)

The numbers that make the game

At the top of the code are the settings — change one, run the game, and feel the difference. This is how game designers balance a game.

let steerSpeed = 300How fast your car moves left and right
let roadSpeed = 300How fast the road moves at the start
let speedUp = 10The road gets this much faster every second
let trafficEvery = 1.5A new car comes every … seconds
let startLives = 3
let roadColor = [71, 85, 105]

7 ways to change the retro racing game

Try them in order. The studio ticks each one off when your change works — and shows a hint if it does not.

  1. Steer faster.तेज़ी से मुड़ें।
    let steerSpeed = 450
  2. Start the road faster.सड़क को शुरू से तेज़ करें।
    let roadSpeed = 450
  3. Harder: more traffic.मुश्किल: ज़्यादा गाड़ियाँ।
    let trafficEvery = 0.6
  4. Make the road speed up faster.सड़क को जल्दी-जल्दी तेज़ करें।
    let speedUp = 25
  5. Give yourself more lives.ज़्यादा lives दें।
    let startLives = 5
  6. Paint the road a new colour.सड़क का रंग बदलें।
    let roadColor = [120, 53, 15]
  7. Win at 300 points: check the score after score.add(1).300 अंक पर जीत: score.add(1) के बाद स्कोर जाँचें।
    if (score.value >= 300) {
        tj.victory("You made it home!")
    }

The Retro Racing code (JavaScript)

76 lines of real JavaScript, made with TalentJR Game Studio's game library. Lines that start with // explain what the next part does.

Show the whole game code
// 🏎️ Retro Racing — TalentJR Game Studio
// ✏️ Change these numbers, then press ▶ Run!
let steerSpeed = 300      // how fast your car moves left and right
let roadSpeed = 300       // how fast the road moves at the start
let speedUp = 10          // the road gets this much faster every second
let trafficEvery = 1.5    // a new car comes every … seconds
let startLives = 3
let roadColor = [71, 85, 105]

tj.setup({ background: "grass" })
tj.touchControls("leftright")

// The road: 3 lanes in the middle
const ROAD_X = 160
const ROAD_W = 320
add([rect(ROAD_W, height()), pos(ROAD_X, 0), color(...roadColor), z(-2)])

// White stripes slide down, so the road looks like it moves
for (let i = 0; i < 6; i++) {
    add([rect(6, 40), pos(ROAD_X + 104, i * 90), color(255, 255, 255), z(-1), "stripe"])
    add([rect(6, 40), pos(ROAD_X + 210, i * 90), color(255, 255, 255), z(-1), "stripe"])
}

// The road gets faster and faster
let speed = roadSpeed
onUpdate(() => {
    speed = speed + speedUp * dt()    // faster and faster!
})
onUpdate("stripe", (stripe) => {
    stripe.move(0, speed)
    if (stripe.pos.y > height()) {
        stripe.pos.y = stripe.pos.y - 540
    }
})

// Your car — stays on the road
const car = tj.player({ sprite: "car", x: 296, y: 400, speed: steerSpeed, mode: "leftright" })
car.use(opacity(1))
car.onUpdate(() => {
    car.pos.x = Math.max(ROAD_X, Math.min(ROAD_X + ROAD_W - 48, car.pos.x))
})
const score = tj.score()
const lives = tj.lives(startLives)

// The further you drive, the more points
loop(0.25, () => {
    score.add(1)
})

// Other cars come down the lanes
loop(trafficEvery, () => {
    const lane = choose([0, 1, 2])
    tj.spawn("car2", { x: ROAD_X + 29 + lane * 106, y: -60, tag: "traffic" })
})
onUpdate("traffic", (other) => {
    other.move(0, speed * 0.5)
    if (other.pos.y > height() + 60) {
        destroy(other)
    }
})

// Crash! Then 1.5 seconds to get away (the car blinks)
let safe = false
car.onCollide("traffic", (other) => {
    destroy(other)
    addKaboom(other.pos)
    if (safe) return
    lives.lose()
    safe = true
    car.opacity = 0.4
    wait(1.5, () => {
        safe = false
        car.opacity = 1
    })
})

How it works on TalentJR

  1. Play the gameFind out what feels too easy or too hard — that is what you will change.
  2. Open it in the studioThe code is on the left, the game on the right. Press ▶ Run after every change.
  3. Change one thing at a timeA number first, then a new rule, then your own art and title.
  4. Save and shareSign in to keep your game, then share a talentjr.in/play/… link on WhatsApp — friends can play it and make their own version.

More games you can make

← All 19 games and the 4 ways to make games