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;
}
@ninjapanzer
Copy link

This is my variant I will post a diff as well @LessWig

https://gist.github.com/ninjapanzer/a60991559d7b5da88421

@ninjapanzer
Copy link

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.

diff --git a/spaceblock.js b/spaceblock.js
index ffb5fde..e3f702d 100644
--- a/spaceblock.js
+++ b/spaceblock.js
@@ -101,8 +101,8 @@ Background.prototype.draw = function() {
 function Spaceship(x, y) {
    this.drawX = x;
    this.drawY = y;
-   this.height = 175;
-   this.width = 175;
+   this.height = 50;
+   this.width = 50;
    this.isMovingRight = false;
    this.isMovingLeft = false;
 }
@@ -110,7 +110,7 @@ function Spaceship(x, y) {
 Spaceship.prototype.update = function() {
    if(this.isMovingRight) {
        this.drawX += 2;
-       if(this.drawX >= canvasWidth - 100) {
+       if(this.drawX >= canvasWidth - this.width) {
            this.drawX = canvasWidth;
            alert("You've made it past the aliens!");
            location.reload(true);
@@ -122,22 +122,22 @@ Spaceship.prototype.update = function() {
            this.drawX = 0;
        }
    }
 Spaceship.prototype.draw = function() {
-   ctxEntities.drawImage(imgSprite2, this.drawX, this.drawY, 175, 175);
+   ctxEntities.drawImage(imgSprite2, this.drawX, this.drawY, this.width, this.height);
 }

 function AlienShip(x, y) {
@@ -155,8 +155,8 @@ AlienShip.prototype.update = function() {
        this.isMovingDown = true;
        this.isMovingUp = false;
    }
-   if(this.drawY >= 500 && this.isMovingDown) {
-       this.drawY = 500;
+   if(this.drawY >= canvasHeight - this.height && this.isMovingDown) {
+       this.drawY = canvasHeight - this.height;
        this.isMovingUp = true;
        this.isMovingDown = false;
    }
@@ -169,7 +169,7 @@ AlienShip.prototype.update = function() {
 }

 AlienShip.prototype.draw = function() {
-   ctxEntities.drawImage(imgSprite3, this.drawX, this.drawY, 125, 125);
+   ctxEntities.drawImage(imgSprite3, this.drawX, this.drawY, this.height, this.width);
 }

 function randomRange (min, max) {
@@ -188,9 +188,13 @@ function checkKey(e, value) {
    }
 }

-function collision(a, b) {
+function testCollision(a, b){
    return a.drawX <= b.drawX + b.width &&
        a.drawX >= b.drawX &&
        a.drawY <= b.drawY + b.height &&
        a.drawY >= b.drawY;
-}
\ No newline at end of file
+}
+
+function collision(a, b) {
+   return testCollision(a, b) || testCollision(b, a)
+}

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.

@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