Space Invaders Game Tutorial with JavaScript and HTML Canvas
Вставка
- Опубліковано 10 чер 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 man, your tutorial was very helpful.
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
This is such a high quality content
am learning a lot from you... thank you for the Hokage style of teaching....
I like the stock , great video
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.
U re a legendary teacher.....plz bring more tuts
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!
Thank you. This is very good.
Loved your HTML & CSS course, kindly (& please) make a course on JS & React 🙏
Hello, it's a very great tutorial, thanks a lot!
Sweet Jesus!
This is gold 🥇 🙏 Gracias! 🎊
that is really a wonderful video
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
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
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.
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.
really help helpful
Wow! My favorite game of all times!!
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 ;)
let me tell you smoething , i just found out your channel & im totaly blow mind . 1+ follow , you Deserve it
Great one! praise be to God
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?
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!
Hello! I try to use some logics to my project, you know why my projectile leaves the trail of its journey ?
Yes, I love using Sublime Text too.
subl . 👍
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
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;
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);
I need the game complete,please,i have a problem with move grids
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 😔😔
Thanks sir
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...
Chris, my spaceship image is very pixelated! Any ideas? I am following along using vscode and google chrome.
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?
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?
@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.
Anyone found a why to keep shoot if the space button is down?
Is there another free tutorial I can watch to improve the game?
What's the name of Todo app you're using?
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
hi,
i still don't understand those setTimeout calls with 0...
Please upload javascript full course tutorial ....
Can this be completed with Javascript? (Not vanilla Javascript)
Which intellisense is being used. Mine isn't giving any relevant info.
Boss!
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
Can kindly share the full source code?
I left a question on here but it has been deleted?
Is there a link to fork the cod?
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
Can you make this game mobile friendly
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.
is it working fine?
a sword fighting game with following Top Down 2D camera
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
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!
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
put code in description
ok
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
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 watched this video and the code didn't work. I double checked multiple times.
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;