Created
January 26, 2016 02:42
-
-
Save LessWig/78a0310276a6200416b2 to your computer and use it in GitHub Desktop.
Space Block code
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Okay! Thank you very much! @ninjapanzer