Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New #13

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

New #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
38cfaaa
Game Redefined
ChhaSahil Feb 10, 2022
eca792d
Game Redifined
ChhaSahil Feb 10, 2022
7c95e74
Minor Changes
ChhaSahil Feb 10, 2022
e485843
another commit
ChhaSahil Feb 11, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
<link rel="icon" type="image/svg+xml" href="assets/js.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://fonts.googleapis.com/css2?family=Lobster&family=Supermercado+One&family=Syne+Tactile&display=swap" rel="stylesheet">

<title>Hacker Card</title>
<script src="./scenario.js"></script>
Expand Down Expand Up @@ -43,7 +44,7 @@ <h1>
</div>
<div class="life-total"></div>
<div class="thumbnail">👦</div>
<div class="name">You</div>
<div class="name" id="player">You</div>
</div>

<div class="card player-card player-color">
Expand Down
252 changes: 222 additions & 30 deletions main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,30 +13,55 @@
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";

// ---------------Game code starts here ---------------//
// Message to be displayed when the game is over
var hackerWinnerMessage = "Game over: Hacker Won!!";
var playerWinnerMessage = "Game over: You Won!!";
var noWinnerMessage = "Game over: No-Result";
// ---------------Game code starts here ---------------//

// declare a few handy variables like we've done :p

var playerStartLife = parseInt(playerLife);
var hackerStartLife = parseInt(hackerLife);

// we will declare the functions for you and you will complete those
updateScores();
var roundFinished = false;
var cardSelected = false;

var play =0;
var playerName;

// we will declare the functions for you and you will complete those
updateName();
updateScores();
function updateName(){
playerName = prompt("Enter a Name ")
if ((playerName == "")||(playerName === null)){
alert("Please Enter a Name or Valid Input");
updateName()
}
else {
document.getElementById("player").innerHTML = playerName;
}
}
// 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");

var cardElements = document.querySelectorAll(".card");
// Adds click handler to all player card elements so that your cards are actionable

for(var i = 0; i < cardElements.length; i++) {
var card = cardElements[i];
if(card.classList.contains("player-card")) {
card.addEventListener("click",function(e){
cardClicked(this);
(e).preventDefault();
});
}
}

// An example of a function that controls what would happen when a card is clicked


// An example of a function that controls what would happen when a card is clicked
function cardClicked(cardEl) {

if(cardSelected) { return; }
Expand All @@ -60,65 +85,232 @@ function cardClicked(cardEl) {
}, 1400);
}

// Now write a function that shows the power level on the player card
//Shows the power level of player
function revealPlayerPower(){

var playerCard = document.querySelector(".played-card");
playerCard.classList.add("reveal-power");
}

// Write a function that shows the power level on the hacker card
//Shows the power level of hacker
function revealHackerPower(){

var hackerCard = document.querySelector(".hacker-card");
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?

//Compares the power level of hacker and player
function compareCards(){
var playerCard = document.querySelector(".played-card");
var playerPowerEl = playerCard.querySelector(".power");

var hackerCard = document.querySelector(".hacker-card");
var hackerPowerEl = hackerCard.querySelector(".power");

var playerPower = parseInt(playerPowerEl.innerHTML);
var hackerPower = parseInt(hackerPowerEl.innerHTML);

var pwrDiff = playerPower - hackerPower;

if (pwrDiff < 0) {
// Player Loses
playerLife = playerLife + pwrDiff;
hackerCard.classList.add("better-card");
playerCard.classList.add("worse-card");
document.querySelector(".player-stats .thumbnail").classList.add("ouch");
} else if (pwrDiff > 0) {
// Player Wins
hackerLife = hackerLife - pwrDiff;
playerCard.classList.add("better-card");
hackerCard.classList.add("worse-card");
document.querySelector(".hacker-stats .thumbnail").classList.add("ouch");
} else {
playerCard.classList.add("tie-card");
hackerCard.classList.add("tie-card");
}

updateScores();

if(0 >= playerLife) {
gameOver("Hacker");
} else if (0 >= hackerLife){
gameOver("Player")
}else if(play >=3){
gameOver("No-Winner");
play =0;
}

roundFinished = true;

document.querySelector("button.next-turn").removeAttribute("disabled");
}

//Use conditional statements and complete the function that shows the winner message
// Shows the winner message
function gameOver(winner) {

document.querySelector(".game-board").classList.add("game-over");
document.querySelector(".winner-section").style.display = "flex";
document.querySelector(".winner-section").classList.remove("player-color");
document.querySelector(".winner-section").classList.remove("hacker-color");

if(winner == "Hacker") {
document.querySelector(".winner-message").innerHTML = hackerWinnerMessage;
document.querySelector(".winner-section").classList.add("hacker-color");
document.querySelector("button.next-turn").setAttribute("disabled");
} else if(winner == "Player") {
document.querySelector(".winner-message").innerHTML = playerWinnerMessage+ "Congrats:"+ playerName;
document.querySelector(".winner-section").classList.add("player-color");
document.querySelector("button.next-turn").setAttribute("disabled");
}else{
document.querySelector(".winner-message").innerHTML = noWinnerMessage;
document.querySelector(".winner-section").classList.add("hacker-color");
document.querySelector("button.next-turn").setAttribute("disabled");
}
}


// 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();
}


