JavaScript Game Tutorial – 2D Tower Defense
We will use different types of units, to defend our base against a variety of enemies, we will collect resources and fight boss battles. Have fun.
PART 2:
This JavaScript tutorial is part of a series, for more game development check out this playlist
I love video games and everybody who knows me will tell you that. I think a lot of programmers do. I have always wanted to build a JavaScript game with mechanics similar to plants vs zombies. Today I will build it with you and I will explain all the code. Not only we will build a game, but we will also learn and practice important vanilla JavaScript programming techniques. I will do a space theme. Robots vs Aliens. we set up a base on alien planet but it was too late when we discovered that at night dangerous alien creatures come out. We have limited resources so we have to use our defences carefully
we have to collect more resources, strategize, use the correct units against certain enemies and defeat the final boss.
You can message me on TWITTER
Check out some of my source code on CODEPEN
0:00 Let’s build Plants vs Zombies game with JavaScript
3:16 HTML markup and basic CSS styling
4:17 How to set up HTML canvas for JavaScript game and how to plan the code structure
9:52 How to create JavaScript game grid
19:56 Collision detection between 2 rectangles
25:54 How to use JavaScript ES6 classes to create ‘defender’ units for our game
36:30 Enemies
49:32 Lasers and other game utilities
1:05:22 Resources and simple fixes
If you started with vanilla JavaScript and HTML5 canvas recently you might want to try some of the tutorials from beginner friendly projects playlist first: –
#frankslaboratory
Music: (YouTube audio library) Vacay In Fiji Riddim – Konrad OldMoney,
Dub Hub – Jimmy Fontanez_Media Right Productions
The description of this video may contain affiliate links, which means that if you buy one of the products that I recommend, I’ll receive a small commission without any additional cost for you. This helps to support the channel and allows me to continue making videos like this. Thank you for the support!
![🔴Live | SIGNING & TITANS GIVEAWAYS With VIEWERS In Toilet Tower Defense! [🗺️EP 62] Roblox!](https://fantasy-defense.com/wp-content/uploads/2023/09/j_ghhi74hgqmaxresdefault-1024x576.jpg)
![World Tower Defense Badlands Burden Win – [stupidly hard lol]](https://fantasy-defense.com/wp-content/uploads/2023/09/la5shtaezrwmaxresdefault-1024x576.jpg)
Very nice! I'm learning game Dev and improving my JS skills 👍
Great!!!!
Thanks, bro! God bless!
Мля , вместо того что бы смотреть на кодинг приходиться слушать и разбирать что он там говорит …
Frank, I love you. I really do.
hi Nice video
i would like if you make a video like tactical war game please
i wishing to make that game please
what are the pre-requisites (skill-wise) ?
Why center the canvas using "position: absolute:" and not via a flexbox/grid?
Seems like I have found a real treasure on Youtube.
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
Just wanted to say, you are awesome Frank. The coding genius himself, taking time to teach. Big props to you, thank you so much.
Amazing, good job
Thank's from Spain. Great resources
This is a truly high quality tutorial Frank. Kudos to you sir 👍
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
Brother, please write the codes so that I can copy. I make mistakes in the video version, I do not succeed.
Why do you never use forEach for array iterations?
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.
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
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)
cool but can u add some more level for it i player it in your codepen but there was just one level:(
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!
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
JavaScript Game ⤵️
https://www.youtube.com/channel/UCly_GAz2m-7FEdPgeS672nw/videos
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 <3
Thank you so much for sharing your knowledge with us!
hello, should i lear js first or is it ok to jump directly to vanilla.js ?
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!
🙏🙏🙏🙏👏👏👏👏👌👌👌👌🖖🖖🖖🖖
Hey guys!
Take a look at a video of your interest:
Tetris game: https://youtu.be/RzhA3J966rI
Flappy bird game: https://youtu.be/vDqZFbaa9tw
2048 game: https://youtu.be/_jPDQeQPdyk
Memory card game: https://youtu.be/QrTCHHhoUQU
Ping pong game: https://youtu.be/LXTnfp7nU_0
Crack the code: https://youtu.be/V3Gxid94bw0
Geometric Design Patterns: https://youtu.be/hquS7khQhK0
Keyboard piano: https://youtu.be/kHsV9j08d0k
K-means clustering algorithm: https://youtu.be/nWNzhfARLG0
All projects are made using Javascript.
I am a great fan of this guy and love the videos he creates.
I also upload similar type of content on my youtube channel.
Need some support 🙂
what did you use to create the game like what website cause I'm only a begginer I don't know what to use
My class enemy drawings are invisible, no matter what I try it doesn't show.
The enemies[i].draw() line isn't running for some reason, how to fix?
how did you make that one game at the beginning with all of the dragons and stuff it looked so cool
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.
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!!
knowing my luck id follow this exactly and yet still end up messing it up
have they used a* algorithm ?
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!
Thank you for the tutorial, you deserve the like
This is great but i can't get my cell borders to show up. Can you help me please?
any udemy class ?
Instead of adjusting i after a splice you can just iterate over the array backwards
this is one of the best vanilla JS tutorials I've seen so far, great work
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! 😄
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 🙂
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 .
best!
What microphone do you use to make videos?
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?
great game, thank you