• Monday , 24 July 2017

Space Invaders #1 – HTML5 Game Programming Tutorial [javascript]

Code Canyon



::OBS::
As @TheDoppelganger29 pointed out screen is a predefined keyword and we can’t use it as a variable name for our screen, fix it by renaming the variable to something else, eg. “display”.

The first video of two where we program a simple clone of the classic arcade game Space Invaders, using javascript and html. Make sure to check out my to previous videos where we program Snake and Pong with similar technics.

:: Resources ::
https://github.com/maxwihlborg/youtube-tutorials/blob/master/space-invaders/res/invaders.png

:: Other Stuff ::
https://github.com/maxwihlborg
http://maxwihlborg.com/


Original source

3d Ocean

Related Posts

22 Comments

  1. Aabhas Sinha
    July 17, 2017 at 18:18

    +Max Wihlborg Could you please tell me the libraries I will need for this… thanks a million

  2. Benjamin Aguilar
    July 17, 2017 at 18:18

    I just added the code for moving the tank, but the console says that "this.down" isn't defined. Here's my code: https://gist.github.com/NDR149/9332ed6add3c83eed280609036b6aad7

  3. Clumsy Astronaut
    July 17, 2017 at 18:18

    How did you create the file and rename it, I can't figure out how to get the tab up

  4. Two Legged Cat33
    July 17, 2017 at 18:18

    you are cancer at tuts

  5. Fly Plays
    July 17, 2017 at 18:18

    hey, does anyone wanna help me here? I'm having a bit of trouble. I don't know how to open that tab thingy at 0:50

  6. Fly Plays
    July 17, 2017 at 18:18

    great i love this

  7. Armatus Tempus
    July 17, 2017 at 18:18

    The sprites don't show up on the webpage when you demonstrate loading them and I don't know where I've gone wrong.

  8. Yamarai Akizuki
    July 17, 2017 at 18:18

    its telling me image is not defined

  9. michael santos
    July 17, 2017 at 18:18

    When you were in sublime and you were adding the folders index.html and helpers.js how the hell did you do I've been trying to find it out for soooooooo fricken long please help me is it only on Mac or what the heck

  10. 5waterpolo5
    July 17, 2017 at 18:18

    where can I get the spritesheet?

  11. Damian O'Rourke
    July 17, 2017 at 18:18

    Uncaught TypeError: Cannot read property 'img' of undefined, helper.js, at 25:33 any suggestions all good till now, sp.img is not receiving the img param !out of scope

  12. Muhammad Hadi
    July 17, 2017 at 18:18

    wow man , then how difficult it is to program 2015 games…. must be really challenging…

  13. Geir Offenberg
    July 17, 2017 at 18:18

    Max, can u point to some resources or help a swede out… i used to make games in vc++ and the loop was a while loop if i remember correctly, but what the heck is going on here? is there anywhere i can get this way of making a game loop explained, i just dont get what is going on here. thanks

  14. Geir Offenberg
    July 17, 2017 at 18:18

    so the sublime text editor runs fine unlicensed?

  15. 7Nan7
    July 17, 2017 at 18:18

    trying to add a timer, just for loop at the end and reset the game…. And also a reset button… Anyone can help me

  16. elva329
    July 17, 2017 at 18:18

    Hi Max, Your tutorial is really excellent, thank you very much . Just one question, I tried to implement the case and display it, but the invaders only moved once, then stopped. Could you please help to identify the issues ? Thank you.

  17. ssegrub yhtomit
    July 17, 2017 at 18:18

    i keep getting Uncaught TypeError: screen.clear is not a function
    i made the prototype just like you did i even copy that part from https://github.com/maxwihlborg/youtube-tutorials/blob/master/space-invaders/js/helpers.js and it still had the same problem i look at every thing but it not working i even took screen.clear(); out and it work but it don't clear the background why is screen.clear() not working but screen.drawSprite(a.sprite[spFrame], a.x, a.y) dose???

  18. Marco Ledezma
    July 17, 2017 at 18:18

    I have this error: "Uncaught SyntaxError: missing ) after argument list" in this: "img.addEventListener("load" function() {" and this line of code: "document.addEventListener("keydown" function(evt){" and I dont why, can somebody help me please :c

    This is the full function: img.addEventListener("load" function() {

    alSprite = [
    [new Sprite(this, 0, 0, 22, 16), new Sprite(this, 0, 16, 22, 16)],
    [new Sprite(this. 22, 0, 16, 16), new Sprite(this, 22, 16, 16, 16)],
    [new Sprite(this, 38, 0, 24, 16), new Sprite(this, 38, 16, 24, 16)]
    ];
    taSprite = new Sprite(this);
    ciSprite = new Sprite(this);

    init();
    run();
    });

  19. Sonsequence
    July 17, 2017 at 18:18

    Hi Max, Nice work (I think).
    I'm pretty new to proper OOP, have never applied more than 3 lines of JS to a webpage so might be a bit ambitious to be trying to puzzle out your code here. Probable newbie question. When I load a local version of the github project it plays for 1 second then "Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data"
    I've researched the error learned about CORS but I can't figure why there'd be a problem when it all comes from my local domain.

  20. Marco Valente
    July 17, 2017 at 18:18

    Hey Max, on your roll-text class in your website there is a typo. It's aspiring artist instead of aspiering

  21. Geometry Dash MCCreeper
    July 17, 2017 at 18:18

    Im getting a problem. I ran 14:88 and 14:48 and im not getting anything.

  22. Lars van Lent
    July 17, 2017 at 18:18

    What kind of program do you use?
    And do you know the same program on Windows? Or something else?

Leave A Comment

You must be logged in to post a comment.