JavaScript Game Tutorial: Planet Defense

Every game is made out of a few basic building blocks. Once you understand these techniques you can get creative, combine these elements in different ways and make many different games easily.
Let's learn JavaScript by making games.

Today we are building an animated 2d game completely from scratch with no frameworks and no libraries using just plain vanilla JavaScript and HTML5 canvas.

Discover many 2D game development techniques and learn how to implement them with JavaScript. We will cover everything from keyboard and mouse controls to performance friendly sprite animation tips and tricks, and the main focus this time is object pool design pattern. We will use it for enemies and for player projectiles, because reusing our objects, rather then creating and discarding them over and over, can be a massive performance benefit.

This class is for creative coders who want to learn about the fundamentals of 2D game development as well as for JavaScript beginners who want to practice their object oriented programming skills on a fun visual and interactive project.

👽 Download Project Art assets 👽
(if you can't download the files, try to use a different browser or VPN to change your country, also leave a comment so I can fix it)

🌌 Tutorial Contents 🌌
00:00:00 Intro
00:01:02 Project setup
00:03:24 Planet and Game class
00:11:34 Mouse position
00:17:53 Player spaceship
00:22:35 A little bit of math
00:30:23 Understand canvas rotation
00:36:39 Debug mode
00:39:04 Object pool
00:51:27 Player projectiles
00:57:38 Enemy pool
01:05:03 Reusable collision detection method
01:07:24 Periodic events
01:15:30 Asteroid enemy class
01:19:51 Sprite animation in JavaScript
01:29:07 Lobstermorph enemy class
01:38:22 Drawing game text
01:43:49 Player lives
01:48:58 Beetlemorph enemy class
01:50:33 Rhinomorph enemy class
01:51:40 What's next

If you want to SUPPORT me you can use the links below and get some one my EXTENDED classes! 💪

Get Skillshare FREE for 1 month: ‍🎓

The description of this video may contain affiliate links, which means that if you buy one of the products that I recommend, I'll receive a small commission without any additional cost for you. This helps to support the channel and allows me to continue making videos like this. Thank you for the support!
#frankslaboratory

[karlkoch]

FINISHED - Favorite enemy type, RHINOMORPH!! Another great tutorial!

[jovannyswicktutorials]

First of all, thank you. I have been learning html canvas with your channel. The patterns are good. I'm currently building an "engine" or "framework" completely in basic js and canvas.
I have used your channel several times for reference.

[natanribeiro]

00:00 🎮 Introduction to the basics of game development using JavaScript and HTML 5 canvas.
00:14 ⌨️ Focus on keyboard and mouse controls along with sprite animation for performance optimization.
00:29 ♻️ Importance of object pool design pattern for efficient resource utilization.
00:42 👾 Introduction to the game concept involving enemy aliens and cellular mitosis.
01:10 🚀 The game involves controlling a spaceship to defend a planet from various threats.
01:24 🎨 Compatibility of the art assets with a previously built Space Invaders game.
01:38 📚 Target audience includes creative coders and JavaScript beginners interested in 2D game development.
02:04 🌐 Starting with a blank HTML5 canvas and linking it to CSS and JavaScript files.
02:32 🖼️ Handling images and other resources in JavaScript.
02:58 🛠️ Setting up the initial JavaScript code for the game.
03:11 🕹️ Introduction to setting up the game canvas and 2D context.
03:35 🌍 Creation of the Planet class in JavaScript.
04:03 🖋️ Drawing methods for the planet.
04:44 🧠 Code design involving object-oriented programming principles.
05:24 🎛️ Introduction of the main game class for controlling and updating the game state.
06:06 🔄 Render method for animation frames.
07:02 🎥 Demonstrating movement and animation capabilities of the code base.
07:30 📚 Explaining the use of constructors in classes for automatic execution.
08:11 ↔️ Establishing two-way connection between planet and game classes.
09:05 🎯 Using event listeners for mouse movements.
10:01 🎨 Incorporating player images into the game.
10:48 🎮 Creating the player class for managing visuals, behavior, and controls.
11:51 🕹️ Detailing how to make the player move around the planet based on mouse position.
26:09 📐 The `calcAim` method returns an array containing horizontal direction, vertical direction, horizontal distance, and vertical distance between Object A and Object B.
26:48 🤔 If you're new to this technique, don't worry. Repetition will make it clearer. The method calculates the distance between two points in a 2D space.
27:15 🎯 The method's output will be used to point and rotate objects towards or away from each other.
27:44 🖱️ The relative position between the mouse and the planet will determine the direction in which the player is facing.
28:14 ⚡ For performance, update the `doAim` only when a mouse-move event fires to avoid redundant calculations.
28:56 🎮 The horizontal position of the player starts from the middle of the game area, and adjustments are made using a directional vector value.
29:34 🌍 The player's spaceship can move along the radius of the planet, and the distance can be adjusted to match the radius of the planet.
30:37 🔄 The player image can be rotated to always face towards the mouse using the canvas' built-in rotation methods.
31:57 🎨 Canvas rotation is more complicated than CSS rotation but becomes easier with practice.
34:13 📏 Use the built-in `Math.atan2` method to calculate the angle in radians between the mouse cursor and the planet center point.
36:33 🎉 Most challenging part is done. The `calcAim` method is reusable for calculating distances between any two objects.
39:20 🚀 Implementing laser projectiles with the correct direction and optimizing performance using object pooling.
40:42 🎲 Object pooling eliminates the garbage collection process, enhancing performance.
45:11 🌐 The game class will manage the projectile pool, creating a set number of projectiles when the game starts.
48:09 🛠️ If you run out of projectiles in the pool, the `getProjectile` method will return `undefined`. Reset projectiles when they move off-screen.
52:28 🔄 Discusses reusable object pool for projectiles, which can be deactivated and reset to optimize performance.
52:54 🎯 Explains the custom "CalAim" method for setting the correct direction of projectiles based on two circular objects.
53:36 🌍 Describes how the projectiles' direction is determined by the relative position between the planet and the mouse cursor.
54:18 📐 Outlines the use of vector ratios for projectile direction to allow shooting in any desired direction.
54:53 🚀 Introduces a speed modifier property to scale the vector while keeping the projectile's direction intact.
55:58 🚢 Specifies how to adjust the starting coordinates of projectiles to emanate from the tip of the player's spaceship.
56:49 🎮 Adds the option to shoot projectiles by clicking the mouse or pressing a specific key on the keyboard.
57:28 🛠️ Discusses the process of implementing an object pool and highlights its efficiency and clean code structure.
58:44 🤖 Initiates the creation of an enemy class with properties like speed and activation states for object pooling.
01:00:44 🌌 Describes how to periodically activate new enemy objects and set their initial positions off-screen for a smoother game experience.
01:45:56 🛠️ Implemented collision logic that takes away only one life per collision, improving game balance.
01:46:13 🏁 Added win and lose conditions based on score and remaining lives.
01:46:38 📣 Included messages for winning and losing scenarios to enhance user experience.
01:47:21 🎲 Introduced randomness in enemy spawning to diversify gameplay.
01:47:48 🌠 Created two types of enemies: easy-to-defeat Asteroids and challenging Lobster morphs.
01:48:14 ⚙️ Added speed modifiers to control enemy movement speed for strategic gameplay.
01:48:57 🔄 Made the game easily customizable by allowing adjustments to enemy frequency and movement speed.
01:49:29 🔄 Expanded the variety of enemies by adding Beetle morphs.
01:50:37 📈 Enhanced game variety by including yet another enemy type, Rhino morph.
01:51:22 🛡️ Incorporated armored enemies in the game, adding layers of difficulty.
01:51:50 🎯 Adjusted game parameters like enemy spawn interval and player lives for balanced gameplay.

Made with HARPA AI

[josephcieplak]

Excellent, your courses are never disappointing.I've learned a lot from you, and I'm building a game using the knowledge I've learned from a course from your series called "Learn 2D Game Development with JavaScript" I'm adding need stuff, though once I'm done with it I'll show it to you.

[sandsriggs]

So excited for this. Thanks for all the hard work. I have learned so much through your videos and classes.

[Ragna]

it mightve taken longer, but it was fun following this while trying to code ahead as often as possible. the final codebase was a lot messier, but it was surprising to see how different some implementations like controlling the explosion length ended up being

[mokalux]

yet another great JS video, thank you sir 🤍

[SmokinKipper]

Lovely stuff man❤. When you’re prototyping this code, getting it working etc before showing us in the vid, does it look a lot messier than this? Do you need to go out and spike out certain functionality?

[arpanbajpai]

1:16:45 . I am getting console error Class constructor Enemy cannot be invoked without 'new'

[gflaap]

Hi Frank, as always awesome! Could you maybe do a re-make of your robots vs. Aliens with Full Game mode? Like Bosses, different Level, power ups etc.
And what i would also love to See is a browser Game with a backend where people can play against each other.
Maybe you can do this in q4 2023 it in 2024 :)

