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.
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
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.
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
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 :)
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.
Hi, none of my videos are for complete beginners. There are many beginner JavaScript courses online from many different creators. My advice would be to do a course that covers the basics of JavaScript first and then try projects like this. If JavaScript was so easy anyone can jump straight to a project like this, they wouldn't pay us so much money for these skills :D
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.
@@Frankslaboratory I didn't exactly mean it in a technical way but more like I assume flash came with a GUI environment that lowers needed technical skills the same way unity does.
Hi, I'm not sure which game that is. SHOOT 'EM UP is usually a genre that includes Space Invaders for example, but I have a feeling you are thinking something else.
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?
Hi, most of my courses are independent standalone projects, there is no set order. I would leave the more difficult ones last and do the easier ones first, the 3 more advanced codebases out of these would be 'Build Animated Physics Game with JavaScript', 'Learn HTML Canvas: Advanced Text Effects', 'Learn HTML Canvas - Pixels, Particles & Physics', my advice would be to do those last. Have fun! :)
@refuxo I would start with HTML Canvas Crash course for beginners. Then Creative coding deep dive for beginners. Then if you understand topics covered there you can do the rest in any order
FINISHED - Favorite enemy type, RHINOMORPH!! Another great tutorial!
Congratulations on completing the project. Well done!
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.
Amazing. Good luck with your project! Let me know how it goes
I will. @@Frankslaboratory
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
This is actually pretty good. I like this.
This is sooo good! Thank you!
Thank you Jozef
So excited for this. Thanks for all the hard work. I have learned so much through your videos and classes.
Good luck with your studies, hope you have fun with the project! :)
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.
Hi Joseph, what kind of game is it, 2D side scroller?
@@Frankslaboratory Shooter
cool stuff :)
Thank you Sebastian
Really excellent. thanks
Thanks Danesh
Another great video!!!! Thank you!!
Hi Javi, good to see you
yet another great JS video, thank you sir 🤍
I'm here to help 😊
Gooooood. Nice game.
Thank you
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
Nice work, yes there are multiple ways to write some of the functionality. In the next class I will show how I like to implement state design pattern.
love u bro ..this really helps me
Hi Ranjeet, happy to hear that you found some value
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 :)
Yea I will probably do it as a big project at some point, when I have a few new ideas. It's a fun game concept, a lot can be done there.
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.
Hi Steve. It sounds like a good idea I just didn't think of it when I was recording this. I will test it
1:16:45 . I am getting console error Class constructor Enemy cannot be invoked without 'new'
Check the line of code the console is giving you and compare your code to mine there. Fix that typo you made and it will work.
@@Frankslaboratory Yeah It was a syntax error thnx for reply
@@Frankslaboratory Will you make a comprehensive JS course covering all important aspects in short time.I like the way you present concepts.
hello is there a video for the total beginner on how to set up files and on javascript basics
Hi, none of my videos are for complete beginners. There are many beginner JavaScript courses online from many different creators. My advice would be to do a course that covers the basics of JavaScript first and then try projects like this. If JavaScript was so easy anyone can jump straight to a project like this, they wouldn't pay us so much money for these skills :D
@@Frankslaboratory I haven't said its easy 😉
wow
amazing
Thank you Zohaib
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.
Canvas can do everything Flash can do and more because the web platform evolved since the days of Flash.
@@Frankslaboratory I didn't exactly mean it in a technical way but more like I assume flash came with a GUI environment that lowers needed technical skills the same way unity does.
57:39
hey frank can you include source code repo for reference ?
You should do a remake of the classic game SHOOT 'EM UP.
Hi, I'm not sure which game that is. SHOOT 'EM UP is usually a genre that includes Space Invaders for example, but I have a feeling you are thinking something else.
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?
Hi, most of my courses are independent standalone projects, there is no set order. I would leave the more difficult ones last and do the easier ones first, the 3 more advanced codebases out of these would be 'Build Animated Physics Game with JavaScript', 'Learn HTML Canvas: Advanced Text Effects', 'Learn HTML Canvas - Pixels, Particles & Physics', my advice would be to do those last. Have fun! :)
@@Frankslaboratory But ... can u give a order im really lost
@refuxo I would start with HTML Canvas Crash course for beginners. Then Creative coding deep dive for beginners. Then if you understand topics covered there you can do the rest in any order
Can you do something like rush royale with js .. if you can without using frameworks I'll gladly try it 😊
Hi Alex, good idea, that would be a fun game to make with JavaScript
You been hitting the gym, Frank?
Hi Scott, actually I did a little bit, didn't realise it was noticeable, thanks :D
New game tutorial. let's start
Hi Iryna. Have fun
this guy actually knows OOP more than than the shitheads who make OOP courses lmao