Code Asteroids in JavaScript (1979 Atari game) - tutorial

In this JavaScript tutorial, you will learn to create the 1979 Atari game Asteroids from scratch using vanilla JavaScript.

⭐️Contents⭐️

⌨️1. (0:00) Spaceship creation

⌨️2. (33:55) Astroids creation

⌨️3. (58:40) Collision Detection and Explosions

⌨️4. (1:19:09) Shooting Lasers and Asteroid Destruction

⌨️5. (1:48:13) Levels, Lives, and Game Over

⌨️6. (2:10:10) Scoring and Saving Data Locally

⌨️7. (2:20:24) Sound Effects and “Music”

--

[dmmat]

One of the best and most complete lessons I 've ever seen on YouTube! Clear speech, always to the point, clean code with remarks for almost everything, progressive difficulty, fast only when needed, good sense of humor... Thank you Sir for this great tutorial, it is the least that I can do!

[mauriciotrejos]

I feel confident now using the canvas tag. thanks for sharing

[patrikknoerr]

It gets better and better. Still not done watching Connect Four, now something even more interesting !

[henningstahl]

Amazing! Precise and easy to understand. Thanks for this one.

[Stevesteacher]

Thank you so much, this was SUPER and I learned so many things along the way :)))

[antonyabhilash]

Really helpful. Very much easy to understand even for a noob. One of the geat tutorials I have ever seen.

[xWes]

Super fun game, yup :D Pretty great time developing and playing it!

[ispi_video_photo]

This is a great tutorial, I have leaned well from this. I even added my own little touch to this by adding Hyperspace, it was easy. Thanks for the lesson.

[johnsolly]

Wonderful tutorial! Perfect amount of explanation and pace.

[parasarora]

I will also try this!!!....amazing simple and full of knowledge✌☺👍

[bigchunk]

I don't know if your errors are intentional or not, but i'm learning a lot from them. Very well made tutorial!

[asdf]

Really good tutorial. Please please keep up the awesome work

[khalidhashimeh]

Hands down..you are a true master..thank you..

[davidhayes]

Excellent tutorial very well presented. Many Thanks.. very easy to follow along

[mukteshdeshpande]

awesome. I will be waiting for more like these from scratch vanilla JS projects.

[MyReviews_karkan]

Yeah, I'll be at this level in 2060 😂

[brandoku]

I had a project back in high-school where we had to alter a game and i chose asteroids and my teacher said we had to change the looks of the game by changing the picture the code asks for i tried for a whole week to tell my teacher the stuff in the code was drawn out not a picture and my teacher was so convinced that was not possible and it has to be a picture like jpeg or something me not knowing code at all at the time i felt as if the class wasn't going to get me anywhere if my teacher didn't know anything so I backed out of that class, just minutes into this video I learnt more than i did in the months I was in that class

[johnsolly]

I found one bug that the tutorial didn't cover. If you die before a level is complete, the music tempo doesn't reset. I fixed this by resetting the tempo in the gameOver function.
function gameOver() {
ship.dead = true;
text = "Game Over";
textAlpha = 1.0;
music.tempo = 1.0;

}

[mikebrolo]

Thanks!!! very good tutorial very helpful!!!

[chriscannon]

ERROR HERE AND WITH SOURCE FILES. Concerns part 7 audio. Adding the lasers audio is fine but the problem is with next step - adding the explode audio, Safari and Firefox now return an error in console and no sound is played. The warning is: "Autoplay is only allowed when approved by the user, the site is activated by the user, or media is muted." and then followed by this error: "Uncaught (in promise) DOMException: The play method is not allowed by the user agent or the platform in the current context, possibly because the user denied permission." These errors only appear if the ship explodes before you fire your lasers. If you fire a laser then there is no error and sound plays. Also if you manage to progress to the next step of development and add music files then you get the error straight away as soon as the page loads. Presumably the error is a security feature that means sound doesn't auto play by default until the user properly interacts with it first. Unless there is a work around then you cannot complete this tutorial to the end. Currently Chrome doesn't throw an error and haven't tested MS Edge. The source files also throw these errors. Also I swapped around the keys used and the spacebar key is deemed as a legitimate interaction but the arrow keys are not. Presumably a work around might involve building in a "Push Fire To Start" feature.