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
💻JavaScript Template: https://drive.google.com/file/d/1W8vbBTBFf7gBTnZ04bNSy6ywRgRSSeQN/view
💻Part 1 Code: https://drive.google.com/file/d/1Gpwsi3LroGM0A0kJCwET-DA9JN1rx8ME/view
⌨️2. (33:55) Astroids creation
💻Part 2 Code: https://drive.google.com/file/d/1Pw4_n4xpuinuNZMpbvu2-1McRtOmOH-B/view
⌨️3. (58:40) Collision Detection and Explosions
💻Part 3 Code: https://drive.google.com/file/d/1G7uwqyL1rMUHYUN_ogH7Zx3oHr0jZIs9/view
⌨️4. (1:19:09) Shooting Lasers and Asteroid Destruction
💻Part 4 Code: https://drive.google.com/file/d/1xJj9OnoXm1kuZyDVnmO9JyMB6e9CSGje/view
⌨️5. (1:48:13) Levels, Lives, and Game Over
💻Part 5 Code: https://drive.google.com/file/d/1Wbq90vAfeH1E5HJdQwZjqD-QVZ2EdsA9/view
⌨️6. (2:10:10) Scoring and Saving Data Locally
💻Part 6 Code: https://drive.google.com/file/d/1tcdbbODVojY-Uhzdb_kG51H1NWibyRSP/view
⌨️7. (2:20:24) Sound Effects and “Music”
💻Part 7 Code: https://drive.google.com/open?id=1tmjvMKxCcJeyTpi5pI6A8cgVxwWnyPXn
🔈 Sounds: https://drive.google.com/file/d/1iSykdpBCc7xafRFHrdH0mH4TeR5ansAc/view
Tutorial from Mt. Ford Studios. Check out their channel for more great tutorials: https://www.youtube.com/channel/UCYGcMtRTLWQHgLq4V3bP3sA
—
Learn to code for free and get a developer job: https://www.freecodecamp.com
Read hundreds of articles on programming: https://medium.freecodecamp.com
And subscribe for new videos on technology every day: https://youtube.com/subscription_center?add_user=freecodecamp
Original source
19 responses to “Code Asteroids in JavaScript (1979 Atari game) – tutorial”
1:02:57 – Where has the code for // center dot gone??? Was I supposed to delete this at some point? : /
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".
Awesome! Super easy to use 😀
not working plz help
ps: i use notepad
Any way to know more about the trigonometry used in the game?
Super fun game, yup 😀 Pretty great time developing and playing it!
awesome. I will be waiting for more like these from scratch vanilla JS projects.
is taking everyone else 3 days?
Its really amazing. If possible can you do a video or article explaining the math too?
Part 7 code link is broken, it points to part 5 code, it is the same URL.
Really good tutorial. Please please keep up the awesome work
Hands down..you are a true master..thank you..
Thank u for this awesome video
https://github.com/AAdevelop/Code-Asteroids-in-JavaScript github link to all the files
destroy all the ste(ROIDS)
It gets better and better. Still not done watching Connect Four, now something even more interesting !
How and where we can download materials that lesson?
I will also try this!!!….amazing simple and full of knowledge✌☺👍
Awesome👏👏