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

Channel:
United States freeCodeCamp.org
Subscribers:
10,700,000
Published on ● Video Link: https://www.youtube.com/watch?v=7BHs1BzA4fs


Duration: 2:31:46
153,571 views
4,613

Let's explore an alien planet and learn all the techniques you need to make your own 2D games with vanilla JavaScript, HTML5, CSS3 and HTML Canvas. From sprite animation to parallax backgrounds, today we will build a game completely from scratch, with no frameworks and no libraries, using just HTML, CSS and plain vanilla JavaScript. Have fun!

✏️ Course by Frank's Laboratory. https://www.youtube.com/c/Frankslaboratory

🎨 Download Project Art assets 🎨
** All art assets for this class were made by Frank or by artists he hired, there is NO copyright, you can download and use these freely for any project you want!
Player: https://www.frankslaboratory.co.uk/downloads/103/player.png
Projectile: https://www.frankslaboratory.co.uk/downloads/103/projectile.png
Particle gears: https://www.frankslaboratory.co.uk/downloads/103/gears.png
⚙️ Backgrounds:
Layer 1: https://www.frankslaboratory.co.uk/downloads/103/layer1.png
Layer 2: https://www.frankslaboratory.co.uk/downloads/103/layer2.png
Layer 3: https://www.frankslaboratory.co.uk/downloads/103/layer3.png
Layer 4: https://www.frankslaboratory.co.uk/downloads/103/layer4.png
🐟 Enemies:
Angler 1: https://www.frankslaboratory.co.uk/downloads/103/angler1.png
Angler 2: https://www.frankslaboratory.co.uk/downloads/103/angler2.png
Lucky Fish: https://www.frankslaboratory.co.uk/downloads/103/lucky.png
Hive Whale: https://www.frankslaboratory.co.uk/downloads/103/hivewhale.png
Drone: https://www.frankslaboratory.co.uk/downloads/103/drone.png
☁️ Collision Animations:
Smoke: https://www.frankslaboratory.co.uk/downloads/103/smokeExplosion.png
Fire: https://www.frankslaboratory.co.uk/downloads/103/fireExplosion.png

🐟EXTENDED class with BONUS lessons and more free sprite sheets: 4 new enemies, sound design, animated shield, animated projectiles and more https://www.udemy.com/course/learn-game-development-with-javascript/?referralCode=69874A38D543D7F510F2

⭐️ Contents ⭐️
⌨️ (0:00:00) Intro
⌨️ (0:01:07) HTML & CSS setup
⌨️ (0:02:40) Basic JavaScript setup
⌨️ (0:04:59) Object Oriented programming with JavaScript
⌨️ (0:07:25) Creating Player and Game objects
⌨️ (0:13:18) Animation loop
⌨️ (0:16:36) Keyboard inputs
⌨️ (0:26:15) Creating projectiles
⌨️ (0:33:22) Periodic events
⌨️ (0:38:30) Drawing game UI
⌨️ (0:41:20) Base enemy class
⌨️ (0:49:19) Collision detection between rectangles
⌨️ (0:54:36) Drawing game score
⌨️ (0:57:49) Win and lose condition
⌨️ (0:59:52) Counting game time
⌨️ (1:03:07) Animated parallax backgrounds
⌨️ (1:13:20) Sprite animation with JavaScript
⌨️ (1:17:02) Creating a debug mode
⌨️ (1:18:38) Animating enemy sprite sheets
⌨️ (1:25:15) Night Angler enemy class
⌨️ (1:27:39) Lucky Fish enemy class
⌨️ (1:29:02) Collecting power ups
⌨️ (1:36:51) Drawing projectiles as images
⌨️ (1:38:01) Custom fonts and game text
⌨️ (1:40:43) Cleaning up
⌨️ (1:42:51) Particle effects and physics
⌨️ (1:55:03) Particle rotation
⌨️ (1:58:47) Tweaks and fixes
⌨️ (2:01:46) Hive Whale enemy class
⌨️ (2:04:46) Drone enemy class
⌨️ (2:09:30) Dust effect animation
⌨️ (2:24:36) Fire effect animation
⌨️ (2:26:03) Tuning game difficulty
⌨️ (2:29:26) What to do next?



Other Videos By freeCodeCamp.org


2022-10-24Web Monetization API Tutorial – How to Add Microtransactions to a Website
2022-10-20Flutter Course – Build Full Stack Google Docs Clone
2022-10-19Harvard CS50 – Full Computer Science University Course
2022-10-17Learn Svelte – Full Course for Beginners
2022-10-12Docker Containers and Kubernetes Fundamentals – Full Hands-On Course
2022-10-11Build a Webshop – Angular, Node.js, TypeScript, Stripe
2022-10-06PyTorch for Deep Learning & Machine Learning – Full Course
2022-10-05Stack Data Structure Tutorial – Solve Coding Challenges
2022-10-04Learn Python by Thinking in Types - Full Course
2022-09-29Ecommerce Website Tutorial – Create a B2B App with Stripe + Postgres + REST API Backend
2022-09-28Code a 2D Game Using JavaScript, HTML, and CSS (w/ Free Game Assets) – Tutorial
2022-09-27Java Programming for Beginners – Full Course
2022-09-26Machine Learning for Everybody – Full Course
2022-09-22Algorithms in Python – Full Course for Beginners
2022-09-21Web3 Course Walkthrough on freeCodeCamp.org (Rust, Blockchain Development, and Smart Contracts)
2022-09-20Code a Minecraft Clone with JavaScript, React, Three.js – Tutorial
2022-09-16Jenkins Tutorial – How to Deploy a Test Server with Docker + Linux (Full Course)
2022-09-14Learn HTML & CSS – Full Course for Beginners
2022-09-13NoSQL vs SQL – Which Type of Database Should You Use?
2022-09-12React Coding Interview Prep – 30 Questions and Answers
2022-09-07Angular for Beginners Course [Full Front End Tutorial with TypeScript]