Space Invaders Game Tutorial with JavaScript and HTML Canvas
Vložit
- čas přidán 27. 05. 2024
- Learn how to code more games at: chriscourses.com/courses
Game Assets: drive.google.com/drive/folder...
Space Invaders is a classic game that you should be able to find at any retro-based arcade. Surprisingly, coding it with JavaScript isn't that difficult, we just need to know few concepts regarding image rendering, physics, and object interaction. Here I'll teach you all of that and more using a combination of HTML and vanilla JavaScript.
00:00 Project intro
01:56 Project setup
07:20 Create a player
21:39 Move the player
37:09 Create projectiles
47:15 Create an invader
51:34 Create and move grids of invaders
1:07:32 Spawn grids at intervals
1:13:42 Shoot invaders
1:22:34 Take into account new grid width
1:26:32 Invaders shoot back
1:36:47 Enemy explosions
1:49:05 Create background stars
1:54:20 Lose condition
1:58:04 Score
2:02:32 Fixed-width canvas
What games do you want to see next? 👀
Dinasour game
Anything in react? I was following your last game and it was a little tough for someone learning react and canvas. But Man, thanks so much your videos are helpful!
Pokemon
Can subway surf for me please if you making this game pls add source codes please
Thanks for the great video Chris! Could you make a video explaining how to get these games on to the playstore and apple app store.
Dude I remember watching your videos in college and now I'm a frontend developer. Thanks for the tutorials bro
Hellz yeah dude. Funny thing is, I watched a tutorial guy when I first started, and I attribute my first job to him 100%. Glad I've been able to help you get there, but no doubt, that's the result of the hard work you put in yourself 🙌
Dope!
Dude will you help me please what should learn for frontend developer? I am currently doing job as Software tester, i am satisfied with my job but i really want to learn skills for frontend
Beautifully explained. I like how he walks us through his thought process to write a clean code.
Another game, Christmas coming in January this year, thanks Chris :D
Thinking we'll both get early Christmas gifts this year with 100k plaques 👀
Wow franks u come here
I changed so many things to experiment, but your tutorial is really good :)
thank you for making this available to us for free
Thanks Chris loved your whole tutorial and made this game in 6 hours
can u give the code please?
exactly what i was looking for
thanks man, your tutorial was very helpful.
This is such a high quality content
I like the stock , great video
am learning a lot from you... thank you for the Hokage style of teaching....
Finally 18:45 show how to get image size correctly, been struggle get image size for your other mario tutorial.
Wow, thanks for sharing this!
Loved your HTML & CSS course, kindly (& please) make a course on JS & React 🙏
These Vids are super helpful. I managed to follow along and recreate it perfectly. I spent hours looking for small syntax errors that broke the game lol. Anyways im trying to do custom power - ups rn but it got complex fast. Even rockets are hard.
Sweet Jesus!
This is gold 🥇 🙏 Gracias! 🎊
Thank you. This is very good.
Hello, it's a very great tutorial, thanks a lot!
U re a legendary teacher.....plz bring more tuts
I'm making a simple JS game as a project to familiarize myself with the language, and I exactly had that 'flashing projectile' problem as you mentioned in 46:25 and your solution works like a charm! I have no idea why setTimeout will do the trick, but many thanks nonetheless.
that is really a wonderful video
Wow! My favorite game of all times!!
Hi Chris, Im following through your tutorial but I got an error of " Uncaught TypeError: Cannot destructure property 'position' of 'undefined' as it is undefined. " , the code at
class InvaderProjectile {
constructor({ position, velocity }) {
this.position = position;
Its at 1:27:48 there.
My invaders spawn but immediately disappear due to the above error when it tries to fire a projectile.
Great value like always. Would love you to cover a canvas tut where a text is composed to particles and moving mouse over it spreads the particles and when the cursor is out of range, they re-arrange into the alphabet. Please man :(
There's a channel called Frank's Labrotories... you should give him a watch too
Hello! I try to use some logics to my project, you know why my projectile leaves the trail of its journey ?
really help helpful
let me tell you smoething , i just found out your channel & im totaly blow mind . 1+ follow , you Deserve it
This might be a little far fetched. But, I’m so close to finishing a project I’m about 2 more major steps away, is there some place I can reach out to you and ask you how you would approach it? Thanks a ton on the vids man would definitely not be as close as I am without them!
Hi Chris. I really love your videos and how you explain everything so well. I was wondering where do I find the video of the Premium part. Is it something like extra payment or what?
Yea it's an extra payment
Chris, my spaceship image is very pixelated! Any ideas? I am following along using vscode and google chrome.
Great one! praise be to God
How were you able to keep your ship image from leaving the trail when moving?
I didn't see you input any
context.clearRect()
within draw to clear canvas
I was wondering the same thing. I think on his animate function he refills the background black every time which I assuming paints over the old image. 26:44, you can see at line 52.
@@anthonybarragan1603 But it is not working for me
@@debsarkar4893 In the draw() method, write: c.fillRect(0, 0, canvas.width, canvas.height);
Yes, I love using Sublime Text too.
subl . 👍
Hi.
align-items: center; doesn't work (2:04:29). The canvas is still on the middle, but top border of the frame.
Any suggestions?
Great content, thank you! I'm trying to figure out how I might load different sprites for player, like bent to the left when you press a and to the right when you press d. Do you have some hints about how to achieve this?
Great guide, is there a simple way to prevent spamming shoot key to annihilate enemies (like for example allow to press key only once per 2secs)? Right now i can just hold the key and it will draw tons of deadly projecticles against invaders.
I used a setTimeout() to change a projectileDelay variable that is checked every time the fire key is pressed, this way you can even code so the player can hold the fire button all the time and so different powerups can change the fire rate
@@Wr4ptor ty for pointing out👍. I'm still learning js and coding a game like this is really hard. I haven't worked with this project since then, but I managed to implement sound effects, basic background music and death screen 😂
@@Firzj I'm learning JS by making games, and right now I'm using parts of this, and from other videos of ChrisCourses to make a Gradius type game (sidescroller space shooter). I like to get an idea, start on it, learn as I go, change what I learn from others and try and improve and adapt to my own use.. to me that's a fun way of learning and forcing myself to figure out how things work. I kind of regret that I have not coded in so many years...
so i got a few problems:
- i have put all of the things needed in tje JS file, but it just doesnt get the 300x150 canvas i gave it in html, so it doesnt collide with the sides,
and with the movement:
- if i put the velocity values the same, so 3 for me, the D goes faster then the A in speed,, and i cannot find the problem
good job bro
when filling the background of the canvas with black using rgba(0, 0, 0, 0.9) in the fillStyle, why is the alpha channel ignored?
What's the name of Todo app you're using?
I need the game complete,please,i have a problem with move grids
The hardest thing for me was to keep everthing in order... Isn't it common to put classes in own files (like java e.g) ?
When I hold space, there are multiple projectiles, which makes the game way too easy. Any idea how to fix that?
I used simple boolean expressions and if statements at the eventlisteners.
In the keys object, add:- space:{pressed: false}
/* In the keydown eventlistener: */
case " ":
if(!keys.space.pressed){
projectiles.push(new Projectile(player, playerProjectileSpeed));
keys.space.pressed = true;
}
break;
/* In the keyup enventlistener: */
case " ":
keys.space.pressed = false;
break;
when i press space for fire the projectiles, it spawns multiple of them like i'm holding the spacebar, how do i fix that?
apply an additional 'flag' in your code ;)
Is there another free tutorial I can watch to improve the game?
hi,
i still don't understand those setTimeout calls with 0...
Hi, I'm a new Mack owner, I noticed in your video that you use a nice app for tasks to be done. What name can I find it under? I would like to install the same
Anyone found a why to keep shoot if the space button is down?
Thanks sir
Which intellisense is being used. Mine isn't giving any relevant info.
I've also tried to make this game but stuck in calculate plane shoot obejcts and remove them I've tried so much but no enough knowledge to solve that 😔😔
@48:45 There is probably a room for memory usage optimisation. Since for each Invader new image is created and loaded, much memory is wasted. Shouldn't it be better, to create one image in global scope (or pass it as argument to constructor) and reference to it? It's should save much memory, especially for larger images or many enemies. I'm pretty new to javascript, so would be cool to hear someone else validation or disagree to my idea! :)
Hey, it’s been 10 months. Did you find out if this is true?
@@maybeafish6884 I had not enough time to test it, but I still prefer to load image once and refer to it, instead multiple Images/loads.
Is this a full tutorial or are parts missing? I don’t want to invest to much time in until I know. This is for a school project.
Can this be completed with Javascript? (Not vanilla Javascript)
Is there a link to fork the cod?
I left a question on here but it has been deleted?
Please upload javascript full course tutorial ....
hey what do i do if the projectiles arent rendering=
Make sure you're looping through them within your animate loop and calling their .update() method. Sometimes I call .draw() by accident instead and things don't render correctly.
I just wonder why don't you use a framework like a Phaser, it's great, or you just want to show what's possible with JS/Canvas, but I also wonder what could you do with game framwork :) Today I found your channel, I am couries mostly about multiplayer, thank you for the best game tutorials I've ever seen
Can kindly share the full source code?
Can you make this game mobile friendly
does someone got the code?, i keep following his steps but it doesn't work and i don't know why, i am really going to be crazy pleas help
Boss!
is it working fine?
a sword fighting game with following Top Down 2D camera
27:04 at this point mine was showing that it could not identify this.position.x
same
your comment is old but just in case anyone has this problem still, delete player.draw() from line 50 and you shouldn't get the error anymore
36:12 wouldn't it just be easier to load rotated sprites at the moment of appropriate button press. O_o!
I'm actually trying to figure out how to do it, can you give me some advice? I'd hugely appreciate that!
Anyone else have the spaceship just stretch instead of move?
Fixed it in case someone else has this issues. In the draw() method, write: c.fillRect(0, 0, canvas.width, canvas.height);
before drawing the image. It'll reset it
put code in description
Can I pay for just this game instead of whole year please
Yeah for sure, I don't have single payments set up on Chris Courses for this course just yet, but you can one-time buy it on Udemy here: www.udemy.com/course/space-invaders-with-javascript-and-html-canvas/?referralCode=C3614BE29E085052A32E
Daddy
UwU
I watched this video and the code didn't work. I double checked multiple times.
ok
Dude I am new subscriber so Please upload javascript full course tutorial beginner to master class so please upload javascript tutorial video step by step...
I there a way to do this without using classes
ñ
Thank you , very good tutorial . 9/10 . 1 mark lost for the number of times you say ' I'm gonna go ahead ' or slight variations . We know that you're going to go ahead . It's redundant filler & bloody irritating.
when i press space for fire the projectiles, it spawns multiple of them like i'm holding the spacebar, how do i fix that?
I used simple boolean expressions and if statements at the eventlisteners.
In the keys object, add:- space:{pressed: false}
/* In the keydown eventlistener: */
case " ":
if(!keys.space.pressed){
projectiles.push(new Projectile(player, playerProjectileSpeed));
keys.space.pressed = true;
}
break;
/* In the keyup enventlistener: */
case " ":
keys.space.pressed = false;
break;