From e8be9d871ab73387dfa9efb22d26f1b2546832ef Mon Sep 17 00:00:00 2001 From: Esteban Escalante Date: Wed, 17 Jul 2024 17:02:32 +0200 Subject: [PATCH] Game playeable for 5 waves. Dare you to get to Wave 4 --- battle.js | 10 +- enemy.js | 374 ++++++++++++++++++++++++---------------------------- index.html | 4 +- index.js | 78 ++++++++++- soldiers.js | 27 +++- style.css | 2 +- 6 files changed, 276 insertions(+), 219 deletions(-) diff --git a/battle.js b/battle.js index 277ccea..f2eac1b 100644 --- a/battle.js +++ b/battle.js @@ -1,10 +1,10 @@ function extraBattle(battleArray,bottomContainer){ if(battleArray.length>= 1){ - if(game.enemiesBattleLeft.length> 0){ - let orcNumber = Math.floor(Math.random()*game.enemiesBattleLeft.length); + if(game.enemies.length> 0){ + let orcNumber = Math.floor(Math.random()*game.enemies.length); let soldierNumber= Math.floor(Math.random()*battleArray.length); let soldierBlocker = battleArray[soldierNumber]; - let orcAttacker = game.enemiesBattleLeft[orcNumber]; + let orcAttacker = game.enemies[orcNumber]; soldierBlocker.soldierAttack(orcAttacker); orcAttacker.orcAttack(soldierBlocker); } @@ -20,12 +20,12 @@ function extraBattle(battleArray,bottomContainer){ function classRemoval (){ let battleArray = game.soldiersHastati; let bottomContainer = hastatiContainer; - if (game.soldiersHastati.length >0 + if (game.soldiersHastati.length >=0 && hastatiContainer.position === "bottom"){ battleArray = game.soldiersHastati; bottomContainer = hastatiContainerElement } - else if( game.soldiersPrincipes.length >0 + else if( game.soldiersPrincipes.length >=0 && principesContainer.position === "bottom") { battleArray = game.soldiersPrincipes; bottomContainer = principesContainerElement} diff --git a/enemy.js b/enemy.js index 415ae05..89ec0b3 100644 --- a/enemy.js +++ b/enemy.js @@ -1,212 +1,184 @@ - //console.log(hastatiContainer.postionY); //console.log(battlePosition); -const enemyClassesArray = ["enemy1","enemy2","enemy3","enemy4","enemy5","enemy6","enemy7"]; +const enemyClassesArray = [ + "enemy1", + "enemy2", + "enemy3", + "enemy4", + "enemy5", + "enemy6", + "enemy7", +]; -class Enemy{ - constructor(level){ - this.createEnemyElement(); - //this metod creates the enemey which we need to set the position - - this.positionX = Math.floor( - Math.random() * (gameArea.offsetWidth - this.element.offsetWidth) - ); - this.positionY = gameArea.offsetHeight - this.element.offsetHeight; - this.updateElementPosition(); - this.velocity = 10; - this.health = 90 + (level*2); - this.stamina = 50 + (level*3); - this.attack = 10 + level; - this.strength = 10 + level; - this.defense = 8 +(level/2); - this.agility = 8 +(level/4); - this.level = level; - this.experience = 0; - - //other stats go here - - } - - createEnemyElement(){ - this.element = document.createElement("div"); - let randomClass = Math.floor(Math.random()*7+1); - this.element.className = enemyClassesArray[randomClass]; - gameArea.appendChild(this.element); - } - updateElementPosition(){ - this.element.style.left = `${this.positionX}px`; - this.element.style.top = `${this.positionY}px`; - } - checkOrcCollisions(){ - let isColliding = false; - const orcNotMe = game.enemies.filter((eachEnemy)=>{ - return ( - eachEnemy !== this);}) - orcNotMe.forEach((enemy) => { - const thisLeftEdge = this.positionX; - const thisRightEdge = this.positionX + this.element.offsetWidth/2; - const thisTopEdge = this.positionY; - const thisButtomEdge = this.positionY + this.element.offsetHeight/2; - const enemyLeftEdge = enemy.positionX; - const enemyRightEdge = enemy.positionX + enemy.element.offsetWidth/2; - const enemyTopEdge = enemy.positionY; - const enemyButtomEdge = enemy.positionY + enemy.element.offsetHeight/2; - - if ( - thisButtomEdge > enemyTopEdge && - thisTopEdge < enemyButtomEdge && - thisLeftEdge < enemyRightEdge && - thisRightEdge > enemyLeftEdge - ) { - // we have a collision, but we need to know where it is - isColliding = true; - if (thisButtomEdge > enemyTopEdge) { - //console.log("Collision in the front"); - this.positionY = enemyButtomEdge + 1; // move the enemy down until it is not colliding - - return; - //enemy.disappear(); - //shakeGameArea(); - //game.lives --; - } else if (thisTopEdge < enemyButtomEdge) { - //console.log("Collision detected in the back"); - return; - } else if ( - thisLeftEdge < enemyRightEdge && - thisRightEdge > enemyLeftEdge - ) { - //console.log("lateral collision detected"); - return; - } - } - }); - return isColliding; - } - /* orcNotMe.forEach((enemy)=>{ - const thisLeftEdge = this.positionX; - const thisRightEdge = this.positionX + this.element.offsetWidth/2; - const thisTopEdge = this.positionY; - const thisButtomEdge = this.positionY + this.element.offsetHeight/2; - const enemyLeftEdge = enemy.positionX; - const enemyRightEdge = enemy.positionX + enemy.element.offsetWidth/2; - const enemyTopEdge = enemy.positionY; - const enemyButtomEdge = enemy.positionY + enemy.element.offsetHeight/2; - if( - thisLeftEdge < enemyRightEdge && - thisRightEdge > enemyLeftEdge && +class Enemy { + constructor(level) { + this.createEnemyElement(); + //this metod creates the enemey which we need to set the position + + this.positionX = Math.floor( + Math.random() * (gameArea.offsetWidth - this.element.offsetWidth) + ); + this.positionY = gameArea.offsetHeight - this.element.offsetHeight; + this.updateElementPosition(); + this.velocity = 10; + this.health = 90 + level * 2; + this.stamina = 50 + level * 3; + this.attack = 10 + level; + this.strength = 10 + level; + this.defense = 8 + level / 2; + this.agility = 8 + level / 4; + this.level = level; + this.experience = 0; + + //other stats go here + } + + createEnemyElement() { + this.element = document.createElement("div"); + let randomClass = Math.floor(Math.random() * 7 + 1); + this.element.className = enemyClassesArray[randomClass]; + gameArea.appendChild(this.element); + } + updateElementPosition() { + this.element.style.left = `${this.positionX}px`; + this.element.style.top = `${this.positionY}px`; + } + checkOrcCollisions() { + let isColliding = false; + const orcNotMe = game.enemies.filter((eachEnemy) => { + return eachEnemy !== this; + }); + orcNotMe.forEach((enemy) => { + const thisLeftEdge = this.positionX; + const thisRightEdge = this.positionX + this.element.offsetWidth / 3; + const thisTopEdge = this.positionY; + const thisButtomEdge = this.positionY + this.element.offsetHeight / 3; + const enemyLeftEdge = enemy.positionX; + const enemyRightEdge = enemy.positionX + enemy.element.offsetWidth / 3; + const enemyTopEdge = enemy.positionY; + const enemyButtomEdge = enemy.positionY + enemy.element.offsetHeight / 3; + + if ( + thisButtomEdge > enemyTopEdge && thisTopEdge < enemyButtomEdge && - thisButtomEdge > enemyTopEdge - ){ - //console.log("Collision detected"); + thisLeftEdge < enemyRightEdge && + thisRightEdge > enemyLeftEdge + ) { + // we have a collision, but we need to know where it is isColliding = true; - return - //enemy.disappear(); - //shakeGameArea(); - //game.lives --; - } - }); return isColliding;} */ - /*freeze(){ - const orcInFront = game.enemies.filter((eachEnemy)=>{ - return ( - +eachEnemy.positionY < (this.positionY+5) && - eachEnemy !== this); - }) - const orcInParallel = game.enemies.filter((eachEnemy)=>{ - return ( - +eachEnemy.positionX < (this.positionX + 25) && - +eachEnemy.positionX > (this.positionX - 25) && - eachEnemy !== this - ); - }) - - if(orcInFront.length >0 && orcInParallel.length>0){ - console.log("Orc froze"); - return true; //Orc should freeze - }else { - - return false; // Orc should not freeze - } - - }*/ - move(){ - //console.log(this.checkOrcCollisions()); - if(!this.checkOrcCollisions()){ - if(this.positionY > battlePosition ) { - this.positionY -= this.velocity; - this.updateElementPosition() - } - else { - - //console.log(this.positionX+" "+this.positionY); - let thisPositionX= Number(this.positionX); - let thisGridArea; - if(thisPositionX < gridLeft){ - thisGridArea = "Left";} - else if(thisPositionX < gridCenter){ - thisGridArea = "Center";} - else{ - thisGridArea = "Right";} - //switch statement used to handle grid assignments by X position. - switch(thisGridArea){ - case "Left": - if(!game.enemiesBattleLeft.includes(this)){ - game.enemiesBattleLeft.push(this); - //console.log(game.enemiesBattleLeft); - }; - break; - case "Center": - if(!game.enemiesBattleCenter.includes(this)){ - game.enemiesBattleCenter.push(this); - //console.log(game.enemiesBattleCenter); - }; - break; - default: - if(!game.enemiesBattleRight.includes(this)){ - game.enemiesBattleRight.push(this); - //console.log(game.enemiesBattleRight); - }; - } + if (thisButtomEdge > enemyTopEdge) { + //console.log("Collision in the front"); + this.positionY = enemyButtomEdge + 1; // move the enemy down until it is not colliding - } + return; + } else if (thisTopEdge < enemyButtomEdge) { + //console.log("Collision detected in the back"); + return; + } else if ( + thisLeftEdge < enemyRightEdge && + thisRightEdge > enemyLeftEdge + ) { + //console.log("lateral collision detected"); + return; } - else{ - //setTimeout(() => { - //this.move() - //},10000*Math.random()); - - }} - orcAttack(soldier){ - - let diceThrowAttacker= Math.floor(Math.random() * 12) + 1; - let diceThrowDefender = Math.floor(Math.random() * 12) + 1; - - if(this.attack * diceThrowAttacker > soldier.defense * diceThrowDefender){ - soldier.receivesDamage(this.strength*diceThrowAttacker); - //console.log("Orc hit you!"); - } else{ - ; + } + }); + return isColliding; + } + + move() { + //console.log(this.checkOrcCollisions()); + if (!this.checkOrcCollisions()) { + if (this.positionY > battlePosition) { + this.positionY -= this.velocity; + this.updateElementPosition(); + } else { + //console.log(this.positionX+" "+this.positionY); + let thisPositionX = Number(this.positionX); + let thisGridArea; + if (thisPositionX < gridLeft) { + thisGridArea = "Left"; + } else if (thisPositionX < gridCenter) { + thisGridArea = "Center"; + } else { + thisGridArea = "Right"; } - + //switch statement used to handle grid assignments by X position. + switch (thisGridArea) { + case "Left": + /* if (!game.enemiesBattleLeft.includes(this)) { + game.enemiesBattleLeft.push(this); + //console.log(game.enemiesBattleLeft); + } */ + this.positionX += this.velocity; + this.updateElementPosition(); + break; + case "Center": + /* if (!game.enemiesBattleCenter.includes(this)) { + game.enemiesBattleCenter.push(this); + //console.log(game.enemiesBattleCenter); + } */ + break; + default: + /* if (!game.enemiesBattleRight.includes(this)) { + game.enemiesBattleRight.push(this); + //console.log(game.enemiesBattleRight); + } */ + this.positionX -= this.velocity; + this.updateElementPosition(); + } + } + } else { + this.positionX += (Math.random() - 0.5) * 200; + this.positionY += 10; + this.updateElementPosition(); + } +} + + orcAttack(soldier) { + let diceThrowAttacker = Math.floor(Math.random() * 12) + 1; + let diceThrowDefender = Math.floor(Math.random() * 12) + 1; + if(this.stamina > 20){ + if(soldier.stamina > 20){ + if (diceThrowAttacker+2 soldier.defense * diceThrowDefender) { + soldier.receivesDamage(this.strength * diceThrowAttacker); + this.stamina -=10; + soldier.stamina -=10; + //console.log("Orc hit you!"); + } else { this.stamina -=10; + soldier.stamina -= this.strength * diceThrowAttacker; + } } - receivesDamage(amount){ - this.health -= amount; - //console.log(this.health); - if(this.health <=0){this.orcDied()} } - orcDied(){ - const index = game.enemies.indexOf(this); - game.score += this.level; - game.deadEnemies.push(this), - game.enemies.splice(index,1); - if(this.element) - {this.element.remove() - }; - console.log(`${game.score} SCORE!` ); + else {this.stamina += diceThrowAttacker } + } + receivesDamage(amount) { + this.health -= amount; + //console.log(this.health); + if (this.health <= 0) { + this.orcDied(); } + } + orcDied() { + const index = game.enemies.indexOf(this); + game.score += this.level; + // game.deadEnemies.push(this); + game.enemies.splice(index, 1); + this.element.remove(); + console.log(`${game.score} SCORE!`); + console.log(game.enemies); + } + } - /*orcAttack(){ + +/*orcAttack(){ setTimeout(()=>{ let orcVictim = game.soldiers[0]; // temporariliy while we figure out the victim if (this.attack > orcVictim.defense) { @@ -231,10 +203,11 @@ class Enemy{ } */ - for (let i = 0; i < 20 ; i++) { // Create 20 basic enemies - game.enemies.push(new Enemy(1)); - } - /* setInterval(() =>{ +for (let i = 0; i < 20; i++) { + // Create 20 basic enemies + game.enemies.push(new Enemy(1)); +} +/* setInterval(() =>{ game.enemies.push(new Enemy(1)); //console.log(game.enemies); @@ -242,6 +215,5 @@ class Enemy{ },1000); */ //setInterval (() =>{ - -//},10) +//},10) diff --git a/index.html b/index.html index 0be8b9d..4d1f097 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,8 @@

Orc Hordes

+

Wave 1

+

Score 0

@@ -26,7 +28,7 @@

Orc Hordes

-

Score 0

+

Score 0

diff --git a/index.js b/index.js index 9be24dd..37ef9e5 100644 --- a/index.js +++ b/index.js @@ -3,6 +3,7 @@ const gameOverElement = document.querySelector("#game-over-screen"); const game = { score: 0, + wave: 0, enemies: [], soldiers: [], deadEnemies: [], @@ -18,7 +19,7 @@ const game = { if (this.soldiers.length < 1) { gameOverElement.style.display = "flex"; this.isGameOver = true; - const scoreElement = document.querySelector("#score"); + let scoreElement = document.querySelector("#score-end"); scoreElement.textContent = this.score; } }, @@ -29,11 +30,15 @@ tryAgainButton.addEventListener("click", () => { location.reload(); }); const gameArea = document.querySelector("#game-area"); - +const waveElement = document.querySelector("#wave"); +let scoreElement = document.querySelector("#score-game"); let frames = 0; -let score = 0; let frameCounter = 0; + + function playGame() { + scoreElement.textContent = game.score; + waveElement.textContent = game.wave; frames++; frameCounter++; if (!game.isGameOver && frameCounter % 10 === 0) { @@ -46,19 +51,82 @@ function playGame() { soldier.checkCollisions(); }); classRemoval(); + }; + if (frameCounter < 2000){ + game.wave = 1; if (frameCounter % 500 === 0) { if (game.enemies.length < 80) { + for (let i = 0; i < 20; i++) { // Create 20 basic enemies game.enemies.push(new Enemy(1)); console.log("New Enemy Wave"); } + } } - game.checkGameOver(); } + else if( frameCounter <4000){ + game.wave = 2; + if (frameCounter % 500 === 0) { + if (game.enemies.length < 100) { + + for (let i = 0; i < 20; i++) { + // Create 20 basic enemies + game.enemies.push(new Enemy(2)); + console.log("New Enemy Wave"); + } + + } + } + } + else if( frameCounter <6000){ + game.wave = 3; + if (frameCounter % 500 === 0) { + if (game.enemies.length < 100) { + + for (let i = 0; i < 20; i++) { + // Create 20 basic enemies + game.enemies.push(new Enemy(3)); + console.log("New Enemy Wave"); + } + + } + } + } + else if( frameCounter <8000){ + game.wave = 4; + if (frameCounter % 500 === 0) { + if (game.enemies.length < 120) { + + for (let i = 0; i < 20; i++) { + // Create 20 basic enemies + game.enemies.push(new Enemy(4)); // ideally change the Enemy type here + console.log("New Enemy Wave"); + } + + } + } + } + else if( frameCounter <10000){ + game.wave = 5; + if (frameCounter % 500 === 0) { + if (game.enemies.length < 120) { + + for (let i = 0; i < 20; i++) { + // Create 20 basic enemies + game.enemies.push(new Enemy(5)); // ideally change the Enemy type here + console.log("New Enemy Wave"); + } + + } + } + } + game.checkGameOver(); + window.requestAnimationFrame(playGame); -} + } + window.requestAnimationFrame(playGame); diff --git a/soldiers.js b/soldiers.js index 56bd2d1..de8d7ab 100644 --- a/soldiers.js +++ b/soldiers.js @@ -26,6 +26,7 @@ class Soldier { this.positionY = 0 // Manage vertical position if needed // stats will need to go here this.health = 90 + (level * 2); + this.maxStamina = 50 + (level * 3); this.stamina = 50 + (level * 3); this.attack = 10 + level; this.strength = 10 + level; @@ -35,6 +36,8 @@ class Soldier { this.experience = 0; } checkCollisions() { + if(this.stamina < this.maxStamina){ + this.stamina += 1;}; const getEdges = (element) => { const rect = element.getBoundingClientRect(); return { @@ -74,14 +77,25 @@ class Soldier { let diceThrowAttacker = Math.floor(Math.random() * 12) + 1; let diceThrowDefender = Math.floor(Math.random() * 12) + 1; + if(this.stamina > 20){ + if(enemy.stamina > 20){ + if (diceThrowAttacker+2 enemy.defense * diceThrowDefender){ enemy.receivesDamage(this.strength*diceThrowAttacker); + this.stamina -=10; //console.log("attack successful"); - } else{ - ; + } else {this.stamina -=8; + } + } + } + else { this.stamina += diceThrowAttacker } - } + receivesDamage(amount){ this.health -= amount; //console.log(this.health); @@ -280,7 +294,8 @@ document.addEventListener("keydown", (event) => { principesContainerElement.style.top = (120 - stepsBack) + "px" Principes.yAxis = 120 }, 700); - } + }; + } }); @@ -291,12 +306,12 @@ for (let i = 0; i < 20; i++) { // Create 20 hastati game.soldiersHastati.push(hastati); } for (let i = 0; i < 20; i++) { // Create 20 principes - const principes = new Principes(2); + const principes = new Principes(2,1); game.soldiers.push(principes); game.soldiersPrincipes.push(principes); } for (let i = 0; i < 20; i++) { // Create 20 triarii - const triarii = new Triarii(3); + const triarii = new Triarii(3,2); game.soldiers.push(triarii); game.soldiersTriarii.push(triarii); } diff --git a/style.css b/style.css index dd3fc95..2069b2c 100644 --- a/style.css +++ b/style.css @@ -15,7 +15,7 @@ body{ width:70%; height: 80%; background-image:url(./images/BG_0000s_0000_31916.png); - background-size: contain; + background-size: cover; background-repeat: no-repeat; overflow: hidden; position: relative;