Skip to content
Classic Space Invaders game written in JavaScript as a learning exercise.
Branch: master
Clone or download
Latest commit 1660c07 Mar 20, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css Added the sounds and cleaned up the site structure. Nov 10, 2013
js chore: ensure initial score is 0 Nov 5, 2018
sounds Added the sounds and cleaned up the site structure. Nov 10, 2013
.gitignore Core game mechanics working, getting ready for a refactor of state/co… Aug 20, 2013
LICENSE
README.md
index.html
screenshot.jpg Added the screenshot to the repo Sep 1, 2013

README.md

Space Invaders

The classic Space Invaders game written in JavaScript as a learning exercise.

No jQuery or any other third party libraries, just raw JavaScript, CSS and HTML.

See it Live: www.dwmkerr.com/experiments/spaceinvaders

Space Invaders Screenshot

Intro

What's there to say? It's Space Invaders in JavaScript!

Create the game, give it a div to draw to, tell it when the keyboard is mashed and that's all you need to add Space Invaders to a website.

This is a simple learning exercise, so the JavaScript is deliberate kept all one file. There's no linting, testing, CI, or anything like that. If you want to see such patterns in front-end JavaScript, check out something like angular-modal-service.

Adding Space Invaders to a Web Page

First, drop the spaceinvaders.js file into the website.

Now add a canvas to the page.

<canvas id="gameCanvas"></canvas>

Next, add the Space Invaders game code. You create the game, initialise it with the canvas, start it and make sure you tell it when a key is pressed or released. That's it!

<script>
//  Setup the canvas.
var canvas = document.getElementById("gameCanvas");
canvas.width = 800;
canvas.height = 600;

//  Create the game.
var game = new Game();

//  Initialise it with the game canvas.
game.initialise(canvas);

//  Start the game.
game.start();

//  Listen for keyboard events.
var pressedKeys = [];
window.addEventListener("keydown", function keydown(e) {
  var keycode = window.event.keycode || e.which;
    if(!pressedKeys[keycode])
      pressedKeys[keycode] = true;
    //  Supress further processing of left/right/space (37/29/32)
    if(keycode == 37 || keycode == 39 || keycode == 32) {
      e.preventDefault();
    }
    game.keyDown(keycode);
});
window.addEventListener("keyup", function keydown(e) {
  var keycode = window.event.keycode || e.which;
    if(pressedKeys[keycode])
      delete pressedKeys[keycode];
    game.keyUp(keycode);
});
</script>

References

Other bits and pieces that are useful can be dropped here.

You can’t perform that action at this time.