[MultiSweetbanana]

hello is there a video for the total beginner on how to set up files and on javascript basics

[stevenkitchener]

Hi Frank, great tutorial as always. I was wondering if you had thought about returning an object instead of an array from the calcAim function? Using an object would have allowed you to do something like this.aim.dx and this.aim.dy instead of having to remember the order of the elements of the array that is returned. Please let me know if there is a benefit of using an array instead of an object though, I would like to hear your feedback.

[manitdave]

hey frank can you include source code repo for reference ?

[Lutz]

im not very familiar with flash but I am guessing significantly more effort has to be put into a JS/canvas game just to mimic a fraction of flash's (mainly effortless) capabilities.

[ivad]

I bought the courses: 'JavaScript Game Development for Beginners: Sprite Animation', 'Learn Game Development with JavaScript', 'Build Animated Physics Game with JavaScript', 'Creative Coding Deep Dive for Beginners', 'Learn HTML Canvas: Advanced Text Effects', 'Learn HTML Canvas - Pixels, Particles & Physics', 'Learn Creative Coding with Vanilla JavaScript', 'HTML Canvas Crash Course for Beginners'. What's the right order to watch these courses?

[Alex-hugj]

Can you do something like rush royale with js .. if you can without using frameworks I'll gladly try it 😊

[wilsonbanda]

You should do a remake of the classic game SHOOT 'EM UP.

[philliplam]

this guy actually knows OOP more than than the shitheads who make OOP courses lmao