Tower Defense Game Tutorial with JavaScript & HTML Canvas

Ready to create amazing games? Join chriscourses.com to learn, grow and thrive from over 100 videos, quizzes and code challenges: chriscourses.com/
Here you'll learn how to create your very first tower defense game with JavaScript and HTML canvas. We'll start by creating a game map using a map editor called Tiled. Then we'll code the basics of a tower defense game using nothing but rudimentary shapes. Finally, we'll replace our shapes with sprites to give our game a professional look.
Google Drive Assets: drive.google.com/drive/folder...
Finished Demo: chriscourses.github.io/tower-...
Source Code: github.com/chriscourses/tower...
Tiled Map Editor Download: www.mapeditor.org/
Stone Tower Assets: free-game-assets.itch.io/free...
Desert Tileset: free-game-assets.itch.io/free...
Orc Sprite Assets: free-game-assets.itch.io/free...
Heroicons: heroicons.com/
Font Awesome: fontawesome.com/
0:00 Introduction
0:51 Game Assets and Downloads
5:40 Create a Path
23:53 Map Details
31:42 Project Setup
48:31 Pathfinding
1:28:55 Building Placement
2:12:03 Shooting Projectiles
2:50:40 Health Bars
3:02:46 Waves
3:09:43 Game Over
3:39:13 Resources
4:01:12 Sprites - Projectile
4:16:09 Sprites - Enemy
4:34:15 Sprites - Building
4:55:25 Sprites - Explosions
5:04:50 Launch
Music by Joe Gallagher: joegallagher.itch.io/free-orc...

[@ChrisCourses]

There's about 20-30min of audio that makes it sound like I'm submerged underwater. Had some electrical interference picked up somehow, so had to do my best to edit out some really annoying buzzing. Sorry in advance 😅

[@saronarabeds6517]

no matter

[@abhilashLeader_07]

Its not ok🤣

[@sekssgenoi]

Нюбп😮бую🎉шюуг😅б😊😊руунжзр😊гзуш😅ш😮😮🎉ездют😅🎉юрий михайлович нгщ😅🎉где😢ю🎉😊уг😊ююпнн😊у 1:02:52 июраб избрнжубранзрщбув😊она😊ушгщжнню😅шд🎉😂🎉ладно🎉не😮😢эшшх🎉школа х😮😂😢 юл😢былюубвщуюшордшг🎉не😅юзв😊😊😊 1:29:45 шенйно🎉😂ему😅😅😮😊юб😂юбилей ру😂❤юш🎉ну-шу г😊ш🎉ею😊😊е🎉шнхууну чего не хватае Пир😮щ😊😊огово🎉 ш😊гова😊😮н😊н😅🎉е🎉он уже😊 не😅 1:29:52 😊ун😊шву😂😂елш🎉😊е😊😮г😂😊ыыщгвщ😮ж😅уже😊вешеуу😅в?😊незз😊этот й😊цщг😊ыее😮л 1:30:3б🎉🎉чйш😮йег🎉😅пбе😊е9🎉н😮у😮шее 1:31:01 😂гпув🎉🎉😂еу🎉шепу🎉 1:31:05 гшшюю😮😅😮еп❤🎉😊 😮еыш😊уулйеввш😂в😊😊шее😊😅цшеен🎉🎉🎉😮❤он👦👦🎉😢😊🎉шегнд🎉но щ🎉гц😊юшеш🎉леб😊🎉🎉😊🎉е😅🎉дещюше🎉🎉😅😂в😅😊вуннз😊😊д😊😊нынгш😮щбщды🎉щ🎉з😊ушд🎉о😢е😊🎉о😊 1:31:31 ю😂ш😊😊😅😮🎉д😊шу🎉дно😮🎉н😮😅в😮😊е🎉вдг😊н😢Юрченко з🎉щЩоювдр🎉😊ш😮😊ее🎉шэйш😅?😊г

[@sekssgenoi]

😊ш😅

[@dragonlord3504]

Üüüäüüä000ä​@@ollmacüä00ü0ü0

[@theshelbizzle24]

How did i fall asleep to true crime and bodycam videos and have these videos play during my sleep? Ive mever searched for a coding video ever 😂

[@xxblueberryxx8287]

Every single time when I fall asleep I wake up to this channel 😭

[@bw4265]

Just woke up, first time waking up to this channel. Reading these comments is surreal.

[@forbiddengamers8068]

I fell asleep and this was playing KZbin why do you make me go to the weirdest places😂

[@uncandneph146]

same here lol

[@Cadec33]

just woke up, this has been playing for 3 hours 💀💀

[@LeLocoTV]

I WOKE UP TO THIS ?!?!?!

