Repository: dwmkerr/spaceinvaders
Branch: master
Commit: c1bf211a2ea0
Files: 12
Total size: 36.1 KB
Directory structure:
gitextract_h53fahbv/
├── .github/
│ ├── FUNDING.yml
│ └── workflows/
│ └── main.yml
├── .gitignore
├── .replit
├── LICENSE
├── README.md
├── css/
│ ├── core.css
│ └── typeography.css
├── index.html
├── js/
│ ├── spaceinvaders.js
│ └── starfield.js
└── makefile
================================================
FILE CONTENTS
================================================
================================================
FILE: .github/FUNDING.yml
================================================
# Support 'GitHub Sponsors' funding.
github: dwmkerr
================================================
FILE: .github/workflows/main.yml
================================================
name: Publish to GitHub Pages
on:
push:
branches:
- master
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@master
- name: Build and Deploy
uses: JamesIves/github-pages-deploy-action@releases/v2
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
BASE_BRANCH: master # Deploy from master...
BRANCH: gh-pages # ...to GitHub pages...
BUILD_SCRIPT: make build # ...run the build action...
FOLDER: artifacts/dist # ...copy the distribution folder.
================================================
FILE: .gitignore
================================================
spaceinvaders.sublime-project
spaceinvaders.sublime-workspace
================================================
FILE: .replit
================================================
language = "html"
run = ""
================================================
FILE: LICENSE
================================================
MIT License
Copyright (c) 2019 Dave Kerr
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: 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: [https://dwmkerr.github.io/spaceinvaders/](https://dwmkerr.github.io/spaceinvaders/)
[](https://dwmkerr.github.io/spaceinvaders/)
## Intro
[](https://repl.it/github/dwmkerr/spaceinvaders)
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](https://github.com/dwmkerr/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.
```html
<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!
```html
<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.
- The sounds came from [http://www.classicgaming.cc/classics/spaceinvaders/sounds.php](http://www.classicgaming.cc/classics/spaceinvaders/sounds.php)
## Publishing
On changes to the `master` branch, the GitHub Pages site will be automatically updated.
================================================
FILE: css/core.css
================================================
/* core.css */
/* lean and simple css reset, based on Tantek Celik's reset - see comments below. */
/* (c) 2004-2010 Tantek Çelik. Some Rights Reserved. http://tantek.com */
/* This style sheet is licensed under a Creative Commons License. */
/* http://creativecommons.org/licenses/by/2.0 */
/* Purpose: undo some of the default styling of common browsers */
:link,:visited,ins { text-decoration:none }
nav ul,nav ol { list-style:none }
dl,ul,ol,li,
h1,h2,h3,h4,h5,h6,
html,body,pre,p,blockquote,
form,fieldset,input,label
{ margin:0; padding:0 }
abbr, img, object,
a img,:link img,:visited img,
a object,:link object,:visited object
{ border:0 }
address,abbr { font-style:normal }
iframe:not(.auto-link) { display:none ! important; visibility:hidden ! important; margin-left: -10000px ! important }
a {
color: #0088cc;
text-decoration: none;
}
a:hover,
a:focus {
color: #005580;
text-decoration: underline;
}
================================================
FILE: css/typeography.css
================================================
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 20px;
color: #333333;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 10px 0;
font-family: inherit;
font-weight: bold;
line-height: 20px;
color: inherit;
text-rendering: optimizelegibility;
}
h1,
h2,
h3 {
line-height: 40px;
}
h1 {
font-size: 38.5px;
}
h2 {
font-size: 31.5px;
}
h3 {
font-size: 24.5px;
}
h4 {
font-size: 17.5px;
}
h5 {
font-size: 14px;
}
h6 {
font-size: 11.9px;
}
================================================
FILE: index.html
================================================
<!DOCTYPE html>
<html>
<head>
<title>Space Invaders</title>
<link rel="stylesheet" type="text/css" href="css/core.css">
<link rel="stylesheet" type="text/css" href="css/typeography.css">
<style>
/* Styling needed for a fullscreen canvas and no scrollbars. */
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#starfield {
width:100%;
height:100%;
z-index: -1;
position: absolute;
left: 0px;
top: 0px;
}
#gamecontainer {
width: 800px;
margin-left: auto;
margin-right: auto;
}
#gamecanvas {
width: 800px;
height: 600px;
}
#info {
width: 800px;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div id="starfield"></div>
<div id="gamecontainer">
<canvas id="gameCanvas"></canvas>
</div>
<div id="info">
<p>Move with arrow keys or swipe, fire with the space bar or touch. The invaders get faster and drop
more bombs as you complete each level!</p>
<p><a id="muteLink" href="#" onclick="toggleMute()">mute</a> |
<a href="http://github.com/dwmkerr/spaceinvaders">spaceinvaders on github</a> |
<a href="http://github.com/dwmkerr">more projects</a> | <a href="http://www.dwmkerr.com">dwmkerr.com</a></p>
</div>
<script src="js/starfield.js"></script>
<script src="js/spaceinvaders.js"></script>
<script>
// Create the starfield.
var container = document.getElementById('starfield');
var starfield = new Starfield();
starfield.initialise(container);
starfield.start();
// 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.
window.addEventListener("keydown", function keydown(e) {
var keycode = e.which || window.event.keycode;
// 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 = e.which || window.event.keycode;
game.keyUp(keycode);
});
window.addEventListener("touchstart", function (e) {
game.touchstart(e);
}, false);
window.addEventListener('touchend', function(e){
game.touchend(e);
}, false);
window.addEventListener('touchmove', function(e){
game.touchmove(e);
}, false);
function toggleMute() {
game.mute();
document.getElementById("muteLink").innerText = game.sounds.mute ? "unmute" : "mute";
}
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-41728580-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>
================================================
FILE: js/spaceinvaders.js
================================================
/*
spaceinvaders.js
the core logic for the space invaders game.
*/
/*
Game Class
The Game class represents a Space Invaders game.
Create an instance of it, change any of the default values
in the settings, and call 'start' to run the game.
Call 'initialise' before 'start' to set the canvas the game
will draw to.
Call 'moveShip' or 'shipFire' to control the ship.
Listen for 'gameWon' or 'gameLost' events to handle the game
ending.
*/
// Constants for the keyboard.
var KEY_LEFT = 37;
var KEY_RIGHT = 39;
var KEY_SPACE = 32;
// Creates an instance of the Game class.
function Game() {
// Set the initial config.
this.config = {
bombRate: 0.05,
bombMinVelocity: 50,
bombMaxVelocity: 50,
invaderInitialVelocity: 25,
invaderAcceleration: 0,
invaderDropDistance: 20,
rocketVelocity: 120,
rocketMaxFireRate: 2,
gameWidth: 400,
gameHeight: 300,
fps: 50,
debugMode: false,
invaderRanks: 5,
invaderFiles: 10,
shipSpeed: 120,
levelDifficultyMultiplier: 0.2,
pointsPerInvader: 5,
limitLevelIncrease: 25
};
// All state is in the variables below.
this.lives = 3;
this.width = 0;
this.height = 0;
this.gameBounds = {left: 0, top: 0, right: 0, bottom: 0};
this.intervalId = 0;
this.score = 0;
this.level = 1;
// The state stack.
this.stateStack = [];
// Input/output
this.pressedKeys = {};
this.gameCanvas = null;
// All sounds.
this.sounds = null;
// The previous x position, used for touch.
this.previousX = 0;
}
// Initialis the Game with a canvas.
Game.prototype.initialise = function(gameCanvas) {
// Set the game canvas.
this.gameCanvas = gameCanvas;
// Set the game width and height.
this.width = gameCanvas.width;
this.height = gameCanvas.height;
// Set the state game bounds.
this.gameBounds = {
left: gameCanvas.width / 2 - this.config.gameWidth / 2,
right: gameCanvas.width / 2 + this.config.gameWidth / 2,
top: gameCanvas.height / 2 - this.config.gameHeight / 2,
bottom: gameCanvas.height / 2 + this.config.gameHeight / 2,
};
};
Game.prototype.moveToState = function(state) {
// If we are in a state, leave it.
if(this.currentState() && this.currentState().leave) {
this.currentState().leave(game);
this.stateStack.pop();
}
// If there's an enter function for the new state, call it.
if(state.enter) {
state.enter(game);
}
// Set the current state.
this.stateStack.pop();
this.stateStack.push(state);
};
// Start the Game.
Game.prototype.start = function() {
// Move into the 'welcome' state.
this.moveToState(new WelcomeState());
// Set the game variables.
this.lives = 3;
this.config.debugMode = /debug=true/.test(window.location.href);
// Start the game loop.
var game = this;
this.intervalId = setInterval(function () { GameLoop(game);}, 1000 / this.config.fps);
};
// Returns the current state.
Game.prototype.currentState = function() {
return this.stateStack.length > 0 ? this.stateStack[this.stateStack.length - 1] : null;
};
// Mutes or unmutes the game.
Game.prototype.mute = function(mute) {
// If we've been told to mute, mute.
if(mute === true) {
this.sounds.mute = true;
} else if (mute === false) {
this.sounds.mute = false;
} else {
// Toggle mute instead...
this.sounds.mute = this.sounds.mute ? false : true;
}
};
// The main loop.
function GameLoop(game) {
var currentState = game.currentState();
if(currentState) {
// Delta t is the time to update/draw.
var dt = 1 / game.config.fps;
// Get the drawing context.
var ctx = this.gameCanvas.getContext("2d");
// Update if we have an update function. Also draw
// if we have a draw function.
if(currentState.update) {
currentState.update(game, dt);
}
if(currentState.draw) {
currentState.draw(game, dt, ctx);
}
}
}
Game.prototype.pushState = function(state) {
// If there's an enter function for the new state, call it.
if(state.enter) {
state.enter(game);
}
// Set the current state.
this.stateStack.push(state);
};
Game.prototype.popState = function() {
// Leave and pop the state.
if(this.currentState()) {
if(this.currentState().leave) {
this.currentState().leave(game);
}
// Set the current state.
this.stateStack.pop();
}
};
// The stop function stops the game.
Game.prototype.stop = function Stop() {
clearInterval(this.intervalId);
};
// Inform the game a key is down.
Game.prototype.keyDown = function(keyCode) {
this.pressedKeys[keyCode] = true;
// Delegate to the current state too.
if(this.currentState() && this.currentState().keyDown) {
this.currentState().keyDown(this, keyCode);
}
};
Game.prototype.touchstart = function(s) {
if(this.currentState() && this.currentState().keyDown) {
this.currentState().keyDown(this, KEY_SPACE);
}
};
Game.prototype.touchend = function(s) {
delete this.pressedKeys[KEY_RIGHT];
delete this.pressedKeys[KEY_LEFT];
};
Game.prototype.touchmove = function(e) {
var currentX = e.changedTouches[0].pageX;
if (this.previousX > 0) {
if (currentX > this.previousX) {
delete this.pressedKeys[KEY_LEFT];
this.pressedKeys[KEY_RIGHT] = true;
} else {
delete this.pressedKeys[KEY_RIGHT];
this.pressedKeys[KEY_LEFT] = true;
}
}
this.previousX = currentX;
};
// Inform the game a key is up.
Game.prototype.keyUp = function(keyCode) {
delete this.pressedKeys[keyCode];
// Delegate to the current state too.
if(this.currentState() && this.currentState().keyUp) {
this.currentState().keyUp(this, keyCode);
}
};
function WelcomeState() {
}
WelcomeState.prototype.enter = function(game) {
// Create and load the sounds.
game.sounds = new Sounds();
game.sounds.init();
game.sounds.loadSound('shoot', 'sounds/shoot.wav');
game.sounds.loadSound('bang', 'sounds/bang.wav');
game.sounds.loadSound('explosion', 'sounds/explosion.wav');
};
WelcomeState.prototype.update = function (game, dt) {
};
WelcomeState.prototype.draw = function(game, dt, ctx) {
// Clear the background.
ctx.clearRect(0, 0, game.width, game.height);
ctx.font="30px Arial";
ctx.fillStyle = '#ffffff';
ctx.textBaseline="middle";
ctx.textAlign="center";
ctx.fillText("Space Invaders", game.width / 2, game.height/2 - 40);
ctx.font="16px Arial";
ctx.fillText("Press 'Space' or touch to start.", game.width / 2, game.height/2);
};
WelcomeState.prototype.keyDown = function(game, keyCode) {
if(keyCode == KEY_SPACE) {
// Space starts the game.
game.level = 1;
game.score = 0;
game.lives = 3;
game.moveToState(new LevelIntroState(game.level));
}
};
function GameOverState() {
}
GameOverState.prototype.update = function(game, dt) {
};
GameOverState.prototype.draw = function(game, dt, ctx) {
// Clear the background.
ctx.clearRect(0, 0, game.width, game.height);
ctx.font="30px Arial";
ctx.fillStyle = '#ffffff';
ctx.textBaseline="center";
ctx.textAlign="center";
ctx.fillText("Game Over!", game.width / 2, game.height/2 - 40);
ctx.font="16px Arial";
ctx.fillText("You scored " + game.score + " and got to level " + game.level, game.width / 2, game.height/2);
ctx.font="16px Arial";
ctx.fillText("Press 'Space' to play again.", game.width / 2, game.height/2 + 40);
};
GameOverState.prototype.keyDown = function(game, keyCode) {
if(keyCode == KEY_SPACE) {
// Space restarts the game.
game.lives = 3;
game.score = 0;
game.level = 1;
game.moveToState(new LevelIntroState(1));
}
};
// Create a PlayState with the game config and the level you are on.
function PlayState(config, level) {
this.config = config;
this.level = level;
// Game state.
this.invaderCurrentVelocity = 10;
this.invaderCurrentDropDistance = 0;
this.invadersAreDropping = false;
this.lastRocketTime = null;
// Game entities.
this.ship = null;
this.invaders = [];
this.rockets = [];
this.bombs = [];
}
PlayState.prototype.enter = function(game) {
// Create the ship.
this.ship = new Ship(game.width / 2, game.gameBounds.bottom);
// Setup initial state.
this.invaderCurrentVelocity = 10;
this.invaderCurrentDropDistance = 0;
this.invadersAreDropping = false;
// Set the ship speed for this level, as well as invader params.
var levelMultiplier = this.level * this.config.levelDifficultyMultiplier;
var limitLevel = (this.level < this.config.limitLevelIncrease ? this.level : this.config.limitLevelIncrease);
this.shipSpeed = this.config.shipSpeed;
this.invaderInitialVelocity = this.config.invaderInitialVelocity + 1.5 * (levelMultiplier * this.config.invaderInitialVelocity);
this.bombRate = this.config.bombRate + (levelMultiplier * this.config.bombRate);
this.bombMinVelocity = this.config.bombMinVelocity + (levelMultiplier * this.config.bombMinVelocity);
this.bombMaxVelocity = this.config.bombMaxVelocity + (levelMultiplier * this.config.bombMaxVelocity);
this.rocketMaxFireRate = this.config.rocketMaxFireRate + 0.4 * limitLevel;
// Create the invaders.
var ranks = this.config.invaderRanks + 0.1 * limitLevel;
var files = this.config.invaderFiles + 0.2 * limitLevel;
var invaders = [];
for(var rank = 0; rank < ranks; rank++){
for(var file = 0; file < files; file++) {
invaders.push(new Invader(
(game.width / 2) + ((files/2 - file) * 200 / files),
(game.gameBounds.top + rank * 20),
rank, file, 'Invader'));
}
}
this.invaders = invaders;
this.invaderCurrentVelocity = this.invaderInitialVelocity;
this.invaderVelocity = {x: -this.invaderInitialVelocity, y:0};
this.invaderNextVelocity = null;
};
PlayState.prototype.update = function(game, dt) {
// If the left or right arrow keys are pressed, move
// the ship. Check this on ticks rather than via a keydown
// event for smooth movement, otherwise the ship would move
// more like a text editor caret.
if(game.pressedKeys[KEY_LEFT]) {
this.ship.x -= this.shipSpeed * dt;
}
if(game.pressedKeys[KEY_RIGHT]) {
this.ship.x += this.shipSpeed * dt;
}
if(game.pressedKeys[KEY_SPACE]) {
this.fireRocket();
}
// Keep the ship in bounds.
if(this.ship.x < game.gameBounds.left) {
this.ship.x = game.gameBounds.left;
}
if(this.ship.x > game.gameBounds.right) {
this.ship.x = game.gameBounds.right;
}
// Move each bomb.
for(var i=0; i<this.bombs.length; i++) {
var bomb = this.bombs[i];
bomb.y += dt * bomb.velocity;
// If the rocket has gone off the screen remove it.
if(bomb.y > this.height) {
this.bombs.splice(i--, 1);
}
}
// Move each rocket.
for(i=0; i<this.rockets.length; i++) {
var rocket = this.rockets[i];
rocket.y -= dt * rocket.velocity;
// If the rocket has gone off the screen remove it.
if(rocket.y < 0) {
this.rockets.splice(i--, 1);
}
}
// Move the invaders.
var hitLeft = false, hitRight = false, hitBottom = false;
for(i=0; i<this.invaders.length; i++) {
var invader = this.invaders[i];
var newx = invader.x + this.invaderVelocity.x * dt;
var newy = invader.y + this.invaderVelocity.y * dt;
if(hitLeft == false && newx < game.gameBounds.left) {
hitLeft = true;
}
else if(hitRight == false && newx > game.gameBounds.right) {
hitRight = true;
}
else if(hitBottom == false && newy > game.gameBounds.bottom) {
hitBottom = true;
}
if(!hitLeft && !hitRight && !hitBottom) {
invader.x = newx;
invader.y = newy;
}
}
// Update invader velocities.
if(this.invadersAreDropping) {
this.invaderCurrentDropDistance += this.invaderVelocity.y * dt;
if(this.invaderCurrentDropDistance >= this.config.invaderDropDistance) {
this.invadersAreDropping = false;
this.invaderVelocity = this.invaderNextVelocity;
this.invaderCurrentDropDistance = 0;
}
}
// If we've hit the left, move down then right.
if(hitLeft) {
this.invaderCurrentVelocity += this.config.invaderAcceleration;
this.invaderVelocity = {x: 0, y:this.invaderCurrentVelocity };
this.invadersAreDropping = true;
this.invaderNextVelocity = {x: this.invaderCurrentVelocity , y:0};
}
// If we've hit the right, move down then left.
if(hitRight) {
this.invaderCurrentVelocity += this.config.invaderAcceleration;
this.invaderVelocity = {x: 0, y:this.invaderCurrentVelocity };
this.invadersAreDropping = true;
this.invaderNextVelocity = {x: -this.invaderCurrentVelocity , y:0};
}
// If we've hit the bottom, it's game over.
if(hitBottom) {
game.lives = 0;
}
// Check for rocket/invader collisions.
for(i=0; i<this.invaders.length; i++) {
var invader = this.invaders[i];
var bang = false;
for(var j=0; j<this.rockets.length; j++){
var rocket = this.rockets[j];
if(rocket.x >= (invader.x - invader.width/2) && rocket.x <= (invader.x + invader.width/2) &&
rocket.y >= (invader.y - invader.height/2) && rocket.y <= (invader.y + invader.height/2)) {
// Remove the rocket, set 'bang' so we don't process
// this rocket again.
this.rockets.splice(j--, 1);
bang = true;
game.score += this.config.pointsPerInvader;
break;
}
}
if(bang) {
this.invaders.splice(i--, 1);
game.sounds.playSound('bang');
}
}
// Find all of the front rank invaders.
var frontRankInvaders = {};
for(var i=0; i<this.invaders.length; i++) {
var invader = this.invaders[i];
// If we have no invader for game file, or the invader
// for game file is futher behind, set the front
// rank invader to game one.
if(!frontRankInvaders[invader.file] || frontRankInvaders[invader.file].rank < invader.rank) {
frontRankInvaders[invader.file] = invader;
}
}
// Give each front rank invader a chance to drop a bomb.
for(var i=0; i<this.config.invaderFiles; i++) {
var invader = frontRankInvaders[i];
if(!invader) continue;
var chance = this.bombRate * dt;
if(chance > Math.random()) {
// Fire!
this.bombs.push(new Bomb(invader.x, invader.y + invader.height / 2,
this.bombMinVelocity + Math.random()*(this.bombMaxVelocity - this.bombMinVelocity)));
}
}
// Check for bomb/ship collisions.
for(var i=0; i<this.bombs.length; i++) {
var bomb = this.bombs[i];
if(bomb.x >= (this.ship.x - this.ship.width/2) && bomb.x <= (this.ship.x + this.ship.width/2) &&
bomb.y >= (this.ship.y - this.ship.height/2) && bomb.y <= (this.ship.y + this.ship.height/2)) {
this.bombs.splice(i--, 1);
game.lives--;
game.sounds.playSound('explosion');
}
}
// Check for invader/ship collisions.
for(var i=0; i<this.invaders.length; i++) {
var invader = this.invaders[i];
if((invader.x + invader.width/2) > (this.ship.x - this.ship.width/2) &&
(invader.x - invader.width/2) < (this.ship.x + this.ship.width/2) &&
(invader.y + invader.height/2) > (this.ship.y - this.ship.height/2) &&
(invader.y - invader.height/2) < (this.ship.y + this.ship.height/2)) {
// Dead by collision!
game.lives = 0;
game.sounds.playSound('explosion');
}
}
// Check for failure
if(game.lives <= 0) {
game.moveToState(new GameOverState());
}
// Check for victory
if(this.invaders.length === 0) {
game.score += this.level * 50;
game.level += 1;
game.moveToState(new LevelIntroState(game.level));
}
};
PlayState.prototype.draw = function(game, dt, ctx) {
// Clear the background.
ctx.clearRect(0, 0, game.width, game.height);
// Draw ship.
ctx.fillStyle = '#999999';
ctx.fillRect(this.ship.x - (this.ship.width / 2), this.ship.y - (this.ship.height / 2), this.ship.width, this.ship.height);
// Draw invaders.
ctx.fillStyle = '#006600';
for(var i=0; i<this.invaders.length; i++) {
var invader = this.invaders[i];
ctx.fillRect(invader.x - invader.width/2, invader.y - invader.height/2, invader.width, invader.height);
}
// Draw bombs.
ctx.fillStyle = '#ff5555';
for(var i=0; i<this.bombs.length; i++) {
var bomb = this.bombs[i];
ctx.fillRect(bomb.x - 2, bomb.y - 2, 4, 4);
}
// Draw rockets.
ctx.fillStyle = '#ff0000';
for(var i=0; i<this.rockets.length; i++) {
var rocket = this.rockets[i];
ctx.fillRect(rocket.x, rocket.y - 2, 1, 4);
}
// Draw info.
var textYpos = game.gameBounds.bottom + ((game.height - game.gameBounds.bottom) / 2) + 14/2;
ctx.font="14px Arial";
ctx.fillStyle = '#ffffff';
var info = "Lives: " + game.lives;
ctx.textAlign = "left";
ctx.fillText(info, game.gameBounds.left, textYpos);
info = "Score: " + game.score + ", Level: " + game.level;
ctx.textAlign = "right";
ctx.fillText(info, game.gameBounds.right, textYpos);
// If we're in debug mode, draw bounds.
if(this.config.debugMode) {
ctx.strokeStyle = '#ff0000';
ctx.strokeRect(0,0,game.width, game.height);
ctx.strokeRect(game.gameBounds.left, game.gameBounds.top,
game.gameBounds.right - game.gameBounds.left,
game.gameBounds.bottom - game.gameBounds.top);
}
};
PlayState.prototype.keyDown = function(game, keyCode) {
if(keyCode == KEY_SPACE) {
// Fire!
this.fireRocket();
}
if(keyCode == 80) {
// Push the pause state.
game.pushState(new PauseState());
}
};
PlayState.prototype.keyUp = function(game, keyCode) {
};
PlayState.prototype.fireRocket = function() {
// If we have no last rocket time, or the last rocket time
// is older than the max rocket rate, we can fire.
if(this.lastRocketTime === null || ((new Date()).valueOf() - this.lastRocketTime) > (1000 / this.rocketMaxFireRate))
{
// Add a rocket.
this.rockets.push(new Rocket(this.ship.x, this.ship.y - 12, this.config.rocketVelocity));
this.lastRocketTime = (new Date()).valueOf();
// Play the 'shoot' sound.
game.sounds.playSound('shoot');
}
};
function PauseState() {
}
PauseState.prototype.keyDown = function(game, keyCode) {
if(keyCode == 80) {
// Pop the pause state.
game.popState();
}
};
PauseState.prototype.draw = function(game, dt, ctx) {
// Clear the background.
ctx.clearRect(0, 0, game.width, game.height);
ctx.font="14px Arial";
ctx.fillStyle = '#ffffff';
ctx.textBaseline="middle";
ctx.textAlign="center";
ctx.fillText("Paused", game.width / 2, game.height/2);
return;
};
/*
Level Intro State
The Level Intro state shows a 'Level X' message and
a countdown for the level.
*/
function LevelIntroState(level) {
this.level = level;
this.countdownMessage = "3";
}
LevelIntroState.prototype.update = function(game, dt) {
// Update the countdown.
if(this.countdown === undefined) {
this.countdown = 3; // countdown from 3 secs
}
this.countdown -= dt;
if(this.countdown < 2) {
this.countdownMessage = "2";
}
if(this.countdown < 1) {
this.countdownMessage = "1";
}
if(this.countdown <= 0) {
// Move to the next level, popping this state.
game.moveToState(new PlayState(game.config, this.level));
}
};
LevelIntroState.prototype.draw = function(game, dt, ctx) {
// Clear the background.
ctx.clearRect(0, 0, game.width, game.height);
ctx.font="36px Arial";
ctx.fillStyle = '#ffffff';
ctx.textBaseline="middle";
ctx.textAlign="center";
ctx.fillText("Level " + this.level, game.width / 2, game.height/2);
ctx.font="24px Arial";
ctx.fillText("Ready in " + this.countdownMessage, game.width / 2, game.height/2 + 36);
return;
};
/*
Ship
The ship has a position and that's about it.
*/
function Ship(x, y) {
this.x = x;
this.y = y;
this.width = 20;
this.height = 16;
}
/*
Rocket
Fired by the ship, they've got a position, velocity and state.
*/
function Rocket(x, y, velocity) {
this.x = x;
this.y = y;
this.velocity = velocity;
}
/*
Bomb
Dropped by invaders, they've got position, velocity.
*/
function Bomb(x, y, velocity) {
this.x = x;
this.y = y;
this.velocity = velocity;
}
/*
Invader
Invader's have position, type, rank/file and that's about it.
*/
function Invader(x, y, rank, file, type) {
this.x = x;
this.y = y;
this.rank = rank;
this.file = file;
this.type = type;
this.width = 18;
this.height = 14;
}
/*
Game State
A Game State is simply an update and draw proc.
When a game is in the state, the update and draw procs are
called, with a dt value (dt is delta time, i.e. the number)
of seconds to update or draw).
*/
function GameState(updateProc, drawProc, keyDown, keyUp, enter, leave) {
this.updateProc = updateProc;
this.drawProc = drawProc;
this.keyDown = keyDown;
this.keyUp = keyUp;
this.enter = enter;
this.leave = leave;
}
/*
Sounds
The sounds class is used to asynchronously load sounds and allow
them to be played.
*/
function Sounds() {
// The audio context.
this.audioContext = null;
// The actual set of loaded sounds.
this.sounds = {};
}
Sounds.prototype.init = function() {
// Create the audio context, paying attention to webkit browsers.
context = window.AudioContext || window.webkitAudioContext;
this.audioContext = new context();
this.mute = false;
};
Sounds.prototype.loadSound = function(name, url) {
// Reference to ourselves for closures.
var self = this;
// Create an entry in the sounds object.
this.sounds[name] = null;
// Create an asynchronous request for the sound.
var req = new XMLHttpRequest();
req.open('GET', url, true);
req.responseType = 'arraybuffer';
req.onload = function() {
self.audioContext.decodeAudioData(req.response, function(buffer) {
self.sounds[name] = {buffer: buffer};
});
};
try {
req.send();
} catch(e) {
console.log("An exception occured getting sound the sound " + name + " this might be " +
"because the page is running from the file system, not a webserver.");
console.log(e);
}
};
Sounds.prototype.playSound = function(name) {
// If we've not got the sound, don't bother playing it.
if(this.sounds[name] === undefined || this.sounds[name] === null || this.mute === true) {
return;
}
// Create a sound source, set the buffer, connect to the speakers and
// play the sound.
var source = this.audioContext.createBufferSource();
source.buffer = this.sounds[name].buffer;
source.connect(this.audioContext.destination);
source.start(0);
};
================================================
FILE: js/starfield.js
================================================
/*
Starfield lets you take a div and turn it into a starfield.
*/
// Define the starfield class.
function Starfield() {
this.fps = 30;
this.canvas = null;
this.width = 0;
this.width = 0;
this.minVelocity = 15;
this.maxVelocity = 30;
this.stars = 100;
this.intervalId = 0;
}
// The main function - initialises the starfield.
Starfield.prototype.initialise = function(div) {
var self = this;
// Store the div.
this.containerDiv = div;
self.width = window.innerWidth;
self.height = window.innerHeight;
window.onresize = function(event) {
self.width = window.innerWidth;
self.height = window.innerHeight;
self.canvas.width = self.width;
self.canvas.height = self.height;
self.draw();
}
// Create the canvas.
var canvas = document.createElement('canvas');
div.appendChild(canvas);
this.canvas = canvas;
this.canvas.width = this.width;
this.canvas.height = this.height;
};
Starfield.prototype.start = function() {
// Create the stars.
var stars = [];
for(var i=0; i<this.stars; i++) {
stars[i] = new Star(Math.random()*this.width, Math.random()*this.height, Math.random()*3+1,
(Math.random()*(this.maxVelocity - this.minVelocity))+this.minVelocity);
}
this.stars = stars;
var self = this;
// Start the timer.
this.intervalId = setInterval(function() {
self.update();
self.draw();
}, 1000 / this.fps);
};
Starfield.prototype.stop = function() {
clearInterval(this.intervalId);
};
Starfield.prototype.update = function() {
var dt = 1 / this.fps;
for(var i=0; i<this.stars.length; i++) {
var star = this.stars[i];
star.y += dt * star.velocity;
// If the star has moved from the bottom of the screen, spawn it at the top.
if(star.y > this.height) {
this.stars[i] = new Star(Math.random()*this.width, 0, Math.random()*3+1,
(Math.random()*(this.maxVelocity - this.minVelocity))+this.minVelocity);
}
}
};
Starfield.prototype.draw = function() {
// Get the drawing context.
var ctx = this.canvas.getContext("2d");
// Draw the background.
ctx.fillStyle = '#000000';
ctx.fillRect(0, 0, this.width, this.height);
// Draw stars.
ctx.fillStyle = '#ffffff';
for(var i=0; i<this.stars.length;i++) {
var star = this.stars[i];
ctx.fillRect(star.x, star.y, star.size, star.size);
}
};
function Star(x, y, size, velocity) {
this.x = x;
this.y = y;
this.size = size;
this.velocity = velocity;
}
================================================
FILE: makefile
================================================
build:
# Cleanup the artifacts folder, create the distribution location.
rm -rf artifacts || true
mkdir artifacts
mkdir artifacts/dist
# Copy over the static site files.
cp -r index.html css js sounds artifacts/dist/.
.PHONY: build
gitextract_h53fahbv/ ├── .github/ │ ├── FUNDING.yml │ └── workflows/ │ └── main.yml ├── .gitignore ├── .replit ├── LICENSE ├── README.md ├── css/ │ ├── core.css │ └── typeography.css ├── index.html ├── js/ │ ├── spaceinvaders.js │ └── starfield.js └── makefile
SYMBOL INDEX (15 symbols across 2 files)
FILE: js/spaceinvaders.js
function Game (line 30) | function Game() {
function GameLoop (line 150) | function GameLoop(game) {
function WelcomeState (line 242) | function WelcomeState() {
function GameOverState (line 286) | function GameOverState() {
function PlayState (line 321) | function PlayState(config, level) {
function PauseState (line 641) | function PauseState() {
function LevelIntroState (line 672) | function LevelIntroState(level) {
function Ship (line 721) | function Ship(x, y) {
function Rocket (line 734) | function Rocket(x, y, velocity) {
function Bomb (line 746) | function Bomb(x, y, velocity) {
function Invader (line 758) | function Invader(x, y, rank, file, type) {
function GameState (line 777) | function GameState(updateProc, drawProc, keyDown, keyUp, enter, leave) {
function Sounds (line 794) | function Sounds() {
FILE: js/starfield.js
function Starfield (line 7) | function Starfield() {
function Star (line 96) | function Star(x, y, size, velocity) {
Condensed preview — 12 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (39K chars).
[
{
"path": ".github/FUNDING.yml",
"chars": 53,
"preview": "# Support 'GitHub Sponsors' funding.\ngithub: dwmkerr\n"
},
{
"path": ".github/workflows/main.yml",
"chars": 594,
"preview": "name: Publish to GitHub Pages\non:\n push:\t\n branches:\t\n - master\njobs:\n build-and-deploy:\n runs-on: ubuntu-l"
},
{
"path": ".gitignore",
"chars": 62,
"preview": "spaceinvaders.sublime-project\nspaceinvaders.sublime-workspace\n"
},
{
"path": ".replit",
"chars": 27,
"preview": "language = \"html\"\nrun = \"\"\n"
},
{
"path": "LICENSE",
"chars": 1066,
"preview": "MIT License\n\nCopyright (c) 2019 Dave Kerr\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\n"
},
{
"path": "README.md",
"chars": 2611,
"preview": "# Space Invaders\n\nThe classic Space Invaders game written in JavaScript as a learning exercise.\n\nNo jQuery or any other "
},
{
"path": "css/core.css",
"chars": 959,
"preview": "/* core.css */\n/* lean and simple css reset, based on Tantek Celik's reset - see comments below. */\n/* (c) 2004-2010 Tan"
},
{
"path": "css/typeography.css",
"chars": 502,
"preview": "body {\n\tfont-family: \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n\tfont-size: 14px;\n\tline-height: 20px;\n\tcolor: #3333"
},
{
"path": "index.html",
"chars": 4167,
"preview": "<!DOCTYPE html>\n<html>\n <head>\n <title>Space Invaders</title>\n <link rel=\"stylesheet\" type=\"text/css\" h"
},
{
"path": "js/spaceinvaders.js",
"chars": 24346,
"preview": "/*\n spaceinvaders.js\n\n the core logic for the space invaders game.\n\n*/\n\n/* \n Game Class\n\n The Game class repres"
},
{
"path": "js/starfield.js",
"chars": 2379,
"preview": "/*\n\tStarfield lets you take a div and turn it into a starfield.\n\n*/\n\n//\tDefine the starfield class.\nfunction Starfield()"
},
{
"path": "makefile",
"chars": 240,
"preview": "build:\n\t# Cleanup the artifacts folder, create the distribution location.\n\trm -rf artifacts || true\n\tmkdir artifacts\n\tmk"
}
]
About this extraction
This page contains the full source code of the dwmkerr/spaceinvaders GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 12 files (36.1 KB), approximately 9.8k tokens, and a symbol index with 15 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.