Code Asteroids in JavaScript (1979 Atari game) - tutorial
video description
Date: 2022-03-14
Related videos
Comments and reviews: 10
Chris
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.
reply
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.
reply
Korbinian
Super tutorial and thanks for creating and uploading such great content! To be honest, at first i also had some problems with the trigonometry for drawing the ship. Here another variant which is easier to understand (at least for me). This method uses the respective radian measure for the alignment (two times PI equals 360 degrees of a complete circle in radian):
ctx.moveTo(
ship.x + (ship.r - Math.cos(ship.a)),
ship.y - (ship.r - Math.sin(ship.a))
);
ctx.lineTo(
ship.x + (ship.r - Math.cos(ship.a + ((3/4)-Math.PI))),
ship.y - (ship.r - Math.sin(ship.a + ((3/4)-Math.PI)))
);
ctx.lineTo(
ship.x + (ship.r - Math.cos(ship.a + ((1+(1/4))-Math.PI))),
ship.y - (ship.r - Math.sin(ship.a + ((1+(1/4))-Math.PI)))
);
For further infos simply google: -Trigonometry Unit circle-.
reply
Super tutorial and thanks for creating and uploading such great content! To be honest, at first i also had some problems with the trigonometry for drawing the ship. Here another variant which is easier to understand (at least for me). This method uses the respective radian measure for the alignment (two times PI equals 360 degrees of a complete circle in radian):
ctx.moveTo(
ship.x + (ship.r - Math.cos(ship.a)),
ship.y - (ship.r - Math.sin(ship.a))
);
ctx.lineTo(
ship.x + (ship.r - Math.cos(ship.a + ((3/4)-Math.PI))),
ship.y - (ship.r - Math.sin(ship.a + ((3/4)-Math.PI)))
);
ctx.lineTo(
ship.x + (ship.r - Math.cos(ship.a + ((1+(1/4))-Math.PI))),
ship.y - (ship.r - Math.sin(ship.a + ((1+(1/4))-Math.PI)))
);
For further infos simply google: -Trigonometry Unit circle-.
reply
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
reply
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
reply
Taylor
Any idea why the color formatting here is different than mine? Is there an extension to improve the formatting/readability for JS?
Mine is mostly blue. The functions and properties don't really standout, so finding errors is taking me a little longer. ex. -ship.lasers[i].x- is all blue on mine, whereas it's blue, purple, red, and white above.
reply
Any idea why the color formatting here is different than mine? Is there an extension to improve the formatting/readability for JS?
Mine is mostly blue. The functions and properties don't really standout, so finding errors is taking me a little longer. ex. -ship.lasers[i].x- is all blue on mine, whereas it's blue, purple, red, and white above.
reply
d1mmat
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!
reply
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!
reply
Joel
I don't understand. I can follow line by line with what seems like exact punctuation. I run the code and it doesn't work... Copy and paste the code from the linked files and it works... This is what makes solo learning a pain in the tail. Annoyed....
reply
I don't understand. I can follow line by line with what seems like exact punctuation. I run the code and it doesn't work... Copy and paste the code from the linked files and it works... This is what makes solo learning a pain in the tail. Annoyed....
reply
Al
Great tutorial although I won't be switching from C# and Unity after watching all that. I'm in my 50s now and haven't got enough life left for doing anything in JavaScript.
reply
Great tutorial although I won't be switching from C# and Unity after watching all that. I'm in my 50s now and haven't got enough life left for doing anything in JavaScript.
reply
Jeff
Is there an extension you are using in VS code that is autofilling or giving suggestions for canv.getContext etc? Its not showing in my VS code and I have kite installed.
reply
Is there an extension you are using in VS code that is autofilling or giving suggestions for canv.getContext etc? Its not showing in my VS code and I have kite installed.
reply
Danny
Does anyone have the link to video where asteroids is programmed in python and with an included artificial intelligence bot towards the end of the video?
reply
Does anyone have the link to video where asteroids is programmed in python and with an included artificial intelligence bot towards the end of the video?
reply
mushymushy19
could you give me some documentary about the trigonometry you are using. i don't want to use code i don't understand. thx like the video tho
reply
could you give me some documentary about the trigonometry you are using. i don't want to use code i don't understand. thx like the video tho
reply
Add a review, comment
Other channel videos
