From b2974279a03529118fdeecfe1287f9515e3d25f3 Mon Sep 17 00:00:00 2001 From: Deepshikha Sinha Date: Mon, 14 Feb 2022 19:01:08 +0530 Subject: [PATCH 1/3] Start function works --- main.js | 62 +++++++++++++++++++++++++++++++++++++++++++++++---------- 1 file changed, 51 insertions(+), 11 deletions(-) diff --git a/main.js b/main.js index f242959..aaf049a 100644 --- a/main.js +++ b/main.js @@ -14,13 +14,14 @@ var playerLife = 5; var hackerLife = 5; // Message to be displayed when the game is over -var hackerWinnerMessage = "Write the message here"; -var playerWinnerMessage = "Write the message here"; +var hackerWinnerMessage = "Oh no! The hacker won!"; +var playerWinnerMessage = "You Won!! Congratulations!!"; // ---------------Game code starts here ---------------// // declare a few handy variables like we've done :p - +var hacker +var player var playerStartLife = parseInt(playerLife); var hackerStartLife = parseInt(hackerLife); @@ -33,7 +34,7 @@ document.querySelector(".game-board").classList.add("before-game"); var allCardElements = document.querySelectorAll(".card"); // Adds click handler to all player card elements so that your cards are actionable - +var playercardclick1 // An example of a function that controls what would happen when a card is clicked @@ -78,13 +79,15 @@ function compareCards(){ //Use conditional statements and complete the function that shows the winner message function gameOver(winner) { - + //if winner === hacker: } // Write a function that starts the game function startGame() { - + document.querySelector(".game-board").classList.remove(".before-game"); + document.querySelector(".game-board").classList.add("during-game"); + playTurn() } @@ -99,6 +102,7 @@ function updateScores(){ // Here these update life totals for each player document.querySelector(".player-stats .life-total").innerHTML = playerLife; + document.querySelector(".hacker-stats .life-total").innerHTML = hackerLife; // We've added the code to update the player lifebar var playerPercent = playerLife / playerStartLife * 100; @@ -106,19 +110,55 @@ function updateScores(){ playerPercent = 0; } document.querySelector(".player-stats .life-left").style.height = playerPercent + "%"; - - // Now you write the code to update the hacker lifebar - + // Now you write the code to update the hacker lifebar + var hackerPercent = hackerLife / hackerStartLife * 100; + if (hackerPercent < 0) { + hackerPercent = 0; + } + document.querySelector(".hacker-stats .life-left").style.height = hackerPercent + "%" } // Write a function that Plays one turn of the game function playTurn() { - + document.querySelector(".game-board").classList.remove("card-selected"); + cardSelected = false; + document.querySelector(".next-turn").setAttribute("disabled", true); + let hackerIcon = document.querySelector(".hacker-stats .thumbnail"); + let playerIcon = document.querySelector(".player-stats .thumbnail"); + hackerIcon.classList.remove("ouch"); + playerIcon.classList.remove("ouch"); + for(let i=0; i Date: Mon, 14 Feb 2022 22:45:55 +0530 Subject: [PATCH 2/3] Start function works --- main.js | 45 ++++++++++++++++++++++++++++++++++++++------- 1 file changed, 38 insertions(+), 7 deletions(-) diff --git a/main.js b/main.js index aaf049a..b30ce29 100644 --- a/main.js +++ b/main.js @@ -19,14 +19,24 @@ var playerWinnerMessage = "You Won!! Congratulations!!"; // ---------------Game code starts here ---------------// -// declare a few handy variables like we've done :p -var hacker -var player var playerStartLife = parseInt(playerLife); var hackerStartLife = parseInt(hackerLife); - -// we will declare the functions for you and you will complete those +var cardSelected = false updateScores(); +document.querySelector(".game-board").classList.add(".before-game"); +var allCardElements = document.querySelectorAll(".card"); +for(let i=0; i cardClicked(e.target)); + } +} +if(playerLife<=0) { + gameOver(0); +} else if(hackerLife<=0) { + gameOver(1); +} + +document.querySelector(".next-turn").removeAttribute("disabled"); // you learnt DOM manipulation right? here's an example of the same. Go ahead and use manipulate the DOM! document.querySelector(".game-board").classList.add("before-game"); @@ -79,7 +89,15 @@ function compareCards(){ //Use conditional statements and complete the function that shows the winner message function gameOver(winner) { - //if winner === hacker: + const winMessage = document.querySelector(".winner-message"); + if(winner == 0) { + winMessage.textContent = hackerWinnerMessage; + } else if (winner == 1) { + winMessage.textContent = playerWinnerMessage; + } + document.querySelector(".game-board").classList.remove("during-game"); + document.querySelector(".game-board").classList.add("game-over"); + document.querySelector(".winner-section").style.display = "flex"; } @@ -93,7 +111,20 @@ function startGame() { // Now write a function that starts the game over from scratch function restartGame(){ - + playerLife = parseInt(playerStartLife); + hackerLife = parseInt(hackerStartLife); + let playedCard = document.querySelector(".played-card"); + playedCard.classList.remove("played-card"); + document.querySelector(".game-board").classList.remove("card-selected"); + cardSelected = false; + document.querySelector(".game-board").classList.remove("game-over"); + document.querySelector(".game-board").classList.add("before-game"); + document.querySelector(".winner-section").style.display = "none"; + document.querySelector(".next-turn").removeAttribute("disabled"); + for(let i=0; i Date: Mon, 14 Feb 2022 23:20:43 +0530 Subject: [PATCH 3/3] Added functionality --- main.js | 93 +++++++++++++++++++++++++-------------------------------- 1 file changed, 41 insertions(+), 52 deletions(-) diff --git a/main.js b/main.js index b30ce29..5186d4f 100644 --- a/main.js +++ b/main.js @@ -25,69 +25,73 @@ var cardSelected = false updateScores(); document.querySelector(".game-board").classList.add(".before-game"); var allCardElements = document.querySelectorAll(".card"); +document.querySelector(".next-turn").removeAttribute("disabled"); +document.querySelector(".game-board").classList.add("before-game"); +var allCardElements = document.querySelectorAll(".card"); for(let i=0; i cardClicked(e.target)); } } -if(playerLife<=0) { - gameOver(0); -} else if(hackerLife<=0) { - gameOver(1); -} - -document.querySelector(".next-turn").removeAttribute("disabled"); - -// you learnt DOM manipulation right? here's an example of the same. Go ahead and use manipulate the DOM! -document.querySelector(".game-board").classList.add("before-game"); - -var allCardElements = document.querySelectorAll(".card"); - -// Adds click handler to all player card elements so that your cards are actionable -var playercardclick1 - -// An example of a function that controls what would happen when a card is clicked function cardClicked(cardEl) { - if(cardSelected) { return; } cardSelected = true; - cardEl.classList.add("played-card"); - document.querySelector(".game-board").classList.add("card-selected"); - - // Yes JS is cool and this would allow you to wait 500ms before revealing the hacker power setTimeout(function(){ revealHackerPower(); },500) - setTimeout(function(){ revealPlayerPower(); },800) - setTimeout(function(){ compareCards(); }, 1400); } -// Now write a function that shows the power level on the player card function revealPlayerPower(){ - + for(let i=0; ihackerPoint) { + playedCard.classList.add("better-card"); + hackerCard.classList.add("worse-card"); + hackerIcon.classList.add("ouch"); + hackerLife -= (playerPoint-hackerPoint); + } else if(hackerPoint>playerPoint) { + playedCard.classList.add("worse-card"); + hackerCard.classList.add("better-card"); + playerIcon.classList.add("ouch"); + playerLife -= (hackerPoint-playerPoint); + } else { + playedCard.classList.add("tie-card"); + hackerCard.classList.add("tie-card"); + } + updateScores(); + if(playerLife<=0) { + gameOver(0); + } else if(hackerLife<=0) { + gameOver(1); + } + document.querySelector(".next-turn").removeAttribute("disabled"); } -//Use conditional statements and complete the function that shows the winner message function gameOver(winner) { const winMessage = document.querySelector(".winner-message"); if(winner == 0) { @@ -127,31 +131,21 @@ function restartGame(){ updateScores(); } -// We've also used a cool life bar that displays the life left. Write a function that updates the displayed life bar and life totals -// use innerHTML and a lot of other cool things to do this. function updateScores(){ - - // Here these update life totals for each player document.querySelector(".player-stats .life-total").innerHTML = playerLife; document.querySelector(".hacker-stats .life-total").innerHTML = hackerLife; - - // We've added the code to update the player lifebar var playerPercent = playerLife / playerStartLife * 100; if (playerPercent < 0) { playerPercent = 0; } document.querySelector(".player-stats .life-left").style.height = playerPercent + "%"; - // Now you write the code to update the hacker lifebar - var hackerPercent = hackerLife / hackerStartLife * 100; - if (hackerPercent < 0) { - hackerPercent = 0; + var hackerPercent = hackerLife / hackerStartLife * 100; + if (hackerPercent < 0) { + hackerPercent = 0; } - document.querySelector(".hacker-stats .life-left").style.height = hackerPercent + "%" + document.querySelector(".hacker-stats .life-left").style.height = hackerPercent + "%" } - - -// Write a function that Plays one turn of the game function playTurn() { document.querySelector(".game-board").classList.remove("card-selected"); cardSelected = false; @@ -167,7 +161,7 @@ function playTurn() { allCardElements[i].classList.remove("better-card"); allCardElements[i].classList.remove("tie-card"); allCardElements[i].classList.remove("played-card"); -} + } let index = Math.floor(Math.random() * scenarios.length); let hackerCard = document.querySelector(".hacker-card"); hackerCard.querySelector(".text").textContent = scenarios[index].hackerCard.description; @@ -180,14 +174,9 @@ function playTurn() { allCardElements[i].classList.add("prepared"); } } - let hackerIcon = document.querySelector(".hacker-stats .thumbnail"); - let playerIcon = document.querySelector(".player-stats .thumbnail"); - hackerIcon.classList.remove("ouch"); - playerIcon.classList.remove("ouch"); revealCards(); } -// Finally write the function that reveals the cards. Use function revealCards(){ for(let i=0; i