Space Invaders Game Tutorial with JavaScript and HTML Canvas

Подписаться 162 тыс.

Просмотров 133 тыс.

50% 1

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

Опубликовано:

2 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 142

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

What games do you want to see next? 👀

@abhilashLeader_07 2 года назад

Dinasour game

@marcossaucedo7123 2 года назад

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!

@shu9460 2 года назад

Pokemon

@mixroot8099 2 года назад

Can subway surf for me please if you making this game pls add source codes please

@DopEZTam 2 года назад

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.

@monotoneguy7279 2 года назад

Dude I remember watching your videos in college and now I'm a frontend developer. Thanks for the tutorials bro

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

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 🙌

@Bad_Chad 2 года назад

Dope!

@kishanvyas5800 Год назад

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

@bucky_94 2 года назад

Beautifully explained. I like how he walks us through his thought process to write a clean code.

@eduardorauchbach 9 месяцев назад

I changed so many things to experiment, but your tutorial is really good :)

@user-jd7ub3tq2b 2 года назад

thanks man, your tutorial was very helpful.

@Frankslaboratory 2 года назад

Another game, Christmas coming in January this year, thanks Chris :D

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

Thinking we'll both get early Christmas gifts this year with 100k plaques 👀

@alifjian9111 2 года назад

Wow franks u come here

@erwinyulianto5407 2 года назад

Finally 18:45 show how to get image size correctly, been struggle get image size for your other mario tutorial.

@SamFishback 2 года назад

thank you for making this available to us for free

@muffin7968 2 года назад

I like the stock , great video

@yehannk448 2 года назад

exactly what i was looking for

@sourabhaggarwal4509 2 года назад

Loved your HTML & CSS course, kindly (& please) make a course on JS & React 🙏

@MarleyETMarkusKidsTV Год назад

am learning a lot from you... thank you for the Hokage style of teaching....

@fitvidsaurabh Год назад

Thanks Chris loved your whole tutorial and made this game in 6 hours

@dominator6237 10 месяцев назад

can u give the code please?

@Periface 2 года назад

Wow, thanks for sharing this!

@commentator1338 2 года назад

This is such a high quality content

@inji4579 2 года назад

Thank you. This is very good.

@dbldigitclimbing2681 Месяц назад

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.

@underun Год назад

Hello, it's a very great tutorial, thanks a lot!

@abhilashLeader_07 2 года назад

U re a legendary teacher.....plz bring more tuts

@itzyourbwoytchybooxuur6475 2 года назад

Sweet Jesus! This is gold 🥇 🙏 Gracias! 🎊

@streambumper250 Год назад

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.

@geraldoleek2493 Год назад

that is really a wonderful video

@victorng9521 Год назад

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.

@sandrallancherosg 2 года назад

Wow! My favorite game of all times!!

@marcossaucedo7123 2 года назад

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!

@theman7050 2 года назад

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

@billyjohnson5568 2 года назад

There's a channel called Frank's Labrotories... you should give him a watch too

@recreateftv 2 года назад

Hello! I try to use some logics to my project, you know why my projectile leaves the trail of its journey ?

@alihanfevziev5538 2 года назад

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?

@Shivam-jk7is 2 года назад

Yea it's an extra payment

@voldemortvi4264 2 года назад

let me tell you smoething , i just found out your channel & im totaly blow mind . 1+ follow , you Deserve it

@mahdishojaie922 2 года назад

really help helpful

@xXDorkyTonyXx 2 года назад

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

@anthonybarragan1603 Год назад

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.

@debsarkar4893 Год назад

@@anthonybarragan1603 But it is not working for me

@vadersreign 10 месяцев назад

@@debsarkar4893 In the draw() method, write: c.fillRect(0, 0, canvas.width, canvas.height);

@bythealphabet 2 года назад

good job bro

@kaissoune 2 года назад

Great one! praise be to God

@slammerton 2 года назад

When I hold space, there are multiple projectiles, which makes the game way too easy. Any idea how to fix that?

@siddharthsingh913 Год назад

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;

@slammerton 2 года назад

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

@Firzj Год назад

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.

@Wr4ptor Год назад

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

@Firzj Год назад

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

@Wr4ptor Год назад

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

@gamerijn1289 Год назад

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

@MountainDEWDjv 10 месяцев назад

Chris, my spaceship image is very pixelated! Any ideas? I am following along using vscode and google chrome.

@AdrianDegonda Год назад

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?

@MonkeyGrinderTube Год назад

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?

@mrCetus 2 года назад

when i press space for fire the projectiles, it spawns multiple of them like i'm holding the spacebar, how do i fix that?

@jankowalski4272 2 года назад

apply an additional 'flag' in your code ;)

@bythealphabet 2 года назад

Yes, I love using Sublime Text too. subl . 👍

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

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?

@jarekczaplicki4437 Год назад

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

@_rohit_s 2 года назад

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

@FristajloPL Год назад

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

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

Hey, it’s been 10 months. Did you find out if this is true?

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

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

@kirishimahatake4410 Год назад

I need the game complete,please,i have a problem with move grids

@notrockstaralp8039 Год назад

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.

@user-jd7ub3tq2b 2 года назад

Is there another free tutorial I can watch to improve the game?

@karanrathour4710 2 года назад

Thanks sir

@sensus494 Месяц назад

What's the name of Todo app you're using?

@footballstories4794 Год назад

Can this be completed with Javascript? (Not vanilla Javascript)

@vinothvino8549 2 года назад

Please upload javascript full course tutorial ....

@leonhardeuler4536 4 месяца назад

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

@mrrichgamersd6048 2 года назад

hey what do i do if the projectiles arent rendering=

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

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.

@dawnchopp2809 2 года назад

I left a question on here but it has been deleted?

@NuMwhan-bg4fq 9 месяцев назад

Which intellisense is being used. Mine isn't giving any relevant info.

@gutted3955 9 месяцев назад

Is there a link to fork the cod?

@ArtcodEAscetik 2 месяца назад

hi, i still don't understand those setTimeout calls with 0...

@lawrenceneo2294 2 года назад

Can kindly share the full source code?

@Martin-4D 2 года назад

Boss!

@Xsaryo 19 дней назад

Anyone found a why to keep shoot if the space button is down?

@voisibecari6998 Год назад

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

@scottatkinson7649 Год назад

Can you make this game mobile friendly

@dominator6237 10 месяцев назад

is it working fine?

@danielwilded-mix8831 2 года назад

a sword fighting game with following Top Down 2D camera

@binaryburnout3d 2 года назад

36:12 wouldn't it just be easier to load rotated sprites at the moment of appropriate button press. O_o!

@MonkeyGrinderTube Год назад

I'm actually trying to figure out how to do it, can you give me some advice? I'd hugely appreciate that!

@VyomeshArts Год назад

27:04 at this point mine was showing that it could not identify this.position.x

@thelatestbandit3165 Год назад

same

@fourpaperplates 9 месяцев назад

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

@hojjatre1 2 года назад

Anyone else have the spaceship just stretch instead of move?

@hojjatre1 2 года назад

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

@chonghwanpark3694 Год назад

put code in description

@scottatkinson7649 Год назад

Can I pay for just this game instead of whole year please

@ChrisCourses Год назад

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

@theunium 2 года назад

@user-ib2ld6ku4y 3 месяца назад

I watched this video and the code didn't work. I double checked multiple times.

@shu9460 2 года назад

Daddy

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

UwU

@vinothvino8549 2 года назад

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

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

I there a way to do this without using classes

@isense5424 2 года назад

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

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.