Added invaders
This commit is contained in:
Nathan Woodburn
parent
48fc22f6e2
commit
0d261039f3
21
Invaders/index.html
Normal file
21
Invaders/index.html
Normal file
@ -0,0 +1,21 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Nathan Woodburn</title>
|
||||
<link rel="icon" type="image/png" href="../images/favicon.png"/>
|
||||
<link rel="icon" type="image/png" href="https://www.nathanwoodburn.tk/images/favicon.png"/>
|
||||
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'><link rel="stylesheet" href="./style.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<!-- partial:index.partial.html -->
|
||||
<p class="center">Space Invadors destroyed this page! Take revenge on them!
|
||||
<br/> Use <span class="label label-danger">Space</span> to shoot and <span class="label label-danger">←</span> <span class="label label-danger">→</span> to move!   <button class="btn btn-default btn-xs" id="restart">Restart</button></p>
|
||||
|
||||
<canvas id="space-invaders"/>
|
||||
<!-- partial -->
|
||||
<script src="./script.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
446
Invaders/script.js
Normal file
446
Invaders/script.js
Normal file
@ -0,0 +1,446 @@
|
||||
;(function() {
|
||||
"use strict";
|
||||
|
||||
// General
|
||||
var canvas,
|
||||
screen,
|
||||
gameSize,
|
||||
game;
|
||||
|
||||
// Assets
|
||||
var invaderCanvas,
|
||||
invaderMultiplier,
|
||||
invaderSize = 20,
|
||||
initialOffsetInvader,
|
||||
invaderAttackRate,
|
||||
invaderSpeed,
|
||||
invaderSpawnDelay = 250;
|
||||
|
||||
// Counter
|
||||
var i = 0,
|
||||
kills = 0,
|
||||
spawnDelayCounter = invaderSpawnDelay;
|
||||
|
||||
var invaderDownTimer;
|
||||
|
||||
// Text
|
||||
var blocks = [
|
||||
[3, 4, 8, 9, 10, 15, 16],
|
||||
[2, 4, 7, 11, 14, 16],
|
||||
[1, 4, 7, 11, 13, 16],
|
||||
[1, 2, 3, 4, 5, 7, 11, 13, 14, 15, 16, 17],
|
||||
[4, 7, 11, 16],
|
||||
[4, 8, 9, 10, 16]
|
||||
];
|
||||
|
||||
// Game Controller
|
||||
// ---------------
|
||||
var Game = function() {
|
||||
|
||||
this.level = -1;
|
||||
this.lost = false;
|
||||
|
||||
this.player = new Player();
|
||||
this.invaders = [];
|
||||
this.invaderShots = [];
|
||||
|
||||
if (invaderDownTimer === undefined) {
|
||||
invaderDownTimer = setInterval(function() {
|
||||
for (i = 0; i < game.invaders.length; i++) game.invaders[i].move();
|
||||
}, 1000 - (this.level * 1.8));
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
Game.prototype = {
|
||||
update: function() {
|
||||
|
||||
// Next level
|
||||
if (game.invaders.length === 0) {
|
||||
|
||||
spawnDelayCounter += 1;
|
||||
if (spawnDelayCounter < invaderSpawnDelay) return;
|
||||
|
||||
this.level += 1;
|
||||
|
||||
invaderAttackRate -= 0.002;
|
||||
invaderSpeed += 10;
|
||||
|
||||
game.invaders = createInvaders();
|
||||
|
||||
spawnDelayCounter = 0;
|
||||
}
|
||||
|
||||
if (!this.lost) {
|
||||
|
||||
// Collision
|
||||
game.player.projectile.forEach(function(projectile) {
|
||||
game.invaders.forEach(function(invader) {
|
||||
if (collides(projectile, invader)) {
|
||||
invader.destroy();
|
||||
projectile.active = false;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
this.invaderShots.forEach(function(invaderShots) {
|
||||
if (collides(invaderShots, game.player)) {
|
||||
game.player.destroy();
|
||||
}
|
||||
});
|
||||
|
||||
for (i = 0; i < game.invaders.length; i++) game.invaders[i].update();
|
||||
|
||||
}
|
||||
|
||||
// Don't stop player & projectiles.. they look nice
|
||||
game.player.update();
|
||||
for (i = 0; i < game.invaderShots.length; i++) game.invaderShots[i].update();
|
||||
|
||||
this.invaders = game.invaders.filter(function(invader) {
|
||||
return invader.active;
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
draw: function() {
|
||||
|
||||
if (this.lost) {
|
||||
screen.fillStyle = "rgba(0, 0, 0, 0.03)";
|
||||
screen.fillRect(0, 0, gameSize.width, gameSize.height);
|
||||
|
||||
screen.font = "55px Lucida Console";
|
||||
screen.textAlign = "center";
|
||||
screen.fillStyle = "white";
|
||||
screen.fillText("You lost", gameSize.width / 2, gameSize.height / 2);
|
||||
screen.font = "20px Lucida Console";
|
||||
screen.fillText("Points: " + kills, gameSize.width / 2, gameSize.height / 2 + 30);
|
||||
|
||||
} else {
|
||||
screen.clearRect(0, 0, gameSize.width, gameSize.height);
|
||||
|
||||
screen.font = "10px Lucida Console";
|
||||
screen.textAlign = "right";
|
||||
screen.fillText("Points: " + kills, gameSize.width, gameSize.height - 12);
|
||||
}
|
||||
|
||||
screen.beginPath();
|
||||
|
||||
var i;
|
||||
this.player.draw();
|
||||
if (!this.lost)
|
||||
for (i = 0; i < this.invaders.length; i++) this.invaders[i].draw();
|
||||
for (i = 0; i < this.invaderShots.length; i++) this.invaderShots[i].draw();
|
||||
|
||||
screen.fill();
|
||||
|
||||
},
|
||||
|
||||
invadersBelow: function(invader) {
|
||||
return this.invaders.filter(function(b) {
|
||||
return Math.abs(invader.coordinates.x - b.coordinates.x) === 0 &&
|
||||
b.coordinates.y > invader.coordinates.y;
|
||||
}).length > 0;
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
// Invaders
|
||||
// --------
|
||||
var Invader = function(coordinates) {
|
||||
this.active = true;
|
||||
this.coordinates = coordinates;
|
||||
this.size = {
|
||||
width: invaderSize,
|
||||
height: invaderSize
|
||||
};
|
||||
|
||||
this.patrolX = 0;
|
||||
this.speedX = invaderSpeed;
|
||||
|
||||
};
|
||||
|
||||
Invader.prototype = {
|
||||
update: function() {
|
||||
|
||||
if (Math.random() > invaderAttackRate && !game.invadersBelow(this)) {
|
||||
var projectile = new Projectile({
|
||||
x: this.coordinates.x + this.size.width / 2,
|
||||
y: this.coordinates.y + this.size.height - 5
|
||||
}, {
|
||||
x: 0,
|
||||
y: 2
|
||||
});
|
||||
game.invaderShots.push(projectile);
|
||||
}
|
||||
|
||||
},
|
||||
draw: function() {
|
||||
if (this.active) screen.drawImage(invaderCanvas, this.coordinates.x, this.coordinates.y);
|
||||
|
||||
},
|
||||
move: function() {
|
||||
if (this.patrolX < 0 || this.patrolX > 100) {
|
||||
this.speedX = -this.speedX;
|
||||
this.patrolX += this.speedX;
|
||||
this.coordinates.y += this.size.height;
|
||||
|
||||
if (this.coordinates.y + this.size.height * 2 > gameSize.height) game.lost = true;
|
||||
|
||||
} else {
|
||||
this.coordinates.x += this.speedX;
|
||||
this.patrolX += this.speedX;
|
||||
}
|
||||
|
||||
},
|
||||
destroy: function() {
|
||||
this.active = false;
|
||||
kills += 1;
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
// Player
|
||||
// ------
|
||||
var Player = function() {
|
||||
this.active = true;
|
||||
this.size = {
|
||||
width: 16,
|
||||
height: 8
|
||||
};
|
||||
this.shooterHeat = -3;
|
||||
this.coordinates = {
|
||||
x: gameSize.width / 2 - (this.size.width / 2) | 0,
|
||||
y: gameSize.height - this.size.height * 2
|
||||
};
|
||||
|
||||
this.projectile = [];
|
||||
this.keyboarder = new KeyController();
|
||||
};
|
||||
|
||||
Player.prototype = {
|
||||
update: function() {
|
||||
|
||||
for (var i = 0; i < this.projectile.length; i++) this.projectile[i].update();
|
||||
|
||||
this.projectile = this.projectile.filter(function(projectile) {
|
||||
return projectile.active;
|
||||
});
|
||||
|
||||
if (!this.active) return;
|
||||
|
||||
if (this.keyboarder.isDown(this.keyboarder.KEYS.LEFT) && this.coordinates.x > 0) this.coordinates.x -= 2;
|
||||
else if (this.keyboarder.isDown(this.keyboarder.KEYS.RIGHT) && this.coordinates.x < gameSize.width - this.size.width) this.coordinates.x += 2;
|
||||
|
||||
if (this.keyboarder.isDown(this.keyboarder.KEYS.Space)) {
|
||||
this.shooterHeat += 1;
|
||||
if (this.shooterHeat < 0) {
|
||||
var projectile = new Projectile({
|
||||
x: this.coordinates.x + this.size.width / 2 - 1,
|
||||
y: this.coordinates.y - 1
|
||||
}, {
|
||||
x: 0,
|
||||
y: -7
|
||||
});
|
||||
this.projectile.push(projectile);
|
||||
} else if (this.shooterHeat > 12) this.shooterHeat = -3;
|
||||
} else {
|
||||
this.shooterHeat = -3;
|
||||
}
|
||||
|
||||
},
|
||||
draw: function() {
|
||||
if (this.active) {
|
||||
screen.rect(this.coordinates.x, this.coordinates.y, this.size.width, this.size.height);
|
||||
screen.rect(this.coordinates.x - 2, this.coordinates.y + 2, 20, 6);
|
||||
screen.rect(this.coordinates.x + 6, this.coordinates.y - 4, 4, 4);
|
||||
}
|
||||
|
||||
for (var i = 0; i < this.projectile.length; i++) this.projectile[i].draw();
|
||||
|
||||
},
|
||||
destroy: function() {
|
||||
this.active = false;
|
||||
game.lost = true;
|
||||
}
|
||||
};
|
||||
|
||||
// Projectile
|
||||
// ------
|
||||
var Projectile = function(coordinates, velocity) {
|
||||
this.active = true;
|
||||
this.coordinates = coordinates;
|
||||
this.size = {
|
||||
width: 3,
|
||||
height: 3
|
||||
};
|
||||
this.velocity = velocity;
|
||||
};
|
||||
|
||||
Projectile.prototype = {
|
||||
update: function() {
|
||||
this.coordinates.x += this.velocity.x;
|
||||
this.coordinates.y += this.velocity.y;
|
||||
|
||||
if (this.coordinates.y > gameSize.height || this.coordinates.y < 0) this.active = false;
|
||||
|
||||
},
|
||||
draw: function() {
|
||||
if (this.active) screen.rect(this.coordinates.x, this.coordinates.y, this.size.width, this.size.height);
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
// Keyboard input tracking
|
||||
// -----------------------
|
||||
var KeyController = function() {
|
||||
this.KEYS = {
|
||||
LEFT: 37,
|
||||
RIGHT: 39,
|
||||
Space: 32
|
||||
};
|
||||
var keyCode = [37, 39, 32];
|
||||
var keyState = {};
|
||||
|
||||
var counter;
|
||||
window.addEventListener('keydown', function(e) {
|
||||
for (counter = 0; counter < keyCode.length; counter++)
|
||||
if (keyCode[counter] == e.keyCode) {
|
||||
keyState[e.keyCode] = true;
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
window.addEventListener('keyup', function(e) {
|
||||
for (counter = 0; counter < keyCode.length; counter++)
|
||||
if (keyCode[counter] == e.keyCode) {
|
||||
keyState[e.keyCode] = false;
|
||||
e.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
this.isDown = function(keyCode) {
|
||||
return keyState[keyCode] === true;
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
// Other functions
|
||||
// ---------------
|
||||
function collides(a, b) {
|
||||
return a.coordinates.x < b.coordinates.x + b.size.width &&
|
||||
a.coordinates.x + a.size.width > b.coordinates.x &&
|
||||
a.coordinates.y < b.coordinates.y + b.size.height &&
|
||||
a.coordinates.y + a.size.height > b.coordinates.y;
|
||||
}
|
||||
|
||||
function getPixelRow(rowRaw) {
|
||||
var textRow = [],
|
||||
placer = 0,
|
||||
row = Math.floor(rowRaw / invaderMultiplier);
|
||||
if (row >= blocks.length) return [];
|
||||
for (var i = 0; i < blocks[row].length; i++) {
|
||||
var tmpContent = blocks[row][i] * invaderMultiplier;
|
||||
for (var j = 0; j < invaderMultiplier; j++) textRow[placer + j] = tmpContent + j;
|
||||
placer += invaderMultiplier;
|
||||
}
|
||||
return textRow;
|
||||
}
|
||||
|
||||
// Write Text
|
||||
// -----------
|
||||
function createInvaders() {
|
||||
var invaders = [];
|
||||
|
||||
var i = blocks.length * invaderMultiplier;
|
||||
while (i--) {
|
||||
var j = getPixelRow(i);
|
||||
for (var k = 0; k < j.length; k++) {
|
||||
invaders.push(new Invader({
|
||||
x: j[k] * invaderSize,
|
||||
y: i * invaderSize
|
||||
}));
|
||||
}
|
||||
}
|
||||
return invaders;
|
||||
}
|
||||
|
||||
// Start game
|
||||
// ----------
|
||||
window.addEventListener('load', function() {
|
||||
|
||||
var invaderAsset = new Image;
|
||||
invaderAsset.onload = function() {
|
||||
|
||||
invaderCanvas = document.createElement('canvas');
|
||||
invaderCanvas.width = invaderSize;
|
||||
invaderCanvas.height = invaderSize;
|
||||
invaderCanvas.getContext("2d").drawImage(invaderAsset, 0, 0);
|
||||
|
||||
// Game Creation
|
||||
canvas = document.getElementById("space-invaders");
|
||||
screen = canvas.getContext('2d');
|
||||
|
||||
initGameStart();
|
||||
loop();
|
||||
|
||||
};
|
||||
invaderAsset.src = "//stillh.art/project/spaceInvaders/invader.gif";
|
||||
|
||||
});
|
||||
|
||||
window.addEventListener('resize', function() {
|
||||
initGameStart();
|
||||
});
|
||||
document.getElementById('restart').addEventListener('click', function() {
|
||||
initGameStart();
|
||||
});
|
||||
|
||||
function initGameStart() {
|
||||
if (window.innerWidth > 1200) {
|
||||
screen.canvas.width = 1200;
|
||||
screen.canvas.height = 500;
|
||||
gameSize = {
|
||||
width: 1200,
|
||||
height: 500
|
||||
};
|
||||
invaderMultiplier = 3;
|
||||
initialOffsetInvader = 420;
|
||||
} else if (window.innerWidth > 800) {
|
||||
screen.canvas.width = 900;
|
||||
screen.canvas.height = 600;
|
||||
gameSize = {
|
||||
width: 900,
|
||||
height: 600
|
||||
};
|
||||
invaderMultiplier = 2;
|
||||
initialOffsetInvader = 280;
|
||||
} else {
|
||||
screen.canvas.width = 600;
|
||||
screen.canvas.height = 300;
|
||||
gameSize = {
|
||||
width: 600,
|
||||
height: 300
|
||||
};
|
||||
invaderMultiplier = 1;
|
||||
initialOffsetInvader = 140;
|
||||
}
|
||||
|
||||
kills = 0;
|
||||
invaderAttackRate = 0.999;
|
||||
invaderSpeed = 20;
|
||||
spawnDelayCounter = invaderSpawnDelay;
|
||||
|
||||
game = new Game();
|
||||
}
|
||||
|
||||
function loop() {
|
||||
game.update();
|
||||
game.draw();
|
||||
|
||||
requestAnimationFrame(loop);
|
||||
}
|
||||
|
||||
})();
|
||||
6
Invaders/style.css
Normal file
6
Invaders/style.css
Normal file
@ -0,0 +1,6 @@
|
||||
.center{text-align:center}
|
||||
#space-invaders {
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
background: white
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user