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

This tutorial guides learners through building a 2D browser game with JavaScript, HTML, and CSS. It covers game objects, animation, controls, collisions, enemies, scoring, effects, and game-state conditions.

Syllabus

⌨️ Intro
⌨️ HTML & CSS setup
⌨️ Basic JavaScript setup
⌨️ Object Oriented programming with JavaScript
⌨️ Creating Player and Game objects
⌨️ Animation loop
⌨️ Keyboard inputs
⌨️ Creating projectiles
⌨️ Periodic events
⌨️ Drawing game UI
⌨️ Base enemy class
⌨️ Collision detection between rectangles
⌨️ Drawing game score
⌨️ Win and lose condition
⌨️ Counting game time
⌨️ Animated parallax backgrounds
⌨️ Sprite animation with JavaScript
⌨️ Creating a debug mode
⌨️ Animating enemy sprite sheets
⌨️ Night Angler enemy class
⌨️ Lucky Fish enemy class
⌨️ Collecting power ups
⌨️ Drawing projectiles as images
⌨️ Custom fonts and game text
⌨️ Cleaning up
⌨️ Particle effects and physics
⌨️ Particle rotation
⌨️ Tweaks and fixes
⌨️ Hive Whale enemy class
⌨️ Drone enemy class
⌨️ Dust effect animation
⌨️ Fire effect animation
⌨️ Tuning game difficulty
⌨️ What to do next?