Coding Challenge #5: Space Invaders in JavaScript with p5.js

In this viewer submitted Coding Challenge, I take on the task of coding a Space Invaders game to play in browser in JavaScript/HTML and the p5.js library.

Send me your Coding Challenge ideas!


Source Code For This Challenge:


For More Coding Challenges:

Help us caption & translate this video!






24 responses to “Coding Challenge #5: Space Invaders in JavaScript with p5.js”

  1. Tushar Sadhwani Avatar

    "I don't even paint why am I watching Bob Ross?"

    "I don't even code why am I watching Daniel Shiffman code space invaders?"


  2. ReggaeFreak's Playground Avatar

    dude you are totally nuts .I love it
    Keep up the good stuff

  3. Trung Đức Phạm Avatar

    You are truly Bob Ross of Programming. Very inspiring series.

  4. RenTec Avatar

    This was magical to watch

  5. StealthNinjas BG Avatar

    lol 😀 I'm learning Visual C# and I still understand everything he writes in JavaScript. Nice videos.

  6. Syph Dragon Avatar

    What do you keep hitting when you walk from the green screen to the Whiteboard? Is it a button to change cameras?

  7. Blake Avatar

    Your videos are great. I'm learning to code now and these are the most immersive videos I have found so far.

  8. Daniel Muvdi Avatar

    Here's the meaning of the different equals sign operators:

    x = y assign to x the value of y

    x == y compare and return true if and only if the two have the same value (but not necessarily the same data type, try to convert them to the same type if possible

    x === y return true if and only if the two are identical and have the same data type.

    Obviously, the === comparison is more strict, while the == comparison allows you to be sloppy:

    "2" == 2 // true
    "2" === 2 // false

    false == 0 // true
    false === 0 // false

  9. marcix maj Avatar

    I dont know why have u just 300k subs… When i watch u i thought u have circa 1milion subs XD

  10. Archibald Octavius Butler Avatar

    Really enjoyed that! Thank you.

  11. mahsa sahebdivani Avatar

    I first subscribed to learn coding! but now i'm enjoying the videos too much with popcorns and a big smile that i forget to practice them myself, thanks for the energy u share:D

  12. said koçak Avatar

    okay i encounter with some problems, and i solved some of them. Im using bracket(i think it may lead some problems but im not sure ) .
    First problem was in the flower tab,
    function Flower(x, y){
    this.x = x;
    this.y = y;
    … } did not work so i did this
    function Flower(_x, _y){
    this.x = _x;
    this.y = _y; } it work okay.
    Second one was copying these lines of codes for 'drop' tab, it did not work again. so i chanced the values again
    function Drop(_a, _b){
    this.x = _a;
    this.y = _b; } and it did work.
    My first question is why x and y values didnt work like in the video?

    Untill the creating ''hits'' function, everything went well,
    i got the logic behind this code. But i couldnt get the parameter part.
    we created drop after flower. In sketch.js
    var ship;
    var flowers = [];
    var drops = [];
    for (var j = 0; j < flowers.length; j++) {
    if (drops[i].hits(flowers[j])) {
    that s how we describe the objects and the function(hits) okay, but while we creating the function 'hits' we write

    this.hits = function(flower) {
    var d = dist(this.x, this.y, flower.x, flower.y);
    if (d < this.r + flower.r) {
    return true;
    } else {
    return false;
    I actually couldnt understand this one because , there is no such thing called 'flower' in the program. Only the script'name is flower.js , and while we creating the flower tab we write exatcly like this :function Flower(x, y) {
    this.x = x;
    this.y = y;
    this.r = 30;
    So how is this work? What i am trying to ask where did the "flower" come from? I am trying to do this exercise step by step and at this point it doesnt work and im stucked.

    Thanks for the video and everything, i learned a lot. You are the best.

  13. timothy lanfranco Avatar

    I can't find another youtuber interesting enough for me to be willing to watch him talk and type for over an hour or 2, I can watch you all day

  14. joshua Avatar

    please create a basketball game like in fb messenger

  15. Serge 99 Avatar

    you are a saint well done !!

  16. Michaël Sivager Avatar

    Thank you so much for this !!

  17. Michael O'Leary Avatar

    i made that game on a commodore 64 when they first were around that and old mining bomb game lol they need to go back to old coding direct from hardware.

  18. Craig the Cat Avatar

    I love your channel. One of the best programming channels I've came across.

  19. aziz as Avatar

    Thanks for posting this 🙂

  20. ALL CAPS Avatar

    what you could've done was:
    When the drop entered the flower and stayed in it for 15 unites, have the drop take 15 dmg… But if the drop was in there for 14 units or less, the flower wouldn't "die" you know? for example a flower is 15×15 as a circle, but if you hit the side of the flower meaning 3 unites or 7 unites it does that much dmg… So 2 hits on the side would kill it…. or almost but anyways, I hope you get my point! that'd be cool. Or a chunk calls off the flower.

  21. Riley Christian Avatar

    Hello Coding Challenge!! You are so entertaining . Do you have source code of this project in Processing (Java) ? Thank you

  22. The BuilderBoxGamer Avatar

    I don't understand the difference between 5 == "5" and 5 === "5"

Leave a Reply

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