Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

JavaScript Tutorial: Build Flappy Bird and Doodle Jump

via freeCodeCamp

Start learning Write review

Details

Start learning

Provider

freeCodeCamp
Pricing

Free Video
Languages

English
Effort

1-2 hours
Sessions

Self-Paced
Level

Beginner

Found in

Praktisches Video-Tutorial, in dem zwei klassische Arcade-Spiele — Doodle Jump und Flappy Bird — Schritt für Schritt mit JavaScript, HTML und CSS im Browser nachgebaut werden. Behandelt werden Spiellogik, eine Platform-Klasse, Springen und Fallen, Tastatursteuerung, das Erzeugen und Bewegen von Hindernissen mit setInterval() und setTimeout(), Hinzufügen und Entfernen von Elementen im Grid per Array- und While-Schleifen-Arbeit, Punktezählung, Kollisionsregeln mit && und ||, Bilder sowie Styling mit z-index. Geeignet für Einsteiger mit JavaScript-Grundkenntnissen, die durch Spieleprogrammierung üben wollen.

Syllabus

Introduction.
Introduction to Doodle Jump.
Doodle Jump game logic.
Setting up our game.
Creating our doodler.
Creating our platforms.
Creating our Platform Class.
Moving our platforms.
Making our doodler jump.
Making our doodler fall.
Writing our game over logic.
Hooking up our keyboard keys.
Making our doodler go left and right.
Removing and adding new platforms using array work.
Removing all children of the grid using a while loop.
adding the score.
Flappy Bird introduction.
Flappy Bird game logic.
Setting up our project.
Writing our start game logic.
Making our bird jump.
Hooking up our keyboard keys.
Generate a pipe obstacle.
Move the obstacle.
Generate new obstacles using setInterval() and setTimeout().
Write our game over logic.
We learn how to add images to our project.
We expand our collision rules using && and ||.
We add the final stages of styling learning about z-index.