From d198aecf440a41cad2855b5b5efc3cfd91394cdf Mon Sep 17 00:00:00 2001 From: Haridev Date: Mon, 14 Feb 2022 21:14:41 +0530 Subject: [PATCH 1/2] Updated assignment --- main.js | 118 +++++++++++++++++++++++++++++++++++++++------------- scenario.js | 20 +++++++++ 2 files changed, 109 insertions(+), 29 deletions(-) diff --git a/main.js b/main.js index f242959..61281a6 100644 --- a/main.js +++ b/main.js @@ -12,17 +12,21 @@ // Life of the player and the hacker. var playerLife = 5; var hackerLife = 5; +cardSelected = false; +var i = 0; // Message to be displayed when the game is over -var hackerWinnerMessage = "Write the message here"; -var playerWinnerMessage = "Write the message here"; +var hackerWinnerMessage = "You Got Hacked!"; +var playerWinnerMessage = "You are safe Now!"; - // ---------------Game code starts here ---------------// +// ---------------Game code starts here ---------------// // declare a few handy variables like we've done :p var playerStartLife = parseInt(playerLife); var hackerStartLife = parseInt(hackerLife); +var hackerCard = document.querySelector(".hacker-card"); +var playerCard = document.querySelectorAll(".played-card"); // we will declare the functions for you and you will complete those updateScores(); @@ -33,13 +37,20 @@ 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 - +for (var i = 0; i < allCardElements.length; i++) { + var card = allCardElements[i]; + if (card.classList.contains("player-card")) { + card.addEventListener("click", function (e) { + cardClicked(this); + }); + } +} // An example of a function that controls what would happen when a card is clicked function cardClicked(cardEl) { - if(cardSelected) { return; } + if (cardSelected) { return; } cardSelected = true; cardEl.classList.add("played-card"); @@ -47,65 +58,103 @@ function cardClicked(cardEl) { 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(){ + setTimeout(function () { revealHackerPower(); - },500) + }, 500) - setTimeout(function(){ + setTimeout(function () { revealPlayerPower(); - },800) - - setTimeout(function(){ + }, 800) + + setTimeout(function () { compareCards(); }, 1400); } // Now write a function that shows the power level on the player card -function revealPlayerPower(){ - +function revealPlayerPower() { + playerCard.classList.add("reveal-power"); } // Write a function that shows the power level on the hacker card -function revealHackerPower(){ - +function revealHackerPower() { + hackerCard.classList.add("reveal-power"); } // Write a function to compare the cards. Here is where all your skills would come in handy! // P.S: We've added the 'disabled' attribute in the CSS file for the button and you should use it in case you want a certain element to just go away or 'vanish' at a certain time. For eg: You'd definitely want the 'Next' button to go away after a player chooses a card right? -function compareCards(){ +function compareCards() { + var playerPowerEl = playerCard.querySelector(".power"); + var hackerPowerEl = hackerCard.querySelector(".power"); + var playerPower = parseInt(playerPowerEl.innerHTML); + var hackerPower = parseInt(hackerPowerEl.innerHTML); + + var powerDifference = playerPower - hackerPower; + + if (powerDifference < 0) { + playerLife = playerLife + powerDifference; + hackerCard.classList.add("better-card"); + playerCard.classList.add("worse-card"); + } + else if (powerDifference > 0) { + hackerLife = hackerLife - powerDifference; + playerCard.classList.add("better-card"); + hackerCard.classList.add("worse-card"); + } + else { + playerCard.classList.add("tie-card"); + hackerCard.classList.add("tie-card"); + } + updateScores(); + + if (playerLife <= 0) { gameOver("Hacker"); } + if (hackerLife <= 0) { gameOver("player"); } } //Use conditional statements and complete the function that shows the winner message -function gameOver(winner) { - +function gameOver(winner) +{ + if (winner == "Hacker") + { + document.querySelector(".winner-message").innerHTML = hackerWinnerMessage; + } + else if (winner == "Player") + { + document.querySelector(".winner-message").innerHTML = playerWinnerMessage; + } } // Write a function that starts the game -function startGame() { - +function startGame() +{ + document.querySelector(".game-board").classList.remove("before-game"); + document.querySelector(".game-board").classList.add("during-game"); + revealCards(); } - // Now write a function that starts the game over from scratch -function restartGame(){ +function restartGame() +{ } // 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(){ +function updateScores() +{ // Here these update life totals for each player document.querySelector(".player-stats .life-total").innerHTML = playerLife; // We've added the code to update the player lifebar var playerPercent = playerLife / playerStartLife * 100; - if (playerPercent < 0) { + if (playerPercent < 0) + { playerPercent = 0; } - document.querySelector(".player-stats .life-left").style.height = playerPercent + "%"; + document.querySelector(".player-stats .life-left").style.height = playerPercent + "%"; // Now you write the code to update the hacker lifebar @@ -114,11 +163,22 @@ function updateScores(){ // Write a function that Plays one turn of the game -function playTurn() { - +function playTurn() +{ + cardSelected = false; + revealCards(); } // Finally write the function that reveals the cards. Use -function revealCards(){ - +function revealCards() +{ + i=0; + for(var j=0;j<4;j++){ + document.querySelectorAll(".card")[j].style.opacity=10; + } + hackerCard.querySelector(".text").innerHTML = scenarios[i].hackerCard.description; + playerCard[0].querySelector(".text").innerHTML = scenarios[i].playerCards[0].description; + playerCard[1].querySelector(".text").innerHTML = scenarios[i].playerCards[1].description; + playerCard[2].querySelector(".text").innerHTML = scenarios[i].playerCards[2].description; + i++; } \ No newline at end of file diff --git a/scenario.js b/scenario.js index f926d60..6150f50 100644 --- a/scenario.js +++ b/scenario.js @@ -48,4 +48,24 @@ var scenarios = [ } ] }, + { + hackerCard : { + description : "I have sent you a survey-form asking your personal details.", + power : 2, + }, + playerCards : [ + { + description : "I ignored the survey-form.", + power : 5, + }, + { + description : "I never give out personal information in response to a survey-form.", + power : 4, + }, + { + description : "I filled the form but i never filled the password.", + power : 1, + } + ] + }, ]; \ No newline at end of file From 85026bc6985c280acb9900979b2c3983ed9b6593 Mon Sep 17 00:00:00 2001 From: Haridev Kambam <97589240+haridev811@users.noreply.github.com> Date: Mon, 14 Feb 2022 22:51:50 +0530 Subject: [PATCH 2/2] Update main.js --- main.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/main.js b/main.js index 61281a6..c7365bc 100644 --- a/main.js +++ b/main.js @@ -8,6 +8,8 @@ // Your main work would be here, in main.js and would advice you to also pay a visit to the scenario.js +// Im unable to complete because im new to Javascript + // Life of the player and the hacker. var playerLife = 5; @@ -181,4 +183,4 @@ function revealCards() playerCard[1].querySelector(".text").innerHTML = scenarios[i].playerCards[1].description; playerCard[2].querySelector(".text").innerHTML = scenarios[i].playerCards[2].description; i++; -} \ No newline at end of file +}