[@mentalhealthcumulative]

@@LeLocoTV Same bro same

[@CryptoMoney02]

Another soldier here who wake up to this lol

[@BulletAgario]

I fell asleep with KZbin on and woke up an hour 30 mins into this video lol

[@robbiepatrick6755]

I keep waking up to this channel it’s the fifth time!!!

[@kyrielnieves3224]

Same😂😂

[@WinWin-oo4uk]

I blame NileRed

[@crypticscrutiny1153]

Any of you guys watch any Terraria conten? I think that's what's bringing me here because the rest of my stuff is fairly politically oriented.

[@coolio464]

@@crypticscrutiny1153yo actually, same… that’s so wild

[@crypticscrutiny1153]

@@coolio464 that's what's up! That's what's happening. The algorithm is bringing in Real Ones from Terraria content.

[@carsonplayzgaming9691]

i fell asleep watching youtube, wake up and check that this video is 30 mins watched in my recently watched, the scary thing is that the was coding in my dream. I’ve never coded before

[@benshakespeare268]

Ha! Same here😄

[@comoplaysdestiny5106]

I fell asleep and woke up to this too

[@JLneonhug]

Me too, mine the coding.

[@fatyoshi156]

Me too

[@martinjankovski680]

Me too !

[@fanona112]

Fell asleep to squishy and slime videos and woke up to this, 10/10.

[@rowancode]

Please don't stop making these videos, you're providing a ton of value.

[@nasiba8730]

Thank you so much, Chris, my son really adores your channel! He claims that you inspired him to become a "Front End Developer." Your hard work means a lot for me as much as it does for my son. Keep up the great work!

[@trevorfranks69]

Keep making these tutorials man, im an aspiring front end web dev with no time to for personal projects like learning unity so im very grateful i can still express my creativity by doing these thanks to you

[@trashinGame]

We need to get this legend to 1M subscribers at all cost!

[@ChrisCourses]

Plz do 😩

[@oldgames6028]

@@ChrisCourses you are the best

[@user-oy8sy1wm5y]

​@@ChrisCourses you are the best programmer

[@noahr1545]

Yes!!! I've been waiting for this video since you announced the video! I'm really glad I found your channel. You explain things SO well and I didn't even realize you could create games with only JavaScript. Keep up the great work!

[@ChrisCourses]

Thanks Noah, been putting in that work, but have more to go to make the channel succeed. Appreciate the comment and for tuning in!

[@noahr1545]

No problem!

[@joaocesarlima7339]

Another awesome tutorial! Your approach of adding layers of complexity little by little, without losing clarity and objectivity, is really cool. Congratulations and please continue!

[@Octa]

Just woke up to this channel and reading these comments are so funny

[@andydataguy]

Omg I love tower defense games!! Would be so much fun to practice javascript by making one of these. THANK YOU for this video 🙏🏾💜🙌🏾

[@adamjankowski5755]

Very cool. I watched first mins of showcase then coded everything in my own way. Thanks for inspiration, assets, and I love your canvas videos!

[@dabzbmg3197]

Your last video helped me get a job, can't wait to build this. thanks again brother Chris.

[@planetaryescape5794]

Why is everyone waking up to this and why did I wake up to this too

[@user-fw9ns7rm1v]

In the near future when I will get a job , I promise I will donate money to your account, your tutorials are amazing and the way you explain is simple and straight to the point. I wish my college professors were teaching us the way you do. All the best

[@christophersvatora6658]

So everyone is also waking up to this guy 💀

[@Alexei1983121212]

bro...im someone who barly comments on youtube videos but without starting to watch this one I allready want to thank you. "You are a good man!"

[@SkunkonHeels]

Dude how did I end up here 😭 I wasn’t even on KZbin when I slept?

[@Tomisthere]

It’s the third time i wake up to this channel

[@name_69420]

Woke up here again.

[@adefunkeadedoyin9338]

Chris thanks for your courses words can't describe how they have improved my game development skills, I even got my first paid project with the knowledge of my game dev 🚀🚀

[@ChrisCourses]

Awesome, love hearing that. Feel free to use any of my code on GitHub to help further your career, I also hope the next videos I create further your knowledge even more-so🙏

[@adefunkeadedoyin9338]

@@ChrisCourses thanks man. God bless 🚀🚀

[@unixrebel]

anyone know what that default font is that is used on mac? want to get it for my linux pc.

[@marcelo.victor]

Chris, hi from Brazil! Can you make a javascript tutorial on how to display a div on a button click, the div being always attached to the button by the ID, and show above/bottom or left/right of the button when this button is positioned at top, bottom, left, right of the window? I'm bangging my head against the wall trying to do this!

