diff --git a/index.html b/index.html index a8a564f..8b94922 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,14 @@ +
+

Select Character

+ + + + + +
diff --git a/js/app.js b/js/app.js index 3272739..209cf73 100644 --- a/js/app.js +++ b/js/app.js @@ -19,53 +19,108 @@ class Populate { } } +//Lives class +class Lives extends Populate { + constructor () { + this.x = 0; + this.y = + this.sprite = "images/Heart.png"; + } +} + //Player class class Player extends Populate { constructor () { super(); + this.numLives = 0; + this.score = 0; this.x = 0; this.y = 415; this.sprite = "images/char-boy.png"; } //key input for Player - handleInput (input) { - switch (input) { - case "left": - if (this.x >= this.sideways) { - this.x -= this.sideways; - } - break; - case "right": - if (this.x <= this.sideways * 3) { - this.x += this.sideways; - } - break; - case "up": - if (this.y >= 83) { - this.y -= this.upDown; - } - break; - case "down": - if (this.y <= this.upDown * 4) { - this.y += this.upDown; - } - break; - } +handleInput(input) { + console.log(input); + switch (input) { + case "left": + if (this.x >= this.sideways) { + this.x -= this.sideways; + } + break; + case "a": + if (this.x >= this.sideways) { + this.x -= this.sideways; + } + break; + case "d": + if (this.x <= this.sideways * 3) { + this.x += this.sideways; + } + break; + case "right": + if (this.x <= this.sideways * 3) { + this.x += this.sideways; + } + break; + case "up": + if (this.y >= 83) { + this.y -= this.upDown; + } + break; + case "w": + if (this.y >= 83) { + this.y -= this.upDown; + } + break; + case "down": + if (this.y <= this.upDown * 4) { + this.y += this.upDown; + } + break; + case "s": + if (this.y <= this.upDown * 4) { + this.y += this.upDown; + } + break; } +} //updates player and sets condition for collision & win update () { for (let enemy of allEnemies) { if (this.y === enemy.y && (enemy.x + enemy.sideways / 2 > this.x && enemy.x < this.x + this.sideways / 2)) { + this.numLives--; this.reset(); } } + if (this.numLives <= 0) { + this.numLives = 3; + this.score = 0; + this.reset(); + } + if (this.y <= 1) { + this.score++; + } } } const player = new Player(); +sprite = document.getElementsByClassName("sprite"); + +console.log(sprite); + +spriteArr = Array.from(sprite); + +spriteArr.forEach(element => { + element.addEventListener("click", function() { + let id = element.getAttribute("id"); + player.sprite = `images/${id}.png`; + player.reset(); + }); +}); + //Array to hold Enemy objects const allEnemies = []; @@ -100,6 +155,10 @@ allEnemies.push(enemy1, enemy2, enemy3, enemy4); // Player.handleInput() method. You don't need to modify this. document.addEventListener("keyup", function (e) { var allowedKeys = { + 87: "w", + 65: "a", + 83: "s", + 68: "d", 37: "left", 38: "up", 39: "right", diff --git a/js/engine.js b/js/engine.js index 112c1fb..82b0f08 100644 --- a/js/engine.js +++ b/js/engine.js @@ -6,7 +6,7 @@ * writing app.js a little simpler to work with. */ -var Engine = (function (global) { +var Engine = (function(global) { var doc = global.document, win = global.window, canvas = doc.createElement("canvas"), @@ -14,13 +14,13 @@ var Engine = (function (global) { lastTime; canvas.width = 505; - canvas.height = 606; + canvas.height = 642; doc.body.appendChild(canvas); /* This function serves as the kickoff point for the game loop itself * and handles properly calling the update and render methods. */ - function main () { + function main() { /* Get our time delta information which is required if your game * requires smooth animation. */ @@ -43,10 +43,8 @@ var Engine = (function (global) { if (player.winAStar === true) { modal.style.display = "block"; win.cancelAnimationFrame; - } else { win.requestAnimationFrame(main); - } } @@ -54,7 +52,7 @@ var Engine = (function (global) { * particularly setting the lastTime variable that is required for the * game loop. */ - function init () { + function init() { lastTime = Date.now(); main(); } @@ -62,15 +60,15 @@ var Engine = (function (global) { /* This function is called by main (our game loop) and itself calls all * of the functions which may need to update entity's data. */ - function update (dt) { + function update(dt) { updateEntities(dt); } /* This is called by the update function and loops through all of the * objects within your allEnemies array as defined in app.js */ - function updateEntities (dt) { - allEnemies.forEach(function (enemy) { + function updateEntities(dt) { + allEnemies.forEach(function(enemy) { enemy.update(dt); }); player.update(); @@ -79,25 +77,30 @@ var Engine = (function (global) { /* This function initially draws the "game level", it will then call * the renderEntities function. */ - function render () { + function render() { /* This array holds the relative URL to the image used * for that particular row of the game level. */ var rowImages = [ - "images/water-block.png", // Top row is water - "images/stone-block.png", // Row 1 of 3 of stone - "images/stone-block.png", // Row 2 of 3 of stone - "images/stone-block.png", // Row 3 of 3 of stone - "images/grass-block.png", // Row 1 of 2 of grass - "images/grass-block.png" // Row 2 of 2 of grass + "images/water-block.png", // Top row is water + "images/stone-block.png", // Row 1 of 3 of stone + "images/stone-block.png", // Row 2 of 3 of stone + "images/stone-block.png", // Row 3 of 3 of stone + "images/grass-block.png", // Row 1 of 2 of grass + "images/grass-block.png" // Row 2 of 2 of grass ], numRows = 6, numCols = 5, - row, col; + row, + col; // Before drawing, clear existing canvas ctx.clearRect(0, 0, canvas.width, canvas.height); + // Draw the scoreboard and life counter at bottom of page. + ctx.fillStyle = "#F77"; + ctx.fillRect(0, 595, canvas.width, 38); + /* Loop through the number of rows and columns we've defined above * and, using the rowImages array, draw the correct image for that * portion of the "grid" @@ -114,6 +117,9 @@ var Engine = (function (global) { ctx.drawImage(Resources.get(rowImages[row]), col * 101, row * 83); } } + //for (let cntr = 0; cntr <= player.numLives; cntr++) { + ctx.drawImage(Resources.get(, 0, 600, 34, 34); + //} renderEntities(); } @@ -122,8 +128,8 @@ var Engine = (function (global) { * tick. Its purpose is to then call the render functions you have defined * on your enemy and player entities within app.js */ - function renderEntities () { - allEnemies.forEach(function (enemy) { + function renderEntities() { + allEnemies.forEach(function(enemy) { enemy.render(); }); @@ -137,7 +143,16 @@ var Engine = (function (global) { "images/grass-block.png", "images/enemy-bug.png", "images/char-boy.png", +<<<<<<< HEAD + "images/Star.png", + "images/Heart.png" +======= + "images/char-cat-girl.png", + "images/char-horn-girl.png", + "images/char-pink-girl.png", + "images/char-princess-girl.png", "images/Star.png" +>>>>>>> 5ff837b91581b0cec59d3fd7a07f880cb6a69e53 ]); Resources.onReady(init);