You are currently viewing Code Asteroids in JavaScript (1979 Atari game) – tutorial

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

source

This Post Has 26 Comments

  1. Taylor McClenny

    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.

  2. Bart

    Great game, thanks for the tutorial, how can I go about in adding a Pause state ??

  3. Mikebrolo

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

  4. A A

    How did you learn to get this good and natural at coding like you're writing english?

  5. Danny L

    please do a video of this but with python! thanks!

  6. Neverleanse

    how can I put an image background on the canvas instead of a black screen?

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

  8. R

    time stamps?

  9. Antony Abhilash

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

  10. Jeff D

    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.

  11. Al M

    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.

  12. 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

  13. Business Opportunity in Ruvol

    I have invented a Board Game [still unpublished and not yet out in the market] that I believe is guaranteed to be as challenging and exciting as CHESS. I called it “RUVOL.”

    It is my hope that one day Ruvol may surpass chess as the “Number One Board Game in the World.”

    The weakness of chess is it always starts in fixed positions that the opening moves become “memorizable.” In fact, not a few have so mastered the moves that they can play against their opponents “blindfolded.” It is for this very reason that the great Bobby Fischer introduced his so-called “Fischer Random Chess,” where the starting position of the pieces is “randomized” to make the memorization of openings impracticable. Fortunately, it is also for this reason that I invented Ruvol where “every game” has been calculated to be a challenging one to play.

    HOW IS RUVOL PLAYED and HOW YOU CAN MONETIZE IT?

    I detailed everything in my YouTube video. Here is the link: https://www.youtube.com/watch?v=jcqth0m3-R0

    BIG MONEY POTENTIAL IN RUVOL!

    It is worthwhile to note that the people who play chess will be the same people who will play Ruvol. In my Google search, I learned there are around 800 million chess players in the world. Even just a small percentage of these 800 million is good enough to earn big money from Ruvol either as an ONLINE GAME BUSINESS or as a PHYSICAL PRODUCT DISTRIBUTOR.

    You may contact me at: rodolfovitangcol@gmail.com.

    Thanks and God bless!

    RODOLFO MARTIN VITANGCOL

    The Ruvol Inventor

  14. coding Club

    I am wondering what color theme are you using for Visual Studio Code

  15. Matthew Cuciti

    Just a quick suggestion: try using requestAnimationFrame instead of setInterval. That'll result in smoother animation. Great Video!

  16. JenishIsSoJenish

    Width of my line is not changing. No matter what I set it. Can someone help?

  17. Flxxfin

    ugh, I have ocd and the triangles not working and im abt to literally go insane

  18. Flxxfin

    lol the thumbnail spelled asteroids wrong, they spelled astroids lol

  19. Programmer-X31

    Here is a quote I learnt from Dani:
    "Yippity Boppity, your code, is now my property!"
    Applies for projects I can't do on my own

  20. Syd Williams

    i am using this template for my senior project does anyone know how to turn the triangle into a circle and save a player's score on a separate page?

  21. Chris Cannon

    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.

Leave a Reply