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
This is the bulk of the changes I made to your code
The important parts to look at are at the bottom. I renamed the collision method because it only works if the object is overlapping when the top left is inside the target container. To fix this we have to check both combinations of object ship vs alien and then alien vs ship. If either are collisions then it will report it.
As for why the collisions kept firing. You were augmenting your collision check with the height and width of the entity in question but the height was not the same as the draw size thus the collision box was bigger than the object in some cases I assume. This could be that your mages were smaller than the box you drew them into this the box is colliding even if the image was not.
Just for sake of testing I resized all the entities. These are not required changes I just wanted to make it easier for them to not overlap for a while.