Code a 2D Game Using JavaScript, HTML, and CSS (w/ Free Game Assets) – Tutorial

Code a 2D Game Using JavaScript, HTML, and CSS (w/ Free Game Assets) – Tutorial

freeCodeCamp.org via freeCodeCamp Direct link

⌨️ Intro

1 of 34

1 of 34

⌨️ Intro

Class Central Classrooms beta

YouTube playlists curated by Class Central.

Classroom Contents

Code a 2D Game Using JavaScript, HTML, and CSS (w/ Free Game Assets) – Tutorial

Automatically move to the next video in the Classroom when playback concludes

  1. 1 ⌨️ Intro
  2. 2 ⌨️ HTML & CSS setup
  3. 3 ⌨️ Basic JavaScript setup
  4. 4 ⌨️ Object Oriented programming with JavaScript
  5. 5 ⌨️ Creating Player and Game objects
  6. 6 ⌨️ Animation loop
  7. 7 ⌨️ Keyboard inputs
  8. 8 ⌨️ Creating projectiles
  9. 9 ⌨️ Periodic events
  10. 10 ⌨️ Drawing game UI
  11. 11 ⌨️ Base enemy class
  12. 12 ⌨️ Collision detection between rectangles
  13. 13 ⌨️ Drawing game score
  14. 14 ⌨️ Win and lose condition
  15. 15 ⌨️ Counting game time
  16. 16 ⌨️ Animated parallax backgrounds
  17. 17 ⌨️ Sprite animation with JavaScript
  18. 18 ⌨️ Creating a debug mode
  19. 19 ⌨️ Animating enemy sprite sheets
  20. 20 ⌨️ Night Angler enemy class
  21. 21 ⌨️ Lucky Fish enemy class
  22. 22 ⌨️ Collecting power ups
  23. 23 ⌨️ Drawing projectiles as images
  24. 24 ⌨️ Custom fonts and game text
  25. 25 ⌨️ Cleaning up
  26. 26 ⌨️ Particle effects and physics
  27. 27 ⌨️ Particle rotation
  28. 28 ⌨️ Tweaks and fixes
  29. 29 ⌨️ Hive Whale enemy class
  30. 30 ⌨️ Drone enemy class
  31. 31 ⌨️ Dust effect animation
  32. 32 ⌨️ Fire effect animation
  33. 33 ⌨️ Tuning game difficulty
  34. 34 ⌨️ What to do next?

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.