Skip to content

Classic Space Invaders game written in JavaScript as a learning exercise.

License

Notifications You must be signed in to change notification settings

kduckets/spaceinvaders

This branch is 52 commits ahead of dwmkerr/spaceinvaders:master.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

e70127c · Nov 3, 2023
Nov 17, 2019
Nov 10, 2013
Nov 3, 2023
Nov 10, 2013
Aug 20, 2013
Dec 10, 2019
Mar 20, 2019
Dec 11, 2019
Nov 3, 2023
Nov 17, 2019
Sep 1, 2013

Repository files navigation

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: https://dwmkerr.github.io/spaceinvaders/

Space Invaders Screenshot

Intro

Run on Repl.it

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.

Publishing

On changes to the master branch, the GitHub Pages site will be automatically updated.

About

Classic Space Invaders game written in JavaScript as a learning exercise.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 83.1%
  • HTML 11.7%
  • CSS 4.5%
  • Makefile 0.7%