Phase 5 Final Game Shipped — Doodle Jump Clone Live on 7x.games

#javascript #nextjs #gamedev #webdev

Phase 5 is Complete! 🎉

The final game of Phase 5 just went live on
7x.games — a Doodle Jump clone
built from scratch with vanilla JavaScript and Next.js.

👽 Play Doodle Jump Free

How I Built It

The core mechanic of Doodle Jump is surprisingly
tricky to get right in a browser:

The main challenges:

Infinite upward scrolling without actually moving the character up — instead the platforms move down
Procedural platform generation that feels fair but gets progressively harder
Mobile touch controls alongside keyboard support
Enemy spawning at higher scores without making it impossible

Tech used:

Rendering    → Canvas API
Game loop    → requestAnimationFrame
Controls     → Keyboard + Touch events
Storage      → localStorage for high scores
Framework    → Next.js 14
Language     → Vanilla JavaScript

The Infinite Scroll Trick

Most beginners try to move the character upward.
The correct approach is the opposite:

// Wrong approach ❌
character.y -= jumpForce

// Correct approach ✅
// Keep character centered, move everything else down
if (character.y < canvas.height / 2) {
  const offset = canvas.height / 2 - character.y
  character.y = canvas.height / 2
  platforms.forEach(p => p.y += offset)
  enemies.forEach(e => e.y += offset)
  score += offset * 0.1
}

This keeps the player visually centered while
the world scrolls — much smoother and easier
to control.

Platform Generation

function generatePlatform(y) {
  return {
    x: Math.random() * (canvas.width - PLATFORM_WIDTH),
    y: y,
    width: PLATFORM_WIDTH,
    type: score > 500 ? getRandomType() : 'normal'
  }
}

// Types unlock progressively
// normal    → always there
// moving    → unlocks at score 200
// breaking  → unlocks at score 500
// spring    → unlocks at score 300

Mobile Controls

Desktop uses arrow keys but mobile needs
touch/tilt support:

// Touch — tap left/right side of screen
canvas.addEventListener('touchstart', (e) => {
  const touch = e.touches[0]
  const midpoint = canvas.width / 2
  if (touch.clientX < midpoint) {
    keys.left = true
  } else {
    keys.right = true
  }
})

// Device tilt as alternative
window.addEventListener('deviceorientation', (e) => {
  if (e.gamma < -10) keys.left = true
  if (e.gamma > 10) keys.right = true
})