Hello, do you have a video where you create the game in JavaScript then make it into a mobile game app.

waiting for something in 3d 😊😊

Yes 3d👍👍👍👍❤❤❤❤

@フルブライトケネス 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 :)

@@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.

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

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

Hi Rhombus, thank you, you are very kind, always nice to see a comment from you 🙏♥

Thanks CS, it's a lot of code this time, so will have to make second part anyway

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

Great job Matt, sounds like you are starting to be very comfortable coding with JavaScript

Roman! Thank you for taking the time to let me know

Thanks Gethin, my channel is new, I have more unique projects coming soon

@@Frankslaboratory your channel is the best!

Hi Jeff, thank you for this comment, very happy to read that :)

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

Thanks Bruce, very kind to say

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.

@@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 .. 😭😭

Classes are important, but it's good that you do coding projects like this on a side. You're doing a great job Tarun

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

@@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!!!

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 :)

Aw, thanks Ramin ❤

Thanks Aleks, are you focusing your channel on React tutorials now?

@@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.

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.

@@Frankslaboratory Oh, wow, thank you so much! I really appreciate that!

Thank you Dmitriy, glad to see feedback like this

I will make part 2 I hope ... eventually :D

@@Frankslaboratory Great! The game is awesome!

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

@@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.

Hi Alexandre, I was trying to make it accessible for JavaScript beginners, happy to see a comment like this

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! :)

bro , you have just saved me !! thank you

Felipe! Nice to meet you. Hi to Spain :)

Thank you, hope you like it :)

Hi Kal. Thank you. Very kind

Hi Zoran, I'm here to help :)

Glad you found some value! :)

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

Thank you, do you build games with JavaScript or have you also tried things like Unity?

Thanks man, glad you like it ! :D

Yes I fix that one later in the video when I notice it :D

Great to hear, congratulations on your project Anjali

Thank you :)

Hi Liad, thank you, love you too ❤❤

Thank you, very kind of you

Hi Nishant

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)

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

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!!

@@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

@@Mainman0011 Glad to hear you found out that the issue was

Hi Abed, when you learn websockets can you teach me? :)

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.

Looking forward to it. It takes time I know

Thank you

Thank you ! :)

Thank you, very kind ❤

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.

@@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.

@@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.

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.

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

@@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

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 ?

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

@@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

Haha, very kind of you to say, I'm just a student like everyone else. I just like to share what I learn :)

@@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

it's hard but only because there is a lot of code. No complex algorithms in this one :)

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

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 :)

@@Frankslaboratory Can't wait to see next episode.

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.

Thanks Aravind 😍

Hi Dima, glad you like it

Hi MD, I love tactical games, I will add it on my todo list and see what I can do

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.

@@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))

@@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

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

@@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.

@@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

@@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!

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 :)

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

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 :)

@@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?

@@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 :)

​@@Frankslaboratory thanks! If I am no longer a beginner, is there any benefit in repeating projects from video tutorials?

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 :)

Hi Naol :)

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

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

Absolutely. In my more recent videos I try to be more careful and avoid things like this. Well done for noticing.

Hi. Its because the tips of their rectangular hit boxes touch. I adress that during the class as I develop the project.

​@@Frankslaboratory I found the problem when I made the height for the projectile I spelled height wrong and now it's fixed

Hi George, yes I want to do a side scrolling platformer, need to find a good set of spritesheets to do with it

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

​But how to do that?​@@Frankslaboratory

Nvm I fixed it

Sounds like there's a typo in your code

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

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.

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

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

Glad you like it

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

@@FrankslaboratoryAh ok thanks :)

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

@@Frankslaboratory Sent, cheers heaps for this man

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

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

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

@@Frankslaboratory I can’t wait for that video!! Keep up the amazing work!

Hi Tudor, I don't put everything on Codepen, message me on Twitter and I can send you the code

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

I post on Codepen, but write code locally in VS code

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

@@Frankslaboratory Okee dokey. I will give this a try then............. I am very new to web dev :)

@@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.

@@Frankslaboratory roger that.thank u :)

Hi, I use VS code editor, with Emmet and Live server plugins

🤩

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

😊😊😊😊

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 ! :)

Hi, yes that's a good idea, I will make some mobile games

Are you saying you would prefer if I just code without explanations? I'm not sure what you mean