[@forati]

Ok, hoje eu vou dormir às 4 da manhã e a culpa é sua. Ok, today I will sleep at 4am and is your fault. Ty m8, keep going. I learn a lot each video.

[@jonathanmanner5616]

Awesome, did you use any specific program to actually make the tileset.png? I would like to build a game based of this tutorial but not sure how I would merge the assets together to one file. Perhaps that's not really necessary?

[@WyzrdCat]

You can use basically any graphics editor. Photoshop, Affinity, Photopea, Krita, etc.

[@universecode1101]

I don't know how you create, such long courses ... I'll be able to do them too, sooner or later 😝 Great content

[@ChrisCourses]

Lots of sitting down, messing up, then trying again until I get it right 😅 Best of luck on the projects!

[@johanngerhardt401]

At 1:22:00 i got Uncaught ReferenceError: Cannot access 'enemy2' before initialization at animate (index.js:49:5) cannot fix it, const enemy = new Enemy({ position: { x: 100, y: 100 } }) const enemy2 = new Enemy({ position: { x: waypoints[0].x, y: waypoints[0].y } }) first work but second dont work how can i fix it?

[@Gregor__Samsa]

I found out that the order of importing js files might cause the issue. Can you make sure that you import the waypoints.js before the index.js in the index.html?

[@babaakshay]

Great video! Could you please also make a video on how we could monetize these games built with Javascript? Maybe also release them on Android or IOS? I am really thinking of this as a full time job.

[@ARandom.Channel.]

I fell asleep watching cube marching and woke up to this

[@hungle-wi2bj]

Hi, how to convert .fla to .png, or fla to something else to use in Unity?

[@abhijitbarman4401]

In KZbin there are not many tutorial on Canvas. Thanks for it.

[@i-lack-creativity]

KZbin redirected me from a series of videos to to this (it started with cleaning uranium waste)

[@namyak-bf9od]

at around 40 minutes in, there is a bug with the canvas getContext. the browser console says that is cannot read the property of null

[@jgvlc]

Thank you very much Chris, your tutorials are fantastic!

[@ChrisCourses]

Glad you think so! Got more on the way 💪

[@CallousCoder]

Wouldn't it be more sensible and robust to set objects in an array to null instead of splicing them out. And just check for a null (which you should always do anyways)? At least you don't need to worry about updating an array whilst looping through it. Either way this is easier than in C/C++ where you'd actually have to register which struct/object you want to free/delete. Also i noticed that projectile path is update every frame, so you have a "hear seeker" rock :D

[@kashmirtechtv2948]

Why do you use classes??? Shouldn't we be on Functional programming?

[@tome343osu4]

the moment i paste in the second svg everything goes black barring the newly pasted icon. Really confused can't seem to fix this either. Anyone have any idea what's happening/how i can fix this?

[@LxraXJkS]

Me dormí viendo KZbin y aparecí acá… 57:32

[@machochocolate7679]

Amazing tutorial, very well done my dude. Thanks so much for all the effort you put into this. Definitely a subscriber now!

[@Suzuhara]

