Tower Defense Game Tutorial with JavaScript & HTML Canvas

Поделиться
HTML-код
  • Опубликовано: 21 дек 2024

Комментарии •

  • @ChrisCourses
    @ChrisCourses  2 года назад +301

    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
      @saronarabeds6517 2 года назад +64

      no matter

    • @abhilashLeader_07
      @abhilashLeader_07 2 года назад +29

      Its not ok🤣

    • @sekssgenoi
      @sekssgenoi 8 месяцев назад

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

    • @sekssgenoi
      @sekssgenoi 8 месяцев назад

      😊ш😅

    • @dragonlord3504
      @dragonlord3504 8 месяцев назад

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

  • @bw4265
    @bw4265 7 месяцев назад +174

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

  • @xxblueberryxx8287
    @xxblueberryxx8287 7 месяцев назад +166

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

  • @mikebenson9423
    @mikebenson9423 6 месяцев назад +31

    I think the algorithm knows that we are sleeping so it finds calm and relaxing video to not wake up abruptly.

  • @theshelbizzle24
    @theshelbizzle24 7 месяцев назад +114

    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 😂

    • @silverthourne5119
      @silverthourne5119 3 месяца назад

      Better than me lol I fell asleep watching NASCAR

    • @connerschair4759
      @connerschair4759 2 месяца назад

      I fell asleep to watching mechanics work on trucks then I woke up to this lmao😂

    • @devinmiles5204
      @devinmiles5204 2 месяца назад

      I fell asleep watching a brawlhalla video 😂

    • @mrwengorz1029
      @mrwengorz1029 2 месяца назад

      I fell asleep watching video about gambling addiction

  • @Octa
    @Octa 7 месяцев назад +74

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

    • @allisondippold9445
      @allisondippold9445 Месяц назад

      Oh my god same here 😂😂 and the video was some how playing for two and a half hours

  • @BulletAgario
    @BulletAgario 8 месяцев назад +53

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

  • @fanona112
    @fanona112 7 месяцев назад +25

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

  • @robbiepatrick6755
    @robbiepatrick6755 8 месяцев назад +112

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

    • @kyrielnieves3224
      @kyrielnieves3224 8 месяцев назад +2

      Same😂😂

    • @WinWin-oo4uk
      @WinWin-oo4uk 7 месяцев назад +1

      I blame NileRed

    • @crypticscrutiny1153
      @crypticscrutiny1153 7 месяцев назад +2

      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
      @coolio464 7 месяцев назад +1

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

    • @crypticscrutiny1153
      @crypticscrutiny1153 7 месяцев назад

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

  • @name_69420
    @name_69420 8 месяцев назад +108

    Woke up here again.

  • @user-cw9md5gv5x
    @user-cw9md5gv5x 7 месяцев назад +10

    It’s crazy, I keep waking up to this video most nights 😭

  • @nomltefindingthis
    @nomltefindingthis Год назад +567

    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

  • @goop-ns9ts
    @goop-ns9ts 6 месяцев назад +10

    I like to think that chris courses is breaking into all of our houses and changing the video while we sleep

  • @forbiddengamers8068
    @forbiddengamers8068 9 месяцев назад +134

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

    • @uncandnephyt
      @uncandnephyt 9 месяцев назад +1

      same here lol

    • @Cadec33
      @Cadec33 9 месяцев назад +3

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

    • @LeLocoTV
      @LeLocoTV 9 месяцев назад +3

      I WOKE UP TO THIS ?!?!?!

    • @APenttilä
      @APenttilä 8 месяцев назад

      @@LeLocoTV Same bro same

    • @CryptoMoney02
      @CryptoMoney02 8 месяцев назад +4

      Another soldier here who wake up to this lol

  • @mareli7592
    @mareli7592 2 месяца назад +1

    i fell asleep with youtube on and woke up to a relaxing voice teaching me how to code. amazing

  • @GH0STPROD1GY
    @GH0STPROD1GY 7 месяцев назад +7

    I fall asleep to football (soccer) videos every night and yet I’m waking up to this played two hours through

  • @rowancodes
    @rowancodes 2 года назад +36

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

  • @WhenYouGoToZahadoom
    @WhenYouGoToZahadoom 2 года назад +1

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

  • @nasiba8730
    @nasiba8730 2 года назад +24

    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!

  • @dabzbmg3197
    @dabzbmg3197 2 года назад +8

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

  • @noahr1545
    @noahr1545 2 года назад +4

    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
      @ChrisCourses  2 года назад

      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
      @noahr1545 2 года назад

      No problem!

  • @forati
    @forati 2 года назад +5

    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.

  • @romansalazar1371
    @romansalazar1371 2 месяца назад +1

    Lol, first time here, and I see we all woke up here. What’s up guys!

  • @billallwell6507
    @billallwell6507 3 месяца назад

    What an absolutely superb course. Covers heaps of practical ground. Nearly through it all, will have to revise a bit, so much great content.

  • @trevorfranks69
    @trevorfranks69 2 года назад +3

    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
    @trashinGame 2 года назад +32

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

  • @bobibobi-v8b
    @bobibobi-v8b Год назад +1

    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

  • @the_kid777
    @the_kid777 5 месяцев назад

    I just cannot tell you how many times you have saved my life. Thank you. Another problem solved, thanks to you.

  • @idonthaveone60
    @idonthaveone60 5 месяцев назад +1

    I'm not the only one who fell asleep on yt and woke up to this playing?

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

  • @ritarshichattaraj9552
    @ritarshichattaraj9552 2 года назад +2

    You have changed my perspective on game dev!!

  • @adefunkeadedoyin9338
    @adefunkeadedoyin9338 2 года назад +2

    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
      @ChrisCourses  2 года назад +3

      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
      @adefunkeadedoyin9338 2 года назад

      @@ChrisCourses thanks man. God bless 🚀🚀

  • @djneils100
    @djneils100 2 года назад +2

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

  • @andydataguy
    @andydataguy 2 года назад +3

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

  • @jgvlc
    @jgvlc 2 года назад +9

    Thank you very much Chris, your tutorials are fantastic!

    • @ChrisCourses
      @ChrisCourses  2 года назад +1

      Glad you think so! Got more on the way 💪

  • @marlonvasquez6531
    @marlonvasquez6531 4 месяца назад

    I guess I’ve joined the crew of people who’ve randomly woken up to this channel 😭 I was 1 hour and 10 minutes in-

  • @Blockbuster-qx4xp
    @Blockbuster-qx4xp 3 месяца назад

    Fell asleep and woke up here but that’s cool because coding is my dream

  • @djoezi3662
    @djoezi3662 2 года назад +2

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

  • @abhijitbarman4401
    @abhijitbarman4401 2 года назад

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

  • @fmi1632
    @fmi1632 2 года назад +1

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

  • @forrestdick2104
    @forrestdick2104 5 месяцев назад

    Fell asleep watching I don’t remember what, woke up in the middle of the night to this playing, just like half of YT, apparently. 😅

  • @rustyrustan
    @rustyrustan 2 года назад +1

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

  • @adamjankowski5755
    @adamjankowski5755 2 года назад

    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!

  • @hylianreyes2611
    @hylianreyes2611 6 месяцев назад +1

    BAHAHAHA EVERYONE FELL ASLEEP WITH THIS VIDEO 😭😭 (I laugh at myself too cause I also woke up to this video 😭)

  • @daveinpublic
    @daveinpublic Год назад +2

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

  • @icybear7792
    @icybear7792 6 месяцев назад +1

    no kidding, just woke up to this

  • @machochocolate7679
    @machochocolate7679 Год назад

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

  • @simon-hb7wf
    @simon-hb7wf 2 года назад +1

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

    • @ChrisCourses
      @ChrisCourses  2 года назад

      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
      @simon-hb7wf 2 года назад

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

  • @Tomisthere
    @Tomisthere 7 месяцев назад

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

  • @__themisanthrope__
    @__themisanthrope__ 5 месяцев назад

    Why do this guy pop up only when I fall asleep? I WAS WATCHING CLIPS OF 90-DAY FIANCE!!

  • @LonzCantiLife
    @LonzCantiLife 2 месяца назад

    woke up to this as well. i need my music to start randomly being suggested to people who are asleep 😂

  • @anawan
    @anawan 2 года назад

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

    • @ChrisCourses
      @ChrisCourses  2 года назад

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

  • @martinbobbio1
    @martinbobbio1 Год назад

    Thank you a lot Chris. I love your courses.

  • @otisrancko
    @otisrancko 2 года назад

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

  • @johanngerhardt401
    @johanngerhardt401 Год назад +1

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

    • @egostan
      @egostan 7 месяцев назад

      @@Gregor__Samsa have the same issue. it didn't help

  • @chomok-bd
    @chomok-bd 2 года назад

    It’s awesome bro. Learning a lot.

  • @user-mp9mp6dd2h
    @user-mp9mp6dd2h 2 месяца назад

    Goodmorning!❤🎉

  • @Sinnercorpse
    @Sinnercorpse 3 месяца назад

    i fell asleep watching crime podcast and i wake up to this XD

  • @MsDoIIy
    @MsDoIIy 6 месяцев назад

    Man I woke up to this and let's say that my brain did not register the talking very well. I was at a college in Eureka, yes the show and was walking through a class that I was like woah I do not belong here because the professor was him 😂 somehow I got my arm injured going down the stairs and the professors at the college wanted to give me a new and improved arm. I was sleeping on my arm funny so it was going numb. So funny 😅

  • @vin2368
    @vin2368 2 года назад

    This is Awesome Bro :)

  • @zippityzoop1478
    @zippityzoop1478 7 месяцев назад

    I keep waking up to this video I can’t believe it’s happening to others too

  • @planetaryescape5794
    @planetaryescape5794 7 месяцев назад

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

  • @taranewstime6909
    @taranewstime6909 2 года назад +1

    Really awesome 👍🙏

  • @wisdomochei
    @wisdomochei 2 года назад +1

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

    • @ChrisCourses
      @ChrisCourses  2 года назад +1

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

  • @JasonRobards2
    @JasonRobards2 2 года назад

    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
      @JasonRobards2 2 года назад

      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
      @JasonRobards2 2 года назад

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

  • @thecosmicmyth2164
    @thecosmicmyth2164 3 месяца назад

    Is this man Santa Claus?! How are all of us waking up to him??

  • @oiiijosukee
    @oiiijosukee 5 месяцев назад +1

    Making a tally of how many times I wake up to this:
    1
    2

  • @spanch1bobr
    @spanch1bobr 2 года назад

    your explaintions are so good.

  • @ARandom.Channel.
    @ARandom.Channel. Год назад

    I fell asleep watching cube marching and woke up to this

  • @austinfaw3640
    @austinfaw3640 6 месяцев назад

    @ChrisCourses what theme do you use in VS?

  • @SkunkonHeels
    @SkunkonHeels 7 месяцев назад

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

  • @universecode1101
    @universecode1101 2 года назад +2

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

    • @ChrisCourses
      @ChrisCourses  2 года назад

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

  • @HuynhLuong227
    @HuynhLuong227 2 года назад +1

    Great! Many thank

  • @Westypoo
    @Westypoo 3 месяца назад

    I just watched 3 of these vids in a row while sleeping💀

  • @aionair77
    @aionair77 2 года назад

    GO CHRIS!

  • @christophersvatora6658
    @christophersvatora6658 7 месяцев назад

    So everyone is also waking up to this guy 💀

  • @D.schlich303
    @D.schlich303 2 месяца назад

    Bro same here, just woke up to this video!! I literally have never watched coding videos and was watching police/1st amendment audit videos.. Crazy

  • @loicmakassoeti3209
    @loicmakassoeti3209 2 года назад

    You're a legend. Insane content.

  • @NoFaceDev
    @NoFaceDev 2 года назад

    Thank you for your work i like how you doing videos

  • @Bien_the_Degenerate_Weeb
    @Bien_the_Degenerate_Weeb 6 месяцев назад +1

    Bro why do I keep waking up here

  • @marcelo.victor
    @marcelo.victor 2 года назад

    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!

  • @chetanuzumaki9581
    @chetanuzumaki9581 2 года назад

    Awesome brother thanks for ur hardwork

    • @ChrisCourses
      @ChrisCourses  2 года назад

      No prob, thanks for watching 🙏

  • @jonathanmanner5616
    @jonathanmanner5616 2 года назад

    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
      @WyzrdCat 2 года назад

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

  • @sixunity1171
    @sixunity1171 3 месяца назад

    i fell asleep, wake up to this playing in the morning
    what

  • @Suzuhara
    @Suzuhara 2 года назад

    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.

  • @kashmirtechtv2948
    @kashmirtechtv2948 Год назад

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

  • @noir66146
    @noir66146 11 месяцев назад

    time well spent !

  • @cuauhtemocestrada2192
    @cuauhtemocestrada2192 2 месяца назад

    At this point, how many of the views on this video are actually of people trying to learn to code? I fell asleep to soccer videos and woke up an hour into this one lol

  • @namyak-bf9od
    @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

  • @davebacknolaliki1452
    @davebacknolaliki1452 6 месяцев назад +1

    I wonder how many views this has vs how many sleepy people have visited haha.

  • @DansRealm1234
    @DansRealm1234 3 месяца назад +1

    I woke up to this too??? Why did this happen to everyone??

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

  • @aftercyberneticrp
    @aftercyberneticrp 2 года назад

    The best!

  • @tome343
    @tome343 Год назад

    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?

  • @unixrebel
    @unixrebel Год назад

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

  • @pedromesquita9806
    @pedromesquita9806 Год назад

    You rock!

  • @babaakshay
    @babaakshay 2 года назад

    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.

  • @abrahamnwideezua
    @abrahamnwideezua Год назад

    how did you get the sprite

  • @i-lack-creativity
    @i-lack-creativity 9 месяцев назад

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

  • @ashiwashi
    @ashiwashi 6 месяцев назад

    damn i also just woke up to this half way through lol