YoVDO

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

Offered By: freeCodeCamp

Tags

Game Development Courses Javascript Courses Animation Courses Object-oriented programming Courses HTML5 Courses CSS3 Courses 2D Game Design Courses Particle Effects Courses Collision Detection Courses

Course Description

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?


Taught by

freeCodeCamp.org

Related Courses

Desarrollo de Videojuegos en Unity: Una Introducción
Universidad de los Andes via Coursera
Intro to Game Development using Unity - Part I
Udemy
Unity C# 2019 ile 2D ve 3D Oyun Tasarlama
Udemy
Unity Game Programming For Absolute Beginners
Udemy
Unity 4: 2D Essential Training
LinkedIn Learning