DEV Community

Cover image for Phase 5 Final Game Shipped — Doodle Jump Clone Live on 7x.games
7x Games
7x Games

Posted on

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

#webdev #nextjs #javascript #gamedev

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
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
})
Enter fullscreen mode Exit fullscreen mode

What's Next — Phase 6

Phase 5 is fully complete with 47 games live.
Phase 6 starts now focusing on Kids Math Games:

  • ⏱️ Times Table Practice
  • 🎰 Math Bingo
  • 🔢 Number Bonds
  • ➗ Fraction Math Game
  • 💰 Money Math
  • 🏛️ Roman Numerals Game
  • 🍪 Cookie Clicker
  • 🍉 Watermelon Game (Suika Clone)

Target: 160 total games by end of roadmap.

Play All 47 Games Free

🎮 7x.games — No download.
No login. Works on mobile and desktop instantly.

👽 Latest → Doodle Jump Clone

*Building in public — follow along as I go
from 47 → 160 games. Feedback welcome! 👇

Top comments (0)