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

Overview

Embark on a 2-3 hour tutorial to create a 2D game from scratch using vanilla JavaScript, HTML5, and CSS3. Explore an alien planet while learning essential game development techniques, including sprite animation, parallax backgrounds, and HTML Canvas. Dive into object-oriented programming, keyboard inputs, collision detection, and particle effects. Develop various enemy classes, implement power-ups, and fine-tune game difficulty. Utilize free, downloadable game assets to bring your creation to life. By the end, gain the skills to build your own 2D games without relying on frameworks or libraries.

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?