// Now write a function that starts the game over from scratch
//Now write a function that starts the game over from scratch
function restartGame(){
document.querySelector(".game-board").classList.remove("game-over");
document.querySelector(".game-board").classList.remove("during-game");
document.querySelector(".game-board").classList.add("before-game");

document.querySelector(".winner-section").style.display = "none";
document.querySelector(".hacker-card").style.display = "none";

var cards = cardElements;

document.querySelector("button").removeAttribute("disabled");

for(var i = 0; i < cards.length; i++) {
cards[i].style.display = "none";
}

playerLife = playerStartLife;
hackerLife = hackerStartLife;

roundFinished = true;
cardSelected = false;

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.
// Updates the displayed life bar and life totals
function updateScores(){

// Here these update life totals for each player
// 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
// 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

// Update the hacker lifebar
var hackerPercent = hackerLife / hackerStartLife * 100
if (hackerPercent < 0) {
hackerPercent = 0;
}
document.querySelector(".hacker-stats .life-left").style.height = hackerPercent + "%";
}


// shuffles the card
function shuffleArray(s) {
let j, x, i;
for (i = s.length; i; i--) {
j = Math.floor(Math.random() * i);
x = s[i - 1];
s[i - 1] = s[j];
s[j] = x;
}
return s;
}


// Write a function that Plays one turn of the game
// Plays one turn of the game
function playTurn() {
play = play + 1;
roundFinished = true;
cardSelected = false;

}
document.querySelector(".game-board").classList.remove("card-selected");

// Remove "ouch" from player and hacker thumbnails
document.querySelector(".hacker-stats .thumbnail").classList.remove("ouch");
document.querySelector(".player-stats .thumbnail").classList.remove("ouch");

// Hides the "next turn" button, will show again when turn is over
document.querySelector(".next-turn").setAttribute("disabled", "true");

// Finally write the function that reveals the cards. Use
for(var i = 0; i < cardElements.length; i++) {
var card = cardElements[i];
card.classList.remove("showCard");
}

setTimeout(function(){
revealCards();
}, 500);
}
// Reveals Cards
function revealCards(){


var j = 0;
var cardIndexes = shuffleArray([0, 1, 2]);

// Get scenario cards
console.log("scenarios.length == " + scenarios.length);

var randomScenarioIndex = Math.floor(Math.random() * scenarios.length);
var scenario = scenarios[randomScenarioIndex];
console.log(scenario.hackerCard.description);

scenarios.splice(randomScenarioIndex, 1);

console.log("scenarios.length after splice == " + scenarios.length);

var hackerCard = scenario.hackerCard;
var hackerCardEl = document.querySelector(".hacker-area .card");

// Contents of the player cards
var playerCards = scenario.playerCards;

for(var i = 0; i < cardElements.length; i++) {
var card = cardElements[i];

card.classList.remove("worse-card");
card.classList.remove("better-card");
card.classList.remove("played-card");
card.classList.remove("tie-card");
card.classList.remove("prepared");
card.classList.remove("reveal-power");

// Display the payer card details
if(card.classList.contains("player-card")) {
card.querySelector(".text").innerHTML = playerCards[cardIndexes[j]].description;
card.querySelector(".power").innerHTML = playerCards[cardIndexes[j]].power;
j++;
}

// Revealing each card one by one with a delay of 100ms
setTimeout(function(card, j){
return function() {
card.classList.remove("prepared");
card.style.display = "block";
card.classList.add("showCard");
}
}(card,i), parseInt(i+1) * 200);
}

// Displaying the hacker card
hackerCardEl.querySelector(".text").innerHTML = hackerCard.description;
hackerCardEl.querySelector(".power").innerHTML = hackerCard.power;
}
23 changes: 21 additions & 2 deletions scenario.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,28 @@

var scenarios = [
{ // add the text you'd want should appear on the hacker's card
hackerCard :{
description : "I have hacked your MS-Teams account and now you won't be able to submit your assingments.",
power : 2,
},
playerCards : [{
description : "I use Google-Classrooms to submit my assignments.",
power : 4,
},
{
description : "My Professor does not assign any assignments.",
power : 1,
},
{
description : "Our Offline classes are going to start,so we don't need MS-Teams",
power : 5,
}
]
},
{
hackerCard : {
description : "I set up a fake Wi-Fi station to steal people’s email and track them online.",
power : 4,
power : 3,
},
// add 3 card descriptions you'd want should appear on the player's card. Keeping in mind that at least ONE of them should be an apt counter!
playerCards : [
Expand All @@ -31,7 +50,7 @@ var scenarios = [
{
hackerCard : {
description : "I sent a fake email from your bank asking for your account details.",
power : 3,
power : 2,
},
playerCards : [
{
Expand Down
Loading