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.


⌨️1. (0:00) Spaceship creation
💻JavaScript Template:
💻Part 1 Code:

⌨️2. (33:55) Astroids creation
💻Part 2 Code:

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

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

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

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

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

🔈 Sounds:

Tutorial from Mt. Ford Studios. Check out their channel for more great tutorials:

Learn to code for free and get a developer job:

Read hundreds of articles on programming:

And subscribe for new videos on technology every day:

Original source

19 responses to “Code Asteroids in JavaScript (1979 Atari game) – tutorial”

  1. 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):

    ship.x + (ship.r * Math.cos(ship.a)),
    ship.y – (ship.r * Math.sin(ship.a))
    ship.x + (ship.r * Math.cos(ship.a + ((3/4)*Math.PI))),
    ship.y – (ship.r * Math.sin(ship.a + ((3/4)*Math.PI)))
    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".

Leave a Reply