FINISHED - Favorite enemy type, RHINOMORPH!! Another great tutorial!
@Frankslaboratory
6 ай бұрын
Congratulations on completing the project. Well done!
@jovannyswicktutorials9960
11 ай бұрын
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.
@Frankslaboratory
11 ай бұрын
Amazing. Good luck with your project! Let me know how it goes
@jovannyswicktutorials9960
11 ай бұрын
I will. @@Frankslaboratory
@sandsriggs
11 ай бұрын
So excited for this. Thanks for all the hard work. I have learned so much through your videos and classes.
@Frankslaboratory
11 ай бұрын
Good luck with your studies, hope you have fun with the project! :)
@jozef_s
11 ай бұрын
This is sooo good! Thank you!
@Frankslaboratory
11 ай бұрын
Thank you Jozef
@josephcieplak8920
11 ай бұрын
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.
@Frankslaboratory
11 ай бұрын
Hi Joseph, what kind of game is it, 2D side scroller?
@josephcieplak8920
11 ай бұрын
@@Frankslaboratory Shooter
@GamerDeveloperStudio
11 ай бұрын
Gooooood. Nice game.
@Frankslaboratory
11 ай бұрын
Thank you
@sebastiankoziel8055
11 ай бұрын
cool stuff :)
@Frankslaboratory
11 ай бұрын
Thank you Sebastian
@javifontalva7752
11 ай бұрын
Another great video!!!! Thank you!!
@Frankslaboratory
11 ай бұрын
Hi Javi, good to see you
@daneshland4122
11 ай бұрын
Really excellent. thanks
@Frankslaboratory
11 ай бұрын
Thanks Danesh
@mokalux
11 ай бұрын
yet another great JS video, thank you sir 🤍
@Frankslaboratory
11 ай бұрын
I'm here to help 😊
@Ragna6765
11 ай бұрын
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
@Frankslaboratory
11 ай бұрын
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.
@irfansaeedkhan7242
11 ай бұрын
wow
@gflaap
11 ай бұрын
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 :)
@Frankslaboratory
11 ай бұрын
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.
@ranjeetuikey87
11 ай бұрын
love u bro ..this really helps me
@Frankslaboratory
11 ай бұрын
Hi Ranjeet, happy to hear that you found some value
@stevenkitchener2719
11 ай бұрын
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.
@Frankslaboratory
11 ай бұрын
Hi Steve. It sounds like a good idea I just didn't think of it when I was recording this. I will test it
@natanribeiro6536
11 ай бұрын
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
@Frankslaboratory
11 ай бұрын
This is actually pretty good. I like this.
@zohaibqurban7386
11 ай бұрын
amazing
@Frankslaboratory
11 ай бұрын
Thank you Zohaib
@manitdave6168
7 ай бұрын
hey frank can you include source code repo for reference ?
@Lutz64
11 ай бұрын
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
11 ай бұрын
Canvas can do everything Flash can do and more because the web platform evolved since the days of Flash.
@Lutz64
11 ай бұрын
@@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.
@wilsonbanda698
11 ай бұрын
You should do a remake of the classic game SHOOT 'EM UP.
@Frankslaboratory
11 ай бұрын
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.
@MultiSweetbanana
11 ай бұрын
hello is there a video for the total beginner on how to set up files and on javascript basics
@Frankslaboratory
11 ай бұрын
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
@MultiSweetbanana
11 ай бұрын
@@Frankslaboratory I haven't said its easy 😉
@ivad8080
11 ай бұрын
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?
@Frankslaboratory
11 ай бұрын
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! :)
@ivad8080
11 ай бұрын
@@Frankslaboratory But ... can u give a order im really lost
@Frankslaboratory
11 ай бұрын
@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
@piggymaster3209
11 ай бұрын
57:39
@IrynaAbrosimova
7 ай бұрын
New game tutorial. let's start
@Frankslaboratory
7 ай бұрын
Hi Iryna. Have fun
@Alex-hu8gj
11 ай бұрын
Can you do something like rush royale with js .. if you can without using frameworks I'll gladly try it 😊
@Frankslaboratory
11 ай бұрын
Hi Alex, good idea, that would be a fun game to make with JavaScript
@arpanbajpai1219
5 ай бұрын
1:16:45 . I am getting console error Class constructor Enemy cannot be invoked without 'new'
@Frankslaboratory
5 ай бұрын
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.
@arpanbajpai1219
5 ай бұрын
@@Frankslaboratory Yeah It was a syntax error thnx for reply
@arpanbajpai1219
5 ай бұрын
@@Frankslaboratory Will you make a comprehensive JS course covering all important aspects in short time.I like the way you present concepts.
@scottonanski4173
11 ай бұрын
You been hitting the gym, Frank?
@Frankslaboratory
11 ай бұрын
Hi Scott, actually I did a little bit, didn't realise it was noticeable, thanks :D
@philliplam2704
11 ай бұрын
this guy actually knows OOP more than than the shitheads who make OOP courses lmao
Пікірлер: 61