Skip to content

Instantly share code, notes, and snippets.

@LessWig
Created January 26, 2016 02:42
Show Gist options
  • Save LessWig/78a0310276a6200416b2 to your computer and use it in GitHub Desktop.
Save LessWig/78a0310276a6200416b2 to your computer and use it in GitHub Desktop.
Space Block code
var canvasBg = document.getElementById("canvasBg"),
ctxBg = canvasBg.getContext("2d"),
canvasEntities = document.getElementById("canvasEntities"),
ctxEntities = canvasEntities.getContext("2d"),
canvasWidth = canvasBg.width,
canvasHeight = canvasBg.height,
background = new Background(0, 0),
spaceship = new Spaceship(0, canvasHeight/2),
alienShip = new AlienShip(100, 0),
alienShip2 = new AlienShip(300, 500),
alienShip3 = new AlienShip(500, 0),
requestAnimFrame = window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
},
imgSprite = new Image(),
imgSprite2 = new Image(),
imgSprite3 = new Image();
imgSprite.src = "images/Background.png";
imgSprite.addEventListener("load", init, false); //3 zoom ins
imgSprite2.src = "images/Spaceship.png";
imgSprite2.addEventListener("load", init, false);
imgSprite3.src = "images/Alien Ship2.png";
imgSprite3.addEventListener("load", init, false);
var score = document.getElementsByClassName("score")[0];
score.style.position = "absolute";
score.style.height = 30;
score.style.width = 30;
score.style.fontsize = "30em";
score.style.top = "3%";
score.style.left = "14.5%";
score.style.background = "blue";
var scoreValue = 1;
function updateScore() {
score.innerHTML = scoreValue;
if(scoreValue > 0) {
scoreValue += 1;
} else {
scoreValue = 0;
}
}
function init() {
document.addEventListener("keydown", function(e) {checkKey(e, true);}, false);
document.addEventListener("keyup", function(e) {checkKey(e, false);}, false);
begin();
}
function begin() {
isPlaying = true;
requestAnimFrame(loop);
}
function update() {
clearCtx(ctxBg);
clearCtx(ctxEntities);
spaceship.update();
alienShip.update();
alienShip2.update();
alienShip3.update();
}
function draw() {
background.draw();
spaceship.draw();
alienShip.draw();
alienShip2.draw();
alienShip3.draw();
}
function loop() {
if (isPlaying) {
update();
draw();
requestAnimFrame(loop);
}
}
function clearCtx(ctx) {
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
}
function Background(x, y) {
this.drawX = x;
this.drawY = y;
this.height = canvasHeight;
this.width = canvasWidth;
}
Background.prototype.draw = function() {
ctxEntities.drawImage(imgSprite, this.drawX, this.drawY, canvasWidth, canvasHeight);
}
function Spaceship(x, y) {
this.drawX = x;
this.drawY = y;
this.height = 175;
this.width = 175;
this.isMovingRight = false;
this.isMovingLeft = false;
}
Spaceship.prototype.update = function() {
if(this.isMovingRight) {
this.drawX += 2;
if(this.drawX >= canvasWidth - 100) {
this.drawX = canvasWidth;
alert("You've made it past the aliens!");
location.reload(true);
}
}
if(this.isMovingLeft) {
this.drawX -= 2;
if(this.drawX <= 0) {
this.drawX = 0;
}
}
if(collision(alienShip, spaceship)) {
console.log(collision);
updateScore();
}
if(collision(alienShip2, spaceship)) {
console.log(collision);
updateScore();
}
if(collision(alienShip3, spaceship)) {
console.log(collision);
updateScore();
}
}
Spaceship.prototype.draw = function() {
ctxEntities.drawImage(imgSprite2, this.drawX, this.drawY, 175, 175);
}
function AlienShip(x, y) {
this.drawX = x;
this.drawY = y;
this.height = 125;
this.width = 125;
this.isMovingUp = false;
this.isMovingDown = true;
}
AlienShip.prototype.update = function() {
if(this.drawY <= 0) {
this.drawY = 0;
this.isMovingDown = true;
this.isMovingUp = false;
}
if(this.drawY >= 500 && this.isMovingDown) {
this.drawY = 500;
this.isMovingUp = true;
this.isMovingDown = false;
}
if(this.isMovingDown) {
this.drawY += randomRange(1, 6);
}
if(this.isMovingUp) {
this.drawY -= randomRange(3, 6);
}
}
AlienShip.prototype.draw = function() {
ctxEntities.drawImage(imgSprite3, this.drawX, this.drawY, 125, 125);
}
function randomRange (min, max) {
return Math.floor(Math.random() * (max + 1 - min)) + min;
}
function checkKey(e, value) {
var keyID = e.keyCode || e.which;
if(keyID === 39) {
spaceship.isMovingRight = value;
e.preventDefault();
}
if(keyID === 37) {
spaceship.isMovingLeft = value;
e.preventDefault();
}
}
function collision(a, b) {
return a.drawX <= b.drawX + b.width &&
a.drawX >= b.drawX &&
a.drawY <= b.drawY + b.height &&
a.drawY >= b.drawY;
}
@LessWig
Copy link
Author

LessWig commented Jan 27, 2016

Okay! Thank you very much! @ninjapanzer

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment