-
-
Save ninjapanzer/a60991559d7b5da88421 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
| <html> | |
| <head></head> | |
| <body> | |
| <canvas id='canvasBg' height="600px" width="800px" style="position: absolute"></canvas> | |
| <canvas id='canvasEntities' height="600px" width="800px" style="position: absolute"></canvas> | |
| <div class='score'></div> | |
| <script src="./spaceblock.js"></script> | |
| </body> | |
| </html> |
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 = 50; | |
| this.width = 50; | |
| this.isMovingRight = false; | |
| this.isMovingLeft = false; | |
| } | |
| Spaceship.prototype.update = function() { | |
| if(this.isMovingRight) { | |
| this.drawX += 2; | |
| if(this.drawX >= canvasWidth - this.width) { | |
| 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(spaceship, alienShip)) { | |
| //console.log(collision); | |
| updateScore(); | |
| } | |
| if(collision(spaceship, alienShip2)) { | |
| //console.log(collision); | |
| updateScore(); | |
| } | |
| if(collision(spaceship, alienShip3)) { | |
| //console.log(collision); | |
| updateScore(); | |
| } | |
| } | |
| Spaceship.prototype.draw = function() { | |
| ctxEntities.drawImage(imgSprite2, this.drawX, this.drawY, this.width, this.height); | |
| } | |
| 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 >= canvasHeight - this.height && this.isMovingDown) { | |
| this.drawY = canvasHeight - this.height; | |
| 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, this.height, this.width); | |
| } | |
| 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 testCollision(a, b){ | |
| return a.drawX <= b.drawX + b.width && | |
| a.drawX >= b.drawX && | |
| a.drawY <= b.drawY + b.height && | |
| a.drawY >= b.drawY; | |
| } | |
| function collision(a, b) { | |
| return testCollision(a, b) || testCollision(b, a) | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment