PART2 here: kzfaq.info/get/bejne/o9amgdqK0rqxemg.html click the LIKE please and let me know what other games you want to build :)
@newdev55573 жыл бұрын
Hello, do you have a video where you create the game in JavaScript then make it into a mobile game app.
@abhaychauhan51583 жыл бұрын
waiting for something in 3d 😊😊
@unknown-bx8my3 жыл бұрын
Yes 3d👍👍👍👍❤❤❤❤
@Frankslaboratory3 жыл бұрын
@フルブライトケネス Hi, nice to meet you. I agree there aren't many tutorials on creative coding and game development with vanilla JavaScript, although lately I discovered couple of new channels that try to make content like that. I'm happy that you find my video useful, thank you for letting me know :)
@Frankslaboratory3 жыл бұрын
@@abhaychauhan5158 Hi Abhay, if you come across any 3D projects made with vanilla JavaScript online, please let me know. I would like to see how other people approach this. I will try to do some webgl canvas projects with vanilla JS, could be interesting.
@codenester3 жыл бұрын
Great! Can't wait to see next episode. This is one of the great resources out there in web game. Thank you.
@Frankslaboratory3 жыл бұрын
Glad you like it Rithea, this video creates a complete foundation, now I will wait to see what people think and I will add graphics and other features in part 2
@kearneytaaffe70593 жыл бұрын
I'm currently a React web-dev, ran into your post on Reddit and honestly, I'm blown away by what a good job you've done. I'm definitely going to recreate this!
@Frankslaboratory3 жыл бұрын
Hi Kearney, nice to meet you. I like React, it's been a while since I used it. My plan for this year is to build a project in Angular just so I can compare them
@rupturedrhombus28363 жыл бұрын
Just wanted to say, you are awesome Frank. The coding genius himself, taking time to teach. Big props to you, thank you so much.
@Frankslaboratory3 жыл бұрын
Hi Rhombus, thank you, you are very kind, always nice to see a comment from you 🙏♥
@CoolScratcher3 жыл бұрын
Dang, Frank is killing it with this hour-long tutorial :D
@Frankslaboratory3 жыл бұрын
Thanks CS, it's a lot of code this time, so will have to make second part anyway
@poplop52702 жыл бұрын
Hey man thanks alot! You're one of the main reasons why I learned so much in game development (such as ctx and collision). And the way to detect enemies, really good because I now learned the indexOf!
@miroslavbekyarov Жыл бұрын
this is one of the best vanilla JS tutorials I've seen so far, great work
@Frankslaboratory Жыл бұрын
Hi Miro, thank you, unfortunately the site I used sprites from is unreliable so I didnt finish the series, my new game project use my own custom sprite sheets
@mattmovesmountains14433 жыл бұрын
I'm about a third of the way through; couldn't get the collision/grid thing to work as shown for some reason, but I figured out an alternate way, and am now feeling proud of this mini accomplishment
@Frankslaboratory3 жыл бұрын
Great job Matt, sounds like you are starting to be very comfortable coding with JavaScript
@RomanKnav3 жыл бұрын
This is a truly high quality tutorial Frank. Kudos to you sir 👍
@Frankslaboratory3 жыл бұрын
Roman! Thank you for taking the time to let me know
@Gethin4693 жыл бұрын
One of the most helpful videos I've ever seen on the matter. So shocking this only just came out within the last two weeks.
@Frankslaboratory3 жыл бұрын
Thanks Gethin, my channel is new, I have more unique projects coming soon
@animatormaster-iv1yf3 жыл бұрын
@@Frankslaboratory your channel is the best!
@jeffhill67693 жыл бұрын
Absolutely fantastic tutorial. I've been coding for a long, long time and I learned some very cool techniques. Thanks Frank!
@Frankslaboratory3 жыл бұрын
Hi Jeff, thank you for this comment, very happy to read that :)
@piersonlippard29113 жыл бұрын
Whaaaa!!! Frank this is fantastic. Thank you so much for another amazing tutorial. ;-)
@Frankslaboratory3 жыл бұрын
Hi Pierson, I'm trying to make more game dev videos, since people like them. I hope it's a fun way to learn JavaScript for some
@BruceOnder3 жыл бұрын
This was a tremendously good tutorial video! 💪🏾 Great teaching style!
@Frankslaboratory3 жыл бұрын
Thanks Bruce, very kind to say
@tarun76173 жыл бұрын
Omg !! He went all out this time !! We'll get to know a lot New things to learn !! You really worked a lot , this time😄 And here I'm trying to add few features in my boss for LVL 3 .... And I'm breaking my code a lot of times ... But , if that'll make the end result looks good I'll be satisfied
@Frankslaboratory3 жыл бұрын
Hi Tarun, now I want to build a space game like you are working on :D What kind of boss are you adding? I added boss that summons small versions of itself, summoner I guess. It's fun to come up with different game mechanics like this.
@tarun76173 жыл бұрын
@@Frankslaboratory I do have that idea already 😝 , and it fight the boss and to end the game or to win the game I'm going to add health bars for both boss and player ... With player have a special move that need to charge up to be used .... But , due to my classes ... It's gonna take some time .. 😭😭
@Frankslaboratory3 жыл бұрын
Classes are important, but it's good that you do coding projects like this on a side. You're doing a great job Tarun
@MewVSMewtwo893 жыл бұрын
I just discovered you (as a beginner) and just wow. AMAZING! Very helpful, and beginner friendly. This is awesome! You explain what you do way more than others.
@Frankslaboratory3 жыл бұрын
Hi, this is one of my more advanced tutorials, if you can follow this one you are doing really good for a beginner, I also have beginner playlist where I go a bit slower
@MewVSMewtwo893 жыл бұрын
@@Frankslaboratory I followed it with ease. On part 2 when it came to the sprites, the website you linked wasn't working anymore so I then watched your sprite animation video, then came back to this one. You're doing absolutely amazing. Keep it up!!!
@johnatteo8222 жыл бұрын
Thanks for this wonderful masterpiece you made for us Frank. You have taught me more about Javascript then my CS professor in 3 years 😊 😃 thanks so much. I Subscribed!!
@pavlejovanovic74573 жыл бұрын
You deserve much more subs and views, keep up the good work. You are amazing!
@Frankslaboratory3 жыл бұрын
Aw, thanks Pavle, my channel grew from 2k to 11k since lockdown so I'm not complaining. Hope you get some value from my content :)
@ramin91343 жыл бұрын
all i can say is you are AMAZING Frank!
@Frankslaboratory3 жыл бұрын
Aw, thanks Ramin ❤
@AleksPopovic3 жыл бұрын
Wow, this is super awesome. I can't wait to see how this series pans out. 😊
@Frankslaboratory3 жыл бұрын
Thanks Aleks, are you focusing your channel on React tutorials now?
@AleksPopovic3 жыл бұрын
@@Frankslaboratory I am! I want to make other types of content as well, though. Sort of like a mix of practical tutorials and practical advice. I might do some shorter videos to see how they go.
@Frankslaboratory3 жыл бұрын
It's a good idea to experiment, you have a new channel, it's a bit more about finding out what you like to make tutorials on at this stage. Your videos are top quality, the channel will grow if you keep posting.
@AleksPopovic3 жыл бұрын
@@Frankslaboratory Oh, wow, thank you so much! I really appreciate that!
@Azkett3 жыл бұрын
Thank you Frank! It's amazing, great job!💪💪💪
@Frankslaboratory3 жыл бұрын
Thank you Dmitriy, glad to see feedback like this
@Radu3 жыл бұрын
Wow :-) this is great! Will you show us how to add sprites and time them with the projectiles?
@Frankslaboratory3 жыл бұрын
I will make part 2 I hope ... eventually :D
@Radu3 жыл бұрын
@@Frankslaboratory Great! The game is awesome!
@mostafagh35739 ай бұрын
you are an amazing person sir, great tutorial.
@Frankslaboratory9 ай бұрын
Hi Mostafa, glad you found some value. I want to do an updated version of this project using more advanced techniques and cleaner code. This project could be much better with tilemaps, object pool and state design pattern
@mostafagh35739 ай бұрын
@@FrankslaboratoryI look forward to seeing your amazing content sir , I love how you explain details and methods and I'm glad I found your channel, I have so much to learn from you.
@blacksheep13373 жыл бұрын
Tottaly noobie friendly, thanx man you rocks!
@Frankslaboratory3 жыл бұрын
Hi Alexandre, I was trying to make it accessible for JavaScript beginners, happy to see a comment like this
@LunchboxdadioMusic3 жыл бұрын
I learned so much from this video! Thank you for making this. I coded this through the end of this video and can't wait to get started on part 2. The only thing I had trouble with was getting the defender to stop shooting when there was no enemy. I changed my code to "if(enemyPositions.includes(defenders[i].y))" and now it works great!
@Frankslaboratory3 жыл бұрын
Hi David, thank you for taking the time to give me some feedback, I appreciate it. Nice job with using built in include method, it will also work yea. This codebase has a lot going on, it's not a complete beginner projects, seems to me you are quite familiar with JavaScript, keep going! :)
@YoureGonnaLoveIt Жыл бұрын
bro , you have just saved me !! thank you
@FelipeGordillo3 жыл бұрын
Thank's from Spain. Great resources
@Frankslaboratory3 жыл бұрын
Felipe! Nice to meet you. Hi to Spain :)
@consciousmi48423 жыл бұрын
looks good material, will watch it tomorrow. Thanks
@Frankslaboratory3 жыл бұрын
Thank you, hope you like it :)
@kalx65883 жыл бұрын
Oh man frank! You are amazing!
@Frankslaboratory3 жыл бұрын
Hi Kal. Thank you. Very kind
@zbajro2 жыл бұрын
Thank you so much for sharing your knowledge with us!
@Frankslaboratory2 жыл бұрын
Hi Zoran, I'm here to help :)
@gotyabrolee53832 жыл бұрын
Thank you for the tutorial, you deserve the like
@Frankslaboratory2 жыл бұрын
Glad you found some value! :)
@dsmurl73 жыл бұрын
This is really cool. I like Unity but I would write a game in plain JS for sure.
@Frankslaboratory3 жыл бұрын
Hi, I love Unity, but I also enjoy JavaScript coding. This video has alternative purpose to teach JavaScript techniques. If I just wanted to build a great game, I would most likely go for Unity as well
@smtraders91035 ай бұрын
hello, you do your best to simplify game concepts and make fun games using JS. I have a special request can you make an RPG game where we see only specific parts of the game map and remain visible when the player approaches them?
@ThunderstruckElectronix3 жыл бұрын
Very nice! I'm learning game Dev and improving my JS skills 👍
@Frankslaboratory3 жыл бұрын
Thank you, do you build games with JavaScript or have you also tried things like Unity?
@DaniloSouzaMoraes Жыл бұрын
Instead of adjusting i after a splice you can just iterate over the array backwards
@comoyun3 жыл бұрын
OMG! That's really cool
@Frankslaboratory3 жыл бұрын
Thanks man, glad you like it ! :D
@VareshkaKote Жыл бұрын
great game, thank you
@emanuelkokovics2 жыл бұрын
Great idea! I love plants vs zombies (1 & 2) too (PvZ 3 has a different approach, don't like it!). I did go only till 1h, but there is the collision issue with immediate neighbors( imagine you put 3 defenders touching each other on column 1, if the enemy hits the middle one if effects the health of the top/bottom ones). Ok, I just finished the video, the collision error I was talking about was fixed!
@Frankslaboratory2 жыл бұрын
Yes I fix that one later in the video when I notice it :D
@anjalibansal36393 жыл бұрын
Thank you so much for this video , it helped me a lot, i was able to make a project with it's help , i owe it all to u , Thanks you so much
@Frankslaboratory2 жыл бұрын
Great to hear, congratulations on your project Anjali
@gatronglaptrinh75003 жыл бұрын
Amazing, good job
@Frankslaboratory3 жыл бұрын
Thank you :)
@AnotherGameDev24113 жыл бұрын
Frank, I love you. I really do.
@Frankslaboratory3 жыл бұрын
Hi Liad, thank you, love you too ❤❤
@Thebigneedsite3 жыл бұрын
Dude you are awesome!
@Frankslaboratory3 жыл бұрын
Thank you, very kind of you
@nishantchorge3 жыл бұрын
Thanks sensei
@Frankslaboratory3 жыл бұрын
Hi Nishant
@Mainman00113 жыл бұрын
Wow this one was tricky for me to follow (kept getting a class not initialized when adding the new Enemy class) I fixed it after restarting the tutorial 3 times but the end result was worth it as always man :) (for anyone also struggling with that error it was because the line 13 "let frame = 0;" variable had to be set to 1 for me else the enemy class bugged out on game start)
@Mainman00113 жыл бұрын
And don't get me wrong, I love these tutorial a lot. My way of programming / learning can sometimes lead to problems (well ok it can lead to a lot of problems most of the time, but it's still fun xD)
@Frankslaboratory3 жыл бұрын
Hi Jonathan, congratulations of solving the problem, this codebase is not for beginners as there is a lot going on, looks like you are getting really good with JavaScript. It feels great when we get something to work doesnt it. I'm not sure what happened in your case, the code should work with frame 0, strange
@Mainman00113 жыл бұрын
Totally man, really enjoying this JS journey! as for my code I stuck things into different functions. I started the game with an init function which may have thrown things off slightly? other then that the rest of the code works like a charm, can't wait to start the next video in this series!!
@Mainman00113 жыл бұрын
@@Frankslaboratory actually I ran into the issue again. . . "constructor()" can sometimes be difficult to type in VS Code so my bad, your code works perfectly fine when I type it correctly xD
@Frankslaboratory3 жыл бұрын
@@Mainman0011 Glad to hear you found out that the issue was
@unknown-bx8my3 жыл бұрын
Awesome❤ , i like the game. This is from my favorites games too. I am trying to learn now how to make multiplayer online game using websockets.i love this kind of games.
@Frankslaboratory3 жыл бұрын
Hi Abed, when you learn websockets can you teach me? :)
@unknown-bx8my3 жыл бұрын
Yes, sure❤ Maybe i'll make a video and upload it on my channel❤ but when i learn new things i need very long time.because i am student.
@Frankslaboratory3 жыл бұрын
Looking forward to it. It takes time I know
@WEBSTART-LIVE3 жыл бұрын
Как всегда, круто!
@Frankslaboratory3 жыл бұрын
Thank you
@peoplearecool87663 жыл бұрын
Very nice ! Thank you
@Frankslaboratory3 жыл бұрын
Thank you ! :)
@viniciusm.m.78223 жыл бұрын
Great!!!! Thanks, bro! God bless!
@Frankslaboratory3 жыл бұрын
Thank you, very kind ❤
@TheddunTOSS3 жыл бұрын
9:49 In this situation ctx could actually be null, because it is never checked if initialization via getContent worked. Same is true for canvas. In JS this can be fixed by throwing errors if either canvas or ctx are null. But this leaves open the problem that animate as a function could be called before canvas and ctx are checked. This could be fixed by either transforming animate to an arrow function.
@Frankslaboratory3 жыл бұрын
Hi, that's a good point. I don't think I've seen anyone checking if canvas and ctx are not null when setting up a canvas project. Can you point me to any video or article that does the setup correctly? I will try to Google it now.
@TheddunTOSS3 жыл бұрын
@@Frankslaboratory I have solved it like that in TypeScript (wonderful to see such potential problems): const canvas = document.getElementById("canvas"); assert( canvas instanceof HTMLCanvasElement, "Canvas can not be found or is not a HTMLCanvasElement." ); const ctx = canvas.getContext("2d"); assert( ctx instanceof CanvasRenderingContext2D, "Context can not be constructed or is not a CanvasRenderingContext2D." ); After that you can be sure that both canvas and ctx are found and correctly initialized as exactly the thing you want. The assert function is done like this: export function assert(condition: any, msg?: string): asserts condition { if (!condition) { throw new Error(msg); } } I think when you remove the typing from that function it will work in JS, too. If you do not use modules you need to remove the export, too.
@TheddunTOSS3 жыл бұрын
@@Frankslaboratory However, this still does not solve the problem that if you use the function keyword that it makes that function available as one of the first acts when the JS file is interpreted (or JIT compiled in reality of modern browsers). So still content and context could not be exactly what you want them to be. This can be solved by rewriting the animate function for example like this: export const animate = ( ctx: CanvasRenderingContext2D, controlsBar: IControlsBar ) => { ctx.fillStyle = "blue"; ctx.fillRect(0, 0, controlsBar.width, controlsBar.height); window.requestAnimationFrame(() => animate(ctx, controlsBar)); }; Again, if you remove the types it should work in vanilla JS, too. Also remove export when you do not use modules. By using const and arrow function this function is not scoped at the top of the file and you can be sure that it is not used before your setup is done. Also arrow functions have no this and so state is more clearly divided, so ctx and controlsBar need to be passed as paramters.
@Frankslaboratory3 жыл бұрын
Great points, thank you for letting me know. Sometimes it's a struggle to balance beginner friendly code with proper techniques, because I have to explain some things in multiple videos. I will keep this in mind as a good practice for larger projects.
@sojuthomas77273 жыл бұрын
Amazing again frank, I see a bug in the code ,enemies in the same vertical position freezes after collision with a defender, the collided enemy is moving left after defenders health is zero but some of other enemies in the same vertical coordinates freezes i.e. its velocity is zero, I solve that issue by resetting enemies movement to enemies speed when handleEnemies function runs
@Frankslaboratory3 жыл бұрын
Hi Soju, I didn't notice this bug when recording the video but it's possible I missed it, if you remember what line of code has the bug on please let me know, I will fix it on my codepen at least. Well done for debugging it, you've been coding a lot, I think you are getting more and more comfortable with JavaScript
@sojuthomas77273 жыл бұрын
@@Frankslaboratory after line 105 before checking collision between enemy and defender reset its movement,enemies[j].movement=enemies[j].speed; if we don't add this code for some reason enemy's in same vertical position looses its movement, there may be cleaner way of doing this
@boristherin41043 жыл бұрын
tried in handleDefender, just before the collision test, but was weird. enemies restart after a while even the def isnt dead. handleEnemies patch sound best atm ;), did u upgrade to tuto II & found something more valuable about that bug ?
@9ernation4-life40 Жыл бұрын
Frank this is great tutorial - I learned a lot and it was fun! one thing I had some trouble with is that for some reason it seems like my mouse pointer is offset and I can't move it to the far right edge of the canvas it seems to be stuck about half way I will continue to look over my code and watch the vid a few more times and pay close attention - I may have made a mistake do you happen to have any tips for this ? - - either way great job thank you :)
@Frankslaboratory Жыл бұрын
Sounds like you are using height instead of width there. Can't tell for sure unless I see your code. Could be hard to spot a small.difference like that
@9ernation4-life40 Жыл бұрын
@@Frankslaboratory I figured it out thank you again for the tip - I mixed up the width/height sizes in the css - your awesome man - I appreciate you
@catctus95083 жыл бұрын
Teacher. You're GOD. Thank you sooooooooooo muchhhhhhhhhhhhhhhhhhhhhhhhhhhh.
@Frankslaboratory3 жыл бұрын
Haha, very kind of you to say, I'm just a student like everyone else. I just like to share what I learn :)
@catctus95083 жыл бұрын
@@Frankslaboratory Teacher. You gave me a lot of knowledge. Can i be your student. ahh i'm not a native speaker in english. if my sentences made u confused. im so sorry
@saicharan17423 жыл бұрын
NIce it's here atlast; long and a difficult vedio :)
@Frankslaboratory3 жыл бұрын
it's hard but only because there is a lot of code. No complex algorithms in this one :)
@sasha679493 жыл бұрын
Its awesome! thank you, Frank! Its best tutorial i've seen. i dont know is it good idea or not l, but i'd like to see two players game. where they play both sides. is it hard to reallise?
@Frankslaboratory3 жыл бұрын
Hi Саня, I love the idea, maybe even 2 players on one screen take turns one is placing enemies one is placing defences, like a chess game. Ha. I want to build something like that now
@Frankslaboratory3 жыл бұрын
back to your original comment, online game would be even better but that requires some backend code. Or maybe there is some multiplayer library out there. Need to look into that :)
@sasha679493 жыл бұрын
@@Frankslaboratory Can't wait to see next episode.
@Vurrzey2 жыл бұрын
how did you make that one game at the beginning with all of the dragons and stuff it looked so cool
@Frankslaboratory2 жыл бұрын
The one with bosses? I just kept coding and adding features. I will try to show how I like to handle boss battles code soon.
@aravindvv22763 жыл бұрын
fantastic😍
@Frankslaboratory3 жыл бұрын
Thanks Aravind 😍
@dmaberlin Жыл бұрын
best!
@Frankslaboratory Жыл бұрын
Hi Dima, glad you like it
@mohammedjunaith54983 жыл бұрын
hi Nice video i would like if you make a video like tactical war game please i wishing to make that game please
@Frankslaboratory3 жыл бұрын
Hi MD, I love tactical games, I will add it on my todo list and see what I can do
@HellgateDragon3 жыл бұрын
In the "mousemove" event listener (around 19 minutes in), is there a reason to not use e.offsetX and e.offsetY to set mouse.x and mouse.y? It had the additional advantage of avoiding/not needing an "resize" event listener.
@awekeningbro12073 жыл бұрын
if u don't use those offsets, then the mouse coordinates will be based off the client itself and not the canvas element. You WANT to work with the canvas.so, it is important to do so.
@HellgateDragon3 жыл бұрын
@@awekeningbro1207 i'm talking about ~ 18:50. after getting the canvas' bounding client rect, frank uses "e.x - canvasPosition.left" and "e.y - canvasPosition.top" to get the mouse position relative to the node, rather than the document/client. Using "e.offsetX" should result in the exact same value as "e.x - canvasPosition.left", at least as far as i have tested it. therefore using either of those enables you to work with the canvas properly. and if it - as you say - doesn't, could you give an example? (so i could test around with it myself - because in the given project both offsetX and x - left result in the same mouseX coordinates (same goes for the Y coordinate))
@Frankslaboratory3 жыл бұрын
@@HellgateDragon I just did a quick test and it seems it works with e.offsetX, thanks for pointing that out, will mention that next time I need to use this technique. I'm used to getBoundingClientRectangle and I like to use it, didn't look for alternatives :D
@coltonaallen3 жыл бұрын
Oh yeah! Another F-Lab tutorial! I've been wondering why it's been so long since the last post, but now that I see what you've been working on and the length of the video, I can see why! Lol. This is awesome and I'm gonna gives it a try. Thanks again, Frank! Also, what are the specs of your pc, if you don't mind me asking?
@Frankslaboratory3 жыл бұрын
Hi, yeah this one took a bit longer to clean us and make into a tutorial. There is much more code with graphics, bosses and other features, will make part 2 eventually :D I bought new PC recently, it's the best version of i9 CPU with 32GB RAM and all hard drives are SSD. It was just before the new 3000 GeForce RTX cards came out so I bought the cheapest graphics card compatible with this setup and I will upgrade eventually. It still runs games well and is super fast for editing and loading times. What are your PC specs
@coltonaallen3 жыл бұрын
@@Frankslaboratory wow! That computer is a BEAST! I only have an old laptop given to me by a cousin with a 6th gen i5, 8gb ram, and a 970m gpu. It's ancient (has trouble rendering the getimagedata particles often), but it gets the job done. Able to play the games I want (R6 Siege and The Witcher 3 and TES: Skyrim) and code, so I'm happy. Been looking into building my own for a while now, but I gotta get the funds. Lol. I can't wait to try this game out for myself. Thank you for another great video! Also, in my javascript course I'm taking, I learned a little thing that is helpful when trying to determine if something exists, much like how you do at 52:10. Instead of explicitly writing: if (projectiles[i] && projectiles[i] > canvas.width - cellSize)... You can simply write: if (projectiles?.[i] > canvas.width - cellSize)... The "?" Is called "optional chaining" and tells the code to run ONLY if that particular object/property exists. Not a game changer, but always cool to learn things that makes code more concise.
@Frankslaboratory3 жыл бұрын
@@coltonaallen Your computer doesn't sound that bad, until last summer I did everything on a computer that couldt even run Witcher 2. Played both 2 and 3 as soon as I got my new PC :D
@coltonaallen3 жыл бұрын
@@Frankslaboratory Yeah, it's actually not THAT bad. Lol. I can't play Red Dead Redemption 2, though. I REALLY want to play it so I bought it on steam but my pc good haywire when loaded, so I'll just have to wait until I can upgrade. Anyways, this is a great tutorial and I've done most of it on my own after watching you do it, so I hope to make a cool medieval tower Defense game! I hope to have swordsmen and archers and fight against orcs and dragons. We'll see, though. Thanks for another inspiring tutorial!
@Frankslaboratory3 жыл бұрын
I bought Witcher 3 back in 2016 and I would not run at all, then I forgot about it and bought it again on PC and also on PS4. I gave them so much money, but the game is worth it. Red Dead Redemption is also on my to do list, but it's a long game, need holidays to get through it. Oh man, now I wish I did it as medieval towers, knights, orcs and dragons. That would fit the genre even better. It's hard to find sprites I can use for tutorials because I can't ask people to buy them. I always need to find a free set if I want to make it into a tutorial. If you come across some good graphics resources online please let me know :)
@metecantimur95423 жыл бұрын
Why do you never use forEach for array iterations?
@Frankslaboratory3 жыл бұрын
Thats a good question. Feel free to replace my for loops with for each. I will try to use it more. I dont think there is difference in performance between the two
@dmaberlin Жыл бұрын
some people say that repeating someone else's code from video tutorials is a stupid exercise, and that you only need to write the code yourself. Do you think it makes sense to repeat applications and your games from video lessons? Or do you have to write the code yourself?
@Frankslaboratory Жыл бұрын
Who says that and how do you write your first projects without repeating someone else's code? Be careful who's advice you listen to on the internet :)
@dmaberlin Жыл бұрын
@@Frankslaboratory I have been studying for a year already, but I like to write complex code from video lessons, do you think it makes sense? and how to increase the benefits of these activities?
@Frankslaboratory Жыл бұрын
@@dmaberlin Nice, I don't really know any secret trick, it's very important to know all JavaScript basics, then do projects and after you put in enough time you make your own projects from scratch. That would be my advice, mastering something takes time :)
@dmaberlin Жыл бұрын
@@Frankslaboratory thanks! If I am no longer a beginner, is there any benefit in repeating projects from video tutorials?
@unknown-bx8my3 жыл бұрын
Do you usually build the games then explain it in some parts?
@Frankslaboratory3 жыл бұрын
Hi, it depends, with this game I want to explain the whole thing, I want to build the entire game as a tutorial, but it will be split into 2 parts as this video already took me a long time to make :)
@joshuajrb67672 жыл бұрын
knowing my luck id follow this exactly and yet still end up messing it up
@naolchala43543 жыл бұрын
1st Like and 1st Comment
@Frankslaboratory3 жыл бұрын
Hi Naol :)
@laurentsoria1528 Жыл бұрын
Hi Franck, I'm coding a game using canvas, and the filter method, on an object array, but the result is odd . Do you think, you could give me a way to solve it ? It would be very great from you .
@avi123 жыл бұрын
Why center the canvas using "position: absolute:" and not via a flexbox/grid?
@Frankslaboratory3 жыл бұрын
Hi Avi. I like flexbox and grid. It can also be centered using position relative and margins. Many ways to achieve the same thing. There is no reason its just my personal preference. All 4 ways are good
@cookingwithfinn44112 жыл бұрын
This is great but i can't get my cell borders to show up. Can you help me please?
@turhangezerr3 жыл бұрын
when i use google fonts it doesnt work. I do exactly same thing, I paste links before style link, in css I write font-family etc. in js I write ctx.font="60px Blabla"; still it wont work. I couldnt find a solution. any idea why ? your videos are very instructive btw
@Frankslaboratory3 жыл бұрын
I don't see a reason why it wouldnt' work, if you want me to have a look at your code message me on Twitter
@Ninvus2 Жыл бұрын
23:26 why do "if (condition) return true" when you can just return condition?
@Frankslaboratory Жыл бұрын
Absolutely. In my more recent videos I try to be more careful and avoid things like this. Well done for noticing.
@AceslicerYt16 күн бұрын
I have a problem everything time a projectile shoots out from a turret on top the projectile hits the enemy on the bottom from another turret even when its not in Its row can you help me with this?
@Frankslaboratory16 күн бұрын
Hi. Its because the tips of their rectangular hit boxes touch. I adress that during the class as I develop the project.
@AceslicerYt10 күн бұрын
@@Frankslaboratory I found the problem when I made the height for the projectile I spelled height wrong and now it's fixed
@georgeryandev21033 жыл бұрын
I would love to see super mario made.
@Frankslaboratory3 жыл бұрын
Hi George, yes I want to do a side scrolling platformer, need to find a good set of spritesheets to do with it
@nikhilsharma60332 жыл бұрын
have they used a* algorithm ?
@toddharper26998 ай бұрын
Hi, really enjoying your video but im at 48:26 and i cant get it to splice, keeps telling me theres an undefined (reading 'x') couldnt find any typos, any suggestions? Cant move on till its sorted.
@Frankslaboratory8 ай бұрын
Its telling you that the object you are calling that x coordinate on is not being referenced correctly. Check what that object is follow it throughout the codebase console log it though all the steps and you should be able to find the typo
@AceslicerYt16 күн бұрын
But how to do that?@@Frankslaboratory
@AceslicerYt16 күн бұрын
Nvm I fixed it
@MentallyHygienic2 жыл бұрын
The enemies[i].draw() line isn't running for some reason, how to fix?
@Frankslaboratory2 жыл бұрын
Sounds like there's a typo in your code
@astrodan24172 жыл бұрын
what did you use to create the game like what website cause I'm only a begginer I don't know what to use
@Frankslaboratory2 жыл бұрын
HI Dan, first I did some basic JavaScript courses to make sure I understand all the principles like functions, variables, loops, hoisting, closures etc. Then I followed simple project tutorials for games (like this one) and then I read documentation and Stack Overflow to implement some specific features I wanted. I'm making a new step by step gamedev series that will hopefully take people from beginners to advanced
@dmaberlin Жыл бұрын
What microphone do you use to make videos?
@Frankslaboratory Жыл бұрын
Blue Yeti microphone, then some post production. I'm not a sound expert, recently I learned that Adobe Audition pre-set 'podcast voice' filter will make the audio sound much better.
@MentallyHygienic2 жыл бұрын
My class enemy drawings are invisible, no matter what I try it doesn't show.
@Frankslaboratory2 жыл бұрын
I can't help you based on this information. There is something in your code that's not right. Sometimes small things are hard to spot. If you want final code from this episode you can message me o Twitter
@sahiku53572 жыл бұрын
hello, should i lear js first or is it ok to jump directly to vanilla.js ?
@Frankslaboratory2 жыл бұрын
Hi Dziri. Vanilla JS is JavaScript. Since you don't know that yet I think you should do a basic JavaScript course before starting with projects like this
@S-Lomar11 ай бұрын
Thanks 😊🥰😊🤣😊👋😘😊😊😊😊🥰🥰🥰🥰🥰🥰🥰
@Frankslaboratory11 ай бұрын
Glad you like it
@ktk34872 жыл бұрын
By 25:20 the grid dosen't show for me when my mouse is hovering over however when I put createGrid(); it does show. Does anyone know why and is this ok? Because it fixes my problem but the video doesn't say that so.... I have rewatched the video up to 25:20 two times and everything was checked. There are no errors or miss types of every word, letter, symbol, space, even comment, something is wrong with my JS and I don't know what.
@Frankslaboratory2 жыл бұрын
Hi, it's hard to help you in a comments like this, if you want final code from this episode you can message me on Twitter
@ktk34872 жыл бұрын
@@FrankslaboratoryAh ok thanks :)
@cook86073 жыл бұрын
I have a problem, the error that was fixed at 49:30 didn't work for me, it persisted until the end, everything else works for, but I'm still having that problem where it breaks if I place a defender in most cases (sometimes it doesn't break, I have no idea why). I'd be happy to share my code on code pen or share my repo if this would help someone to show me where I'm wrong. Any help is appreciated
@Frankslaboratory3 жыл бұрын
Hi Cook, message me on Twitter is you want final files from this episode, then you can compare it line by line and see what the problem is. i'm sure it will be something small, but these things can be hard to find, debugging is not easy :D
@cook86073 жыл бұрын
@@Frankslaboratory Sent, cheers heaps for this man
@AtTheEnd10003 жыл бұрын
Just started with basic HTML and I'm scared of looking at this
@Frankslaboratory3 жыл бұрын
It takes a while to be good at something, if it was easy they wouldn't pay us so much money for these skills. If you keep learning you can build even better things than this. HTML is a good place to start with web dev
@ilkinhuseynov7513 жыл бұрын
cool but can u add some more level for it i player it in your codepen but there was just one level:(
@Frankslaboratory3 жыл бұрын
Hi Ilkin, yes multiple levels would be nice. I will show how to handle game state and multiple levels in one of my future tutorials. It's a bit more advanced than this beginner codebase but if we take it step by step I think I can explain it well
@newdev55573 жыл бұрын
Hello!! Do you have a video where you convert the JavaScript game to a mobile app game?
@Frankslaboratory3 жыл бұрын
Hi Junior, if you want to make native Android/iOS game from JavaScript you could just write it in JavaScript and use React native to convert it, I think. I haven't done anything on mobile game development yet, but will soon
@newdev55573 жыл бұрын
@@Frankslaboratory I can’t wait for that video!! Keep up the amazing work!
@TodorescuProgramming3 жыл бұрын
can you put it please on github ? can't seem to find it in your code pen, thanks
@Frankslaboratory3 жыл бұрын
Hi Tudor, I don't put everything on Codepen, message me on Twitter and I can send you the code
@ashotgevorgyan82823 жыл бұрын
Brother, please write the codes so that I can copy. I make mistakes in the video version, I do not succeed.
@Frankslaboratory3 жыл бұрын
Hi Ashot, I specialise in video tutorials, I think websites like Medium have written tutorials with code you can copy. I don't think you will learn much by copying blocks of code but if you want this code it's on my Codepen available for everyone do download
@s.mohammedjunaith61523 жыл бұрын
hi ,what do use to code js.which app or website
@Frankslaboratory3 жыл бұрын
I post on Codepen, but write code locally in VS code
@ascyrax85073 жыл бұрын
what are the pre-requisites (skill-wise) ?
@Frankslaboratory3 жыл бұрын
Hi Suraj, I would say HTML, CSS and basics of JavaScript. Some knowledge of JavaScript is needed but code structure of this project is very simple and straightforward
@ascyrax85073 жыл бұрын
@@Frankslaboratory Okee dokey. I will give this a try then............. I am very new to web dev :)
@Frankslaboratory3 жыл бұрын
@@ascyrax8507 I have a playlist for beginners, where I do creative coding projects and explain them slowly. It will give you all the tools you need here in a more beginner friendly way, if you want to check that out first.
@ascyrax85073 жыл бұрын
@@Frankslaboratory roger that.thank u :)
@a.j.outlaster1222 Жыл бұрын
Bro, Your videos introduced me to canvas, Because of you, I have now made a raycaster (I followed someone else's tutorial, But, If I didn't understand Canvas Context, I wouldn't have been able to code it!) The links are in my channel, Feel free to check it out, I would be honored if it gave you any sort of idea! 😄
@s.mohammedjunaith61523 жыл бұрын
hi, what app do u use to code??
@Frankslaboratory3 жыл бұрын
Hi, I use VS code editor, with Emmet and Live server plugins
@S-Lomar11 ай бұрын
🤩🤩😍😍😍😍😍😍😍🥰😍
@Frankslaboratory11 ай бұрын
🤩
@tothebone46132 жыл бұрын
any udemy class ?
@Frankslaboratory Жыл бұрын
For Udemy I just made some extended versions of my youtube videos for now. Will probably make a full creative coding and game dev classes eventually
@suelingsusu13392 жыл бұрын
🙏🙏🙏🙏👏👏👏👏👌👌👌👌🖖🖖🖖🖖
@Frankslaboratory2 жыл бұрын
😊😊😊😊
@NileshDadheech3 жыл бұрын
Thank you sir 😊 Your videos helps me a lot in learning 💓 and I want to say a very special thanks to you... because of your motivation...I got my First milestone (1k subscribers) on my channel..(spider man effect)
@Frankslaboratory3 жыл бұрын
Hi Nilesh, congratulations on 1k, this will give you access to community tab on your channel, I like to use it for polls and messages for my subscribers. Good luck, how you get a lot of success this year ! :)
@agent-333 жыл бұрын
Start making games for mobile devices. Mobile gaming is dominating.
@Frankslaboratory3 жыл бұрын
Hi, yes that's a good idea, I will make some mobile games
@awenn20153 жыл бұрын
Мля , вместо того что бы смотреть на кодинг приходиться слушать и разбирать что он там говорит ...
@Frankslaboratory3 жыл бұрын
Are you saying you would prefer if I just code without explanations? I'm not sure what you mean