D4mations.com

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



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

d4mer

, , , , , , , , , ,

22 responses to “Space Invaders #1 – HTML5 Game Programming Tutorial [javascript]”

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

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

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

Leave a Reply