Coding Space Invaders in JavaScript Complete Tutorial Every Step Explained with HTML5 Canvas

แชร์
ฝัง

ความคิดเห็น • 96

  • @RoddieH
    @RoddieH 3 หลายเดือนก่อน +2

    Honestly, Adam, your videos and channel deserve way more views and subs. I'm not a coder or dev, and have no desire to be one (I'm a few years from retiring out the Network world), but I do enjoy dabbling from time to time or teaching myself enough code to use for a work task, and sometimes even just exercising my brain.
    On a whim I decided to follow your tutorial because I've never actually used JavaScript before and I was curious to see how it flows. I'm only just starting, but I'm already absorbing a lot of it, and I'm already having ideas in my head about how to implement the barriers at the bottom (building them like bullets, maybe?) or adding the enemy that randomly floats across the top. Whether this motivation sticks, who knows, but I just wanted to throw out a thanks.

    • @CodingWithAdam
      @CodingWithAdam  3 หลายเดือนก่อน +2

      Thank you, Roddie, I really appreciate your comment and kind words! I'm extremely glad that you enjoyed the tutorial and have plans to expand on the game. It’s always exciting to hear how viewers like yourself are finding inspiration and coming up with new ideas.
      I really enjoy making videos when I can find the time and always appreciate feedback. Comments like yours let me know that the videos are having an impact, and I’m always open to suggestions if there’s anything specific you’d like to see in the future. I’m hoping that the channel can continue to grow over time.

  • @databasemadness
    @databasemadness 2 ปีที่แล้ว +4

    This channel is about to blow up! Love your tutorials man! You are a master

  • @cleverprogrammeruz
    @cleverprogrammeruz 2 ปีที่แล้ว +3

    I'm from Uzbekiston. This video just very good.

    • @CodingWithAdam
      @CodingWithAdam  2 ปีที่แล้ว +1

      Glad you enjoyed the video!

    • @daffydooms7953
      @daffydooms7953 2 หลายเดือนก่อน

      it is indeed just very good

  • @josephcieplak8920
    @josephcieplak8920 2 ปีที่แล้ว +6

    I ddid really learn a lot with your previous game Pac-man. thank you so much!

  • @edtrewin
    @edtrewin ปีที่แล้ว +2

    Hey Adam, keep up the "great" work. Coding aside, I could not avoid feeling nostalgic though. My son loved it, and it has boosted his interest in programming, Thanks!!!!

    • @CodingWithAdam
      @CodingWithAdam  ปีที่แล้ว +1

      Thank you Eduardo! Happy to bring back some nostalgia with this Space Invaders tutorial. I'm really glad that your son loved the video and that it helped to boost his interest in programming 😁

  • @theotaylor5301
    @theotaylor5301 2 ปีที่แล้ว +2

    Almost got 50 videos mate 6 more to go! it will be a milestone, keep it up!

    • @CodingWithAdam
      @CodingWithAdam  2 ปีที่แล้ว +1

      Thanks Theo! I appreciate the support. It’s amazing to think Coding with Adam is close to 50 videos that’s exciting!!!

  • @rutsoluo
    @rutsoluo 5 หลายเดือนก่อน +2

    Great video! but there is a tiny bug. to reproduce:
    1. shoot all the enemies in the middle columns
    2. avoid the enemies and enemy bullets
    3. Eventually all the enemies will go past the player
    4. Actual: player will not win or lose
    5. Expect: player to lose as the original Space Invader as enemies invade your base

    • @CodingWithAdam
      @CodingWithAdam  4 หลายเดือนก่อน +2

      Thank you. Great job finding that bug 😀

    • @RoddieH
      @RoddieH 3 หลายเดือนก่อน +1

      FWIW - This was an actual strategy back in the day when there were infinite clones of Space Invaders floating around arcades.

    • @CodingWithAdam
      @CodingWithAdam  3 หลายเดือนก่อน

      @@RoddieH That is awesome! I did not know that.

  • @benbrown1143
    @benbrown1143 10 หลายเดือนก่อน +1

    Great tutorial man! Thanks for making it! Just finished creating the game and it's pretty awesome.

    • @CodingWithAdam
      @CodingWithAdam  10 หลายเดือนก่อน +1

      You’re welcome! Thank you for taking the tutorial. I’m really glad you enjoyed it! 😁

  • @aldesianvero
    @aldesianvero ปีที่แล้ว +3

    Your tutorials are amazing! Love the UI!

    • @CodingWithAdam
      @CodingWithAdam  ปีที่แล้ว +3

      Thank you! I really appreciate the feedback 😁

  • @BryanChance
    @BryanChance ปีที่แล้ว +2

    Brilliant! Very concise and great presentation. Thank you.

    • @CodingWithAdam
      @CodingWithAdam  ปีที่แล้ว +1

      Thank you for the wonderful feedback! 😁
      I’m glad you enjoyed the tutorial!

  • @Radu
    @Radu 2 ปีที่แล้ว +2

    Nice! I see you have quite many things on your channel. Subscribed!

  • @dinoman3947
    @dinoman3947 ปีที่แล้ว +2

    this is a very good tutorial. i would request you to improve this game by created more parts which features powerups, random enemies spawning locations and changing the background. Wishing you well❤❤

    • @CodingWithAdam
      @CodingWithAdam  ปีที่แล้ว +1

      Thank you! Glad you enjoyed the tutorial. Thank you for the suggestions. 😄

  • @benatakaan613
    @benatakaan613 2 ปีที่แล้ว +3

    Your tutorials are amazing! Love the UI! Thank you for doing such a great job.Do you plan on sharing tips around how to add different levels and score keeping to your games?

    • @CodingWithAdam
      @CodingWithAdam  2 ปีที่แล้ว +2

      Thank you Ben! Those are great suggestions! I’ll consider them for the future.

    • @scottatkinson7649
      @scottatkinson7649 2 ปีที่แล้ว

      @@CodingWithAdam Ho Adam I loved this tutorial. I've managed to make it mobile friendly but would be great if you added particles on death's and a scoring system

  • @karolyenyed9264
    @karolyenyed9264 ปีที่แล้ว +2

    Hey Adam! Good job! I like your video! I'm wondering how would you add different music if you win or if you lose? And how would you create a restart function? Thanks in advance!

    • @CodingWithAdam
      @CodingWithAdam  ปีที่แล้ว +2

      Thank you. For win or lose audio you just need to add a new audio file and play the file when the player wins or losses. For restart you could simple write a function to refresh the browser when a certain key is pushed or button is pressed.

  • @llamazing4326
    @llamazing4326 ปีที่แล้ว +2

    Thanks, I’m doing this for a school project but I haven’t learned parts of it yet

    • @CodingWithAdam
      @CodingWithAdam  ปีที่แล้ว +1

      You’re welcome! That’s great and good luck with your school project.

  • @animalemagico7131
    @animalemagico7131 ปีที่แล้ว +1

    Great video :) You are a phenomenal teacher!

    • @CodingWithAdam
      @CodingWithAdam  ปีที่แล้ว +1

      Thank you!!! I’m really happy that enjoyed the video and teaching style 😁

  • @PhilipJones
    @PhilipJones 2 ปีที่แล้ว +3

    This is amazing!!!! Thank you so much

    • @CodingWithAdam
      @CodingWithAdam  2 ปีที่แล้ว +1

      Thank you! You’re welcome 😀

  • @plutothepon32
    @plutothepon32 2 ปีที่แล้ว +3

    Thanks for incredible guide

  • @rhlgm
    @rhlgm 2 ปีที่แล้ว +2

    You are pro developer

    • @CodingWithAdam
      @CodingWithAdam  2 ปีที่แล้ว +1

      Thanks you for the kind words!

  • @pcatgames6449
    @pcatgames6449 ปีที่แล้ว +2

    Great tutorial!

  • @hdevlopjebara4385
    @hdevlopjebara4385 2 ปีที่แล้ว +2

    Thank you!!
    It's really helpful 🙂

  • @technologic3739
    @technologic3739 2 ปีที่แล้ว +1

    So I'm still learning js and watching this tutorial, am at 00:12:12 currently but I have a ton of questions, hope you don't mind answering!
    1. How does the forEach work in this case?
    2. Are there any ways to create the enemyMap dynamically shown in the tutorial?
    3. row, rowIndex, enemyNumber, enemyIndex wasn't intialised(?) before it was called in the forEach loop, and yet, the code works, how does that work?

    • @technologic3739
      @technologic3739 2 ปีที่แล้ว +1

      Got it solved, just an issue with this.canvas.width now at 25:12, can't seem to pinpoint where my issue is at.

    • @CodingWithAdam
      @CodingWithAdam  2 ปีที่แล้ว +1

      Great keep making progress. Maybe the canvas was not set on the constructor if you are getting a null reference error.

  • @robertom7326
    @robertom7326 ปีที่แล้ว +1

    @coding with Adam, Thanks for the tutorial. I was wondering if you could do a tutorial on an ISS app tracker, or if you know of one that you can share...using JS. Thanks again.

    • @CodingWithAdam
      @CodingWithAdam  ปีที่แล้ว +1

      You’re welcome. Thanks for the suggestion. I’m not aware of any tutorials on that topic.

  • @norman8823
    @norman8823 2 หลายเดือนก่อน +1

    This is incredible! Do you do zoom mentoring sessions?

    • @CodingWithAdam
      @CodingWithAdam  2 หลายเดือนก่อน

      You’re welcome! At this time I do not offer that but I like the suggestion and might offer that in the future 😀

    • @CodingWithAdam
      @CodingWithAdam  2 หลายเดือนก่อน

      For reference if you do not mine I’m wondering what kind of mentoring are you looking for? For example Career advice, Which technologies to learn for web development etc.

  • @user-pc3jv6zb6j
    @user-pc3jv6zb6j 2 ปีที่แล้ว +2

    thank you for an amazing tutorial

  • @herrmaloch
    @herrmaloch 11 หลายเดือนก่อน +1

    @CodingWithAdam Please help!! I want to adapt your game for mobile. I want to add three buttons under the canvas screen, LEFT RIGHT FIRE. So that all the functionality for the mobile version of the browser is in three buttons. How can I do this. Thanks a lot!🙏🙏

    • @CodingWithAdam
      @CodingWithAdam  11 หลายเดือนก่อน +1

      That’s awesome you would like to make the space invaders game mobile friendly. You can check out my Dino jump tutorial for some inspiration on adding mobile controls. Perhaps some time in the future I will make a version of the tutorial using mobile controls.
      If you are adding html buttons bellow you can have the click events update the values that control moving the ship left to right.

    • @herrmaloch
      @herrmaloch 11 หลายเดือนก่อน +1

      @@CodingWithAdam please tell me, could you help me with creating buttons, I will be very grateful to you🙏🙏🙏! I'm just still learning) I liked your project. Can I contact you somehow, by mail, Thank you very much for your answer!

  • @cleverprogrammeruz
    @cleverprogrammeruz 2 ปีที่แล้ว +2

    Thank you Mr

  • @BaeristaVR
    @BaeristaVR 9 หลายเดือนก่อน +1

    The .png doest show . It cant connect.

    • @CodingWithAdam
      @CodingWithAdam  9 หลายเดือนก่อน +1

      Make sure to use live server and check the url for the png

  • @joaquin5007
    @joaquin5007 2 ปีที่แล้ว +1

    hello I'm having some issues the background as i am trying to pull the image from my personal photo library . Any ideas why it's not working . i keep getting some sort of syntax error

    • @CodingWithAdam
      @CodingWithAdam  2 ปีที่แล้ว +1

      If it’s a syntax error it might be a typo. Make sure to put the photo in the same folder as the project as well. Hopefully that helps!

  • @mohammadmeraj40
    @mohammadmeraj40 9 หลายเดือนก่อน

    Very good if can u teach me how can I arrow icons set on this game very very nice👍❤️❤️❤️❤️

  • @pf.1396
    @pf.1396 8 หลายเดือนก่อน +1

    this is make with threads?

    • @CodingWithAdam
      @CodingWithAdam  8 หลายเดือนก่อน +1

      No threads it uses a game loop.

  • @elescritoriodejasso
    @elescritoriodejasso 2 ปีที่แล้ว +2

    Excelente!

  • @rubentxogg2280
    @rubentxogg2280 2 ปีที่แล้ว +2

    Thank you very much, I enjoyed a lot!

  • @dwaynedlamini9571
    @dwaynedlamini9571 2 ปีที่แล้ว +1

    If you ever find the time, could you make a race car game tutorial

  • @chickenlord5369
    @chickenlord5369 2 ปีที่แล้ว

    Why won't any of my canvas or background lines on index.js be read as code, I am using Visual studio code

  • @dwaynedlamini9571
    @dwaynedlamini9571 2 ปีที่แล้ว +1

    Hey Adams, am having problems. When I press the space button, nothing happens. Am not sure if anyone else is facing this problem as well.
    Cause I dnt know if I need to blue another keyboard cause the space button works fine. It's jst that I don't know why it isn't working on developing the game

    • @CodingWithAdam
      @CodingWithAdam  2 ปีที่แล้ว

      Hi I’m sure your keyboard is fine. There is most likely an error in the code. In the keyboard event try doing a console log to see what is being outputted. You can also compare it to the completed solution github.com/CodingWith-Adam/space-invaders
      You can also try the demo to see if it works codingwith-adam.github.io/space-invaders/index.html

    • @dwaynedlamini9571
      @dwaynedlamini9571 2 ปีที่แล้ว +2

      Hey Adam,you were ryt, I messed up the coding cause there was a certain part where I was suppose to use a uppercade letter n I used lowercase.
      I like to say thank you for your teachings n God bless

    • @CodingWithAdam
      @CodingWithAdam  2 ปีที่แล้ว +1

      You're welcome! Glad to help!

  • @RicardoMartinez-ue9ts
    @RicardoMartinez-ue9ts ปีที่แล้ว +1

    Is it possible to add a score counter as it is removed?

    • @CodingWithAdam
      @CodingWithAdam  ปีที่แล้ว +1

      For sure it’s totally possible to add that.

    • @RicardoMartinez-ue9ts
      @RicardoMartinez-ue9ts ปีที่แล้ว +1

      @@CodingWithAdam
      Could you help me in which part of the code is it possible?

  • @user-xj1ds6hb3e
    @user-xj1ds6hb3e 2 ปีที่แล้ว +1

    How would you do a collision detection for a single sprite eg a single enemy

    • @user-xj1ds6hb3e
      @user-xj1ds6hb3e 2 ปีที่แล้ว +1

      Also how would you do it for a specific sprite because I have one sprite that is just in the background and another one which is the actual enemy to hit

    • @williamhorn411
      @williamhorn411 2 ปีที่แล้ว +2

      @@user-xj1ds6hb3e you just have to make sure that p2.right > p1.left && p2.bottom > p1.top && p2.left < p1.right && p2.top < p1.bottom

    • @CodingWithAdam
      @CodingWithAdam  2 ปีที่แล้ว +2

      @@williamhorn411 @S that's right William and here is a reference from MDN developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection

    • @user-xj1ds6hb3e
      @user-xj1ds6hb3e 2 ปีที่แล้ว +1

      @@williamhorn411 thanks

  • @randomguy4822
    @randomguy4822 2 ปีที่แล้ว +1

    is it compatible to play on smartphone ?

    • @CodingWithAdam
      @CodingWithAdam  2 ปีที่แล้ว +2

      It could be made comparable by adding touch controls to move left and right. Touch the left side of the screen move left. Touch the right side move right. Thanks for the suggestion.

  • @sevenc7540
    @sevenc7540 ปีที่แล้ว

    i just follow your step, but i am get stuck in 20mins, it's said Uncaught TypeError:(intermediate value).draw is not a function
    game index.js:10
    setInterval handler* index.js:12
    Can anyone Help me!!?

  • @dwaynedlamini9571
    @dwaynedlamini9571 2 ปีที่แล้ว +1

    Hey Adam, I have a issue with this coding

    • @dwaynedlamini9571
      @dwaynedlamini9571 2 ปีที่แล้ว +1

      When I seem to type in the enemyMap n array, my projects seems to give a error n disappears.

    • @CodingWithAdam
      @CodingWithAdam  2 ปีที่แล้ว +1

      Sorry to hear that. I hope you resolved it. If not take a look at the complete project linked in the description.