when I use position: { x:waypoints[0].x, y:waypoints[0].y I got - "ReferenceError: can't access lexical declaration 'enemy' before initialization" and I have no idea why.

[@JasonRobards2]

1:27:00 I don't give an intial x and y position with my constructor, since this information is in the waypoints array anyway. When changing the initial x position after going through the initialisation array, the code always writes the x position for the last element to all elements in the array. Can anyone explain why this could be? I guess it has something to do with how js refers to objects, but I am not well versed in this language. My intuition tells me this should work. const enemies = []; for (let i = 0; i < 10; i++) { enemies.push(new Enemy()); } for (let i = 0; i < 10; i++) { const xOffset = i * 150; enemies[i].position.x -= xOffset; console.log(enemies[i]); }

[@JasonRobards2]

This was my constructor and apparently this does not work. I don't know why. class Enemy { constructor() { this.waypointIndex = 0; this.position = waypoints[this.waypointIndex]; It kept overwriting so that all enemies in the array had the same position.

[@JasonRobards2]

This works: class Enemy { constructor() { this.waypointIndex = 0; this.position = { x: waypoints[this.waypointIndex].x, y: waypoints[this.waypointIndex].y }; I think the previous didn't work because it copied the label to this.position rather than the actual values, although I am not entirely sure what exactly happened. I am going to leave this little convo with myself in case someone else can make use of it :)

[@user-pc8ip7hv5w]

how did you get the sprite

[@jasminbratz298]

bro i usually but sleeping vids to sleep bit when the vid ends and i dont even know it just Kepa plaiyng cuz its on a charger so when i wake up i wake up to this;-;

[@fmi1632]

Commenting to reference you, thank you so much for your videos, they're top quality and extremely helpful !!

[@hungle-wi2bj]

How to create tower.png with different tower. Your resource have rock tower. I need to create more tower with png. Thank you so much.

[@kalebdasilvavitorino2877]

Eu gostaria de passar um jogo desses para mobile, eu consigo??

[@2DiamondShovelsX]

Why does KZbin do this I wake up and BAM im 3 hours into the same video every time. HOW DOES YT KNOW???BUT

[@TomNode]

Woke up to this too! What the heck?😅

[@cdgfilms1004]

i fell asleep and woke up to my phone on 13% and i was 59:59 minutes in

[@ramon4756]

I also woke up to this video

[@djoezi3662]

I'm gonna buy your courses man! it's amazing! Thank you a lot!!

[@simon-hb7wf]

you are so well organized, this helps us a lot !

[@ChrisCourses]

I do pride myself on the organization / chapter time-stamps of these, put a lot of time into making everything is exactly where it needs to be 😄

[@simon-hb7wf]

@@ChrisCourses and that's why after more than 3 years following your channel, I'm always happy to watch a new video from you ! 👨‍💻

[@user-gf9ri4wj5h]

Can we have three js game

[@djneils100]

this is a superb tutorial - first rate explanation - great teacher

[@ChrisCourses]

Thank you very much!

[@wisdomochei7750]

Holy shit... 5 hours? 😅 Looks Interesting and challenging so yeah, I'm in ✅

[@ChrisCourses]

Hell yeah man, welcome, hope the project went / is going well 🙌

[@anawan]

Yeahhh another one ! Thank you so much to make these awesome videos accessible to everyone !

[@ChrisCourses]

Chapters, captions, free === the ultimate accessibility tuts 😎

[@ritarshichattaraj9552]

You have changed my perspective on game dev!!

[@saurabhrawat3878]

hey man please built brick breaker type game

[@rustyrustan]

100% Im feeling the next one is going to be a lovely RPG game with basic sprite sheets, teleport from one place to another, basic inventory and some juicy cool extra shenanigans things, im looking towards it. I love your work and patience to explain everything, keep the energy and vibes all the way up !!

[@kinopremyera2753]

Great 👍 tutorial thank you 😊 Hello Chris how are u? I have a question. I want to make app like webflow So should i use canvas to make that kinda project or not

[@macealred4135]

I fell asleep to cleaning videos where tf am i

[@gofudgeyourselves9024]

Wow just wow. More stuff like this

[@InfectAion]

Woke up to this wtf

[@martinbobbio2211]

Thank you a lot Chris. I love your courses.

[@chetanuzumaki9581]

Awesome brother thanks for ur hardwork

[@ChrisCourses]

No prob, thanks for watching 🙏

[@gisen100ify]

Спасибо!

[@shaikhsanuar5339]

It’s awesome bro. Learning a lot.

[@jasoncain5552]

All you had to do is used two inner corner pieces

[@goldenPixeler]

Thank you for your work i like how you doing videos

[@spanch1bobr]

your explaintions are so good.

[@vin2368]

This is Awesome Bro :)

[@noir66146]

time well spent !

[@thecoolnessking5834]

Wth i learned coding while sleeping and this was why wth WTH

[@sandrallancherosg]

GO CHRIS!

[@user-qb3be7gc1z]

good thanks a lot!! 1:05:01

[@daveinpublic]

At 15:00.. felt like the longest 5 minutes... How can you spend that long doing 1 thing?

[@user-ih3ud7pf8q]

احسنت

[@andc6016]

time stamp: 4:54:44

[@naedid2512]

Thanks

[@AnimeWarriorPlays]

WAWW

[@pedromesquita9806]

You rock!

[@ChrisCourses]

You rule!

[@otisrancko]

Maahnn this video is fire!!!!....🔥🔥🔥

[@taranewstime6909]

Really awesome 👍🙏

[@BigCereal-ze6vm]

Fell asleep watching strongest anime characters where tf

[@ericawoodhams1521]

I literally fell asleep watching Hell’s Kitchen… KZbin do better😂

[@S-Lomar]

🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯

[@HuynhLuong227]

Great! Many thank

[@aftercyberneticrp]

The best!

[@japsgy]

love u man

[@ChrisCourses]

❤️🙏

[@muhammadathalaromero8521]

bng hapus dulu videonya pls

[@doyouwantsli9680]

Ja some male wx reaction

[@loicmakassoeti3209]

You're a legend. Insane content.

[@nivekzer451]

teste

[@user-iu3zz9oj4j]

dude ima unsub if you don't slow down