Coding Challenge #46.1: Asteroids with p5.js – Part 1

Game



This video is Part 1 of a new Coding Challenge: the classic Atari video game Asteroids! In this video, I use JavaScript and HTML5 canvas with the p5.js library to program the ship and the asteroids.

💻Challenge Webpage:
🎥Asteroids Part 2:
🎥Polar Coordinates:

🚂Website:
💡Github:
💖Membership:
🛒Store:
📚Books:
🖋️Twitter:

🎥 Coding Challenges:
🎥 Intro to Programming:

🔗 p5.js:
🔗 Processing:

📄 Code of Conduct:
🌐Help us caption and translate:
🚩Suggest Topics:
👾Share your contribution:

Nguồn: https://onvideonews.com/

Xem thêm bài viết khác: https://onvideonews.com/game/

42 thoughts on “Coding Challenge #46.1: Asteroids with p5.js – Part 1

  1. By a little moment, I think leave, when listen, piu, piu, piu… WTH!!!

    One more piu, leave…

  2. I'm new to js.. I'm following along but visual code editor said to change function Ship() to this:
    class Ship {

    constructor() {
    Is your usage deprecated or something?

  3. Can you please explain how soi is equalant to René Descartes? I am soi. It was expressed to me by Lori a Quantum Quenn, that I reminded her of René Descartes. This was in 2009, while I was deployed to Iraq. At the Age of 19 the name of soi was gifted to me. I am a retired Army vet of 20 years. Currently I am taking computer programming. I follow the path of quantum mechanics. With this concept I am aware to see spectral timelines. Through these timelines, we make decisions, The choices, decisions we make today l can effect the future. How will the world be in 300 years? I'd like to see the world better. . -Scott Michael Britton

  4. I have P5.js setup up with Atom on mac…but it's a little wonky. My autocomplete is screwy af.
    Do you have a video on how to set this all up properly? I really do like Atom though…it's puuuurdy.

    Also…do I just create a new sketch.js file for a new project? Or do I have to copy the entire empty-example folder and included files each time I want to start a new project?

    Not intuitive at all. I think I prefer Processing 🤣

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

  6. 12:00 Will someone please reference me to the video where he shows how to get the angle using sin and cos? I'm trying to do this without p5 and getting stuck here.

  7. 30:47 you said that you could do some "crazy javascript inheritance thing" how would you do that without using ES6?

  8. I have some dirty stuff for you:

    function A() {
    this.v = null;
    with(this){
    this.foo = function() {v = 42;} // no more «this dot» required
    }
    }
    let a = new A;
    a.foo();
    console.log(a.v); // 42

  9. THESE
    ADVERTISEMENTS OF PEOPLE PLAYING THE PS4
    THE CONTROLLER ISN'T EVEN ON! AT LEAST MAKE A BETTER ADVERTISEMENT. This isn't directing too you The Coding Train.

  10. Hi daniel , i have question
    I coding a game called RushHour let said i have string which contained a solution ex. String solution = “carxU”
    It said car x go one move forward “Up” the The problem is the car will be in position zero and zero and one gets the string it should move one move up how can I do this ?

  11. Hi daniel , i have question
    I coding a game called RushHour let said i have string which contained a solution ex. String solution = “carxU”
    It said car x go one move forward “Up” the The problem is the car will be in position zero and zero and one gets the string it should move one move up how can I do this ?

  12. 14:30 i don't understand why you had to handle the "when key is presses only" why you didn't made the function keyIsPressed instead of keyPressed function ,or keyIsPressed was not available in p5 in 2016 ?

  13. Don't know if you improved the spaceship steering later on but it's better with if (keyIsDown==…) inside draw loop than the keyPressed/released combination. It doesn't freeze if u click 2 buttons at the same time or release them in wrong order as it does in keypressed/released.

  14. I did this same game with phaser.js using zekechans tutorial and added in the high score keeper and mobile controls and ported it to Android. Just search for blasteroids on Google play.
    https://mikericcardi.com/blog/creating-asteroids-in-javascript-with-phaser-io/

  15. how can i put the processing's background black, and how can I put the auto selection code like in brackets??

    thanks!!

  16. Another possibility for the rotation of the 'spacecraft' would be to make an if statement with the keyIsDown function and to put it into the draw loop. That way you don't have to use the keyReleased and the keyPressed function. That's the way i did it.

    Sorry for my bad English and Greetings from Germany. I love your Videos.

    Thomas

  17. why not just add the functions that need updating in the UPDATE function. i mean thats the purpose of it instead of having too many calls in the draw loop

  18. can someone help me pls,
    whenever i make the canvas fit the size of my screen, the arrow keys which i use to move the triangle make the web page move as well

  19. For the Processing people here(like me) to make the boost work:
    void boost(){
    this.velocity.x += cos(heading);
    this.velocity.y += sin(heading);
    }

Leave a Reply

Your email address will not be published. Required fields are marked *