🐦 Free · Ages 10+ · JavaScript · No download

How to make a Flying Game in JavaScript

Fly through the gaps in the walls — how far can you go? Play it first, then open it in the Game Studio and change it until it is your own game.

🎮 Controls: SPACE or ↑ to fly up (or tap) · ↓ to dive

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 flapPower = 420How strongly the bird flies up
let gravity = 1200How hard it falls
let gapSize = 170The space to fly through
let wallSpeed = 200
let speedUp = 6The walls get faster every second
let wallEvery = 1.6A new wall every … seconds
let wallColor = [22, 163, 74]

7 ways to change the flying game

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

  1. Easier: make the gap bigger.आसान: बीच की जगह बड़ी करें।
    let gapSize = 220
  2. Moon gravity: fall more slowly.चाँद जैसी gravity: धीरे गिरें।
    let gravity = 800
  3. Flap more strongly.ज़ोर से उड़ें।
    let flapPower = 520
  4. Harder: faster walls.मुश्किल: तेज़ दीवारें।
    let wallSpeed = 280
  5. Harder: walls come more often.मुश्किल: दीवारें जल्दी-जल्दी।
    let wallEvery = 1.1
  6. Paint the walls a new colour.दीवारों का रंग बदलें।
    let wallColor = [139, 94, 52]
  7. Win at 20 points.20 अंक पर जीत।
    if (score.value >= 20) {
        tj.victory("Super pilot!")
    }

The Flying Game code (JavaScript)

71 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
// 🐦 Flying Game — TalentJR Game Studio
// ✏️ Change these numbers, then press ▶ Run!
let flapPower = 420       // how strongly the bird flies up
let gravity = 1200        // how hard it falls
let gapSize = 170         // the space to fly through
let wallSpeed = 200
let speedUp = 6           // the walls get faster every second
let wallEvery = 1.6       // a new wall every … seconds
let wallColor = [22, 163, 74]

tj.setup({ background: "sky" })
tj.touchControls("tap")

const bird = add([sprite("bird"), pos(120, 200), scale(0.75), area({ scale: 0.7 }), body(), "player"])
const score = tj.score()
const hello = add([text("Press SPACE (or tap) to fly!", { size: 26 }), pos(width() / 2, 300), anchor("center"), color(30, 41, 59)])

// SPACE / ↑ / tap: fly up. The first flap starts the game
let started = false
tj.onAction("jump", () => {
    if (!started) {
        started = true
        setGravity(gravity)
        destroy(hello)
    }
    bird.jump(flapPower)
    tj.sound("jump")
})
// ↓ dives down faster
onUpdate(() => {
    if (tj.isDown("down")) bird.move(0, 300)
})

// Walls with a gap come from the right, faster and faster
let speed = wallSpeed
onUpdate(() => {
    if (started) speed = speed + speedUp * dt()
})
loop(wallEvery, () => {
    if (!started) return
    const gapY = rand(70, height() - 70 - gapSize)
    add([rect(70, gapY), pos(width(), 0), area(), color(...wallColor), "wall"])
    add([rect(70, height() - gapY - gapSize), pos(width(), gapY + gapSize), area(), color(...wallColor), "wall", "bottom"])
})
onUpdate("wall", (wall) => {
    wall.move(-speed, 0)
    if (wall.pos.x < -80) destroy(wall)
})

// A point for every wall you fly past
onUpdate("bottom", (wall) => {
    if (!wall.passed && wall.pos.x + 70 < bird.pos.x) {
        wall.passed = true
        score.add(1)
        tj.sound("coin")
    }
})

// Bonk!
bird.onCollide("wall", () => {
    tj.gameOver("Bonk! Game over")
})
// The top is a ceiling; falling off the bottom ends the game
bird.onUpdate(() => {
    if (bird.pos.y < 0) {
        bird.pos.y = 0
        bird.vel.y = 0
    }
    if (bird.pos.y > height()) tj.gameOver("Oops! Game over")
})

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