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

[@RoddieH]

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]

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.

[@cleverprogrammeruz]

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

[@CodingWithAdam]

Glad you enjoyed the video!

[@daffydooms7953]

it is indeed just very good

[@rutsoluo]

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]

Thank you. Great job finding that bug 😀

[@RoddieH]

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

[@CodingWithAdam]

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

[@josephcieplak8920]

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

[@CodingWithAdam]

You’re welcome!

[@databasemadness]

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

[@CodingWithAdam]

Thank you Danish! 😁

[@edtrewin]

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]

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 😁

[@benbrown1143]

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

[@CodingWithAdam]

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

[@theotaylor5301]

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

[@CodingWithAdam]

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

[@BryanChance]

Brilliant! Very concise and great presentation. Thank you.

[@CodingWithAdam]

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

[@aldesianvero]

Your tutorials are amazing! Love the UI!

[@CodingWithAdam]

Thank you! I really appreciate the feedback 😁

[@llamazing4326]

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

[@CodingWithAdam]

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

[@Radu]

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

[@CodingWithAdam]

Thank you for the subscribe!

[@karolyenyed9264]

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]

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.

[@dinoman3947]

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]

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

[@robertom7326]

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

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

[@norman8823]

This is incredible! Do you do zoom mentoring sessions?

[@CodingWithAdam]

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

[@CodingWithAdam]

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.

[@benatakaan613]

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]

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

[@scottatkinson7649]

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

[@mohammadmeraj40]

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

[@technologic3739]

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]

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]

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

[@plutothepon32]

Thanks for incredible guide

[@CodingWithAdam]

You’re welcome!

[@rhlgm]

You are pro developer

[@CodingWithAdam]

Thanks you for the kind words!

[@PhilipJones]

This is amazing!!!! Thank you so much

[@CodingWithAdam]

Thank you! You’re welcome 😀

[@animalemagico7131]

Great video :) You are a phenomenal teacher!

[@CodingWithAdam]

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

[@cleverprogrammeruz]

Thank you Mr

[@CodingWithAdam]

You’re welcome!

[@pcatgames6449]

Great tutorial!

[@CodingWithAdam]

Thank you!! 😁

[@pf.1396]

this is make with threads?

[@CodingWithAdam]

No threads it uses a game loop.

[@herrmaloch]

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

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]

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

[@user-pc3jv6zb6j]

thank you for an amazing tutorial

[@CodingWithAdam]

You’re welcome! 😃

[@hdevlopjebara4385]

Thank you!! It's really helpful 🙂

[@CodingWithAdam]

You’re welcome!

[@vloggingwithmichael7635]

The .png doest show . It cant connect.

[@CodingWithAdam]

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

[@joaquin5007]

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]

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!

[@dwaynedlamini9571]

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

[@CodingWithAdam]

Thank you for the suggestion!

[@RicardoMartinez-ue9ts]

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

[@CodingWithAdam]

For sure it’s totally possible to add that.

[@RicardoMartinez-ue9ts]

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

[@elescritoriodejasso]

Excelente!

[@CodingWithAdam]

Thank you!

[@chickenlord5369]

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

[@user-xj1ds6hb3e]

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

[@user-xj1ds6hb3e]

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]

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

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

@@williamhorn411 thanks

[@randomguy4822]

is it compatible to play on smartphone ?

[@CodingWithAdam]

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]

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]

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]

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]

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]

You're welcome! Glad to help!

[@rubentxogg2280]

Thank you very much, I enjoyed a lot!

[@CodingWithAdam]

You're welcome! 😁

[@dwaynedlamini9571]

Hey Adam, I have a issue with this coding

[@dwaynedlamini9571]

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

[@CodingWithAdam]

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