Created
November 20, 2017 07:50
-
-
Save writingdeveloper/e760a7d22a51cedfee6f4b0b00d6c02e to your computer and use it in GitHub Desktop.
Final
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
// Enemies our player must avoid | |
var Enemy = function(x, y, speed) { | |
this.x = x; | |
this.y = y; | |
this.speed = speed; | |
// The sprite continuously crops and displays the image. | |
this.sprite = 'images/enemy-bug.png'; | |
}; | |
var Enemy_Rock = function(x, y, speed) { | |
this.x = x; | |
this.y = y; | |
this.speed = speed; | |
// The sprite continuously crops and displays the image. | |
this.sprite = 'images/Rock.png'; | |
}; | |
Enemy_Rock.prototype.update = function(dt) { | |
this.x += this.speed * dt; | |
if (this.x >= 505) { | |
this.x = 0; | |
} | |
checkCollision(this); | |
}; | |
Enemy_Rock.prototype.render = function() { | |
ctx.drawImage(Resources.get(this.sprite), this.x, this.y); | |
}; | |
// Update the enemy's position, required method for game | |
// Parameter: dt, a time delta between ticks | |
Enemy.prototype.update = function(dt) { | |
// You should multiply any movement by the dt parameter | |
// which will ensure the game runs at the same speed for | |
// all computers. | |
this.x += this.speed * dt; | |
// 505 defines the width of the Canvas. | |
// The code that initializes the left end again when the enemy is struck at the right end. | |
if (this.x >= 505) { | |
this.x = 0; | |
} | |
checkCollision(this); | |
}; | |
// * Draw the enemy on the screen, required method for game | |
Enemy.prototype.render = function() { | |
ctx.drawImage(Resources.get(this.sprite), this.x, this.y); | |
}; | |
// Definition Player | |
var Player = function(x, y, speed) { | |
this.x = x; | |
this.y = y; | |
this.speed = speed; | |
this.sprite = 'images/char-boy.png'; | |
}; | |
Player.prototype.update = function() {} | |
Player.prototype.render = function() { | |
ctx.drawImage(Resources.get(this.sprite), this.x, this.y); | |
displayScoreLevel(score, gameLevel); | |
}; | |
// KeyPress Settings | |
Player.prototype.handleInput = function(keyPress) { | |
if (keyPress == 'left') { | |
player.x -= player.speed; | |
} | |
if (keyPress == 'up') { | |
player.y -= player.speed - 20; | |
} | |
if (keyPress == 'right') { | |
player.x += player.speed; | |
} | |
if (keyPress == 'down') { | |
player.y += player.speed - 20; | |
} | |
console.log('keyPress is: ' + keyPress); | |
}; | |
// Display Score | |
var displayScoreLevel = function(aScore, aLevel) { | |
var canvas = document.getElementsByTagName('canvas'); | |
var firstCanvasTag = canvas[0]; | |
scoreLevelDiv.innerHTML = 'Score : ' + aScore + ' / ' + 'Level : ' + aLevel; | |
document.body.insertBefore(scoreLevelDiv, firstCanvasTag[0]); | |
}; | |
// Check Collision | |
var checkCollision = function(anEnemy) { | |
// check for collision between enemy and player | |
if ( | |
player.y + 131 >= anEnemy.y + 90 && | |
player.x + 25 <= anEnemy.x + 88 && | |
player.y + 73 <= anEnemy.y + 135 && | |
player.x + 76 >= anEnemy.x + 11) { | |
console.log('collided'); | |
// Position player after Collision | |
player.x = 202.5; | |
player.y = 383; | |
} | |
// check for player reaching top of canvas and winning the game | |
if (player.y + 63 <= 0) { | |
// if player wins, add 1 to the score and level | |
player.x = 202.5; | |
player.y = 383; | |
console.log('you made it!'); | |
ctx.fillStyle = 'white'; | |
ctx.fillRect(0, 0, 505, 350); | |
// pass score as an argument to the increaseDifficulty function | |
score += 1; | |
gameLevel += 1; | |
console.log('current score: ' + score + ', current level: ' + gameLevel); | |
increaseDifficulty(score); | |
} | |
// check if player runs into left, bottom, or right canvas walls | |
// prevent player from moving beyond canvas wall boundaries | |
if (player.y > 383) { | |
player.y = 383; | |
} | |
if (player.x > 402.5) { | |
player.x = 402.5; | |
} | |
if (player.x < 2.5) { | |
player.x = 2.5; | |
} | |
}; | |
// Increase number of enemies on screen based on player's score | |
var increaseDifficulty = function(numEnemies) { | |
// remove all previous enemies on canvas | |
allEnemies.length = 0; | |
// load new set of enemies | |
for (var i = 0; i <= numEnemies; i++) { | |
var enemy = new Enemy(0, Math.random() * 260 + 50, Math.random() * 256); | |
var enemy_rock = new Enemy_Rock(0, Math.random() * 260 + 50, Math.random() * 256); | |
allEnemies.push(enemy, enemy_rock); | |
} | |
}; | |
// Initial setting | |
var allEnemies = []; | |
var player = new Player(202.5, 383, 100); | |
var score = 0; | |
var gameLevel = 1; | |
var scoreLevelDiv = document.createElement('div'); | |
var enemy = new Enemy(0, Math.random() * 184 + 50, Math.random() * 256); | |
var enemy_rock = new Enemy_Rock(0, Math.random() * 184 + 50, Math.random() * 256); | |
allEnemies.push(enemy, enemy_rock); | |
// This listens for key presses and sends the keys to your | |
// Player.handleInput() method. You don't need to modify this. | |
document.addEventListener('keyup', function(e) { | |
var allowedKeys = { | |
37: 'left', | |
38: 'up', | |
39: 'right', | |
40: 'down' | |
}; | |
player.handleInput(allowedKeys[e.keyCode]); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment