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

Leave a Reply