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

Finally #21

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

Finally #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7d293bb
without ending
abhishek-sultaniya Feb 12, 2022
22c04b5
finally basic is ready
abhishek-sultaniya Feb 12, 2022
6ba191a
timeout
abhishek-sultaniya Feb 12, 2022
7c3ed88
final js
abhishek-sultaniya Feb 12, 2022
16d8c46
scenarios
abhishek-sultaniya Feb 13, 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
2 changes: 1 addition & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
<div id="app" class="game-board">
<div class="hacker-area">
<h1>
<strong>HACKER CARDS</strong> <br />
<strong>HACKER CRDS</strong> <br />
Choose the card to stop hackers' attack
</h1>

Expand Down
203 changes: 169 additions & 34 deletions main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,19 +8,19 @@

// Your main work would be here, in main.js and would advice you to also pay a visit to the scenario.js


// Life of the player and the hacker.
var playerLife = 5;
var hackerLife = 5;

var cardSelected=false;
var count=0;
var c=2;
// Message to be displayed when the game is over
var hackerWinnerMessage = "Write the message here";
var playerWinnerMessage = "Write the message here";
var hackerWinnerMessage = "You have been defeated.";
var playerWinnerMessage = "Smart!Hacker has been arrested.";

// ---------------Game code starts here ---------------//

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

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

Expand All @@ -30,20 +30,27 @@ updateScores();
// 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 allCardElementsArr = Array.from(document.querySelectorAll(".card"));
var hackerCard = document.querySelector(".hacker-card");
var playerCardsArr = Array.from(document.querySelectorAll(".player-card"));

playerCardsArr.forEach((el) => {
el.addEventListener("click", () => {
console.log("check my card is clicked");
cardClicked(el);
});
});

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

function cardClicked(cardEl) {

function cardClicked(cardEl)
{
console.log("hji5");
if(cardSelected) { return; }
cardSelected = true;

cardEl.classList.add("played-card");
count++;

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
Expand All @@ -62,63 +69,191 @@ function cardClicked(cardEl) {

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

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

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

// var hackerCard = document.querySelector(".hacker-card");
hackerCard.classList.add("reveal-power");
console.log("hacker power revealing");
}
// 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()
{
console.log("comparing the card");
var playerCard = document.querySelector(".played-card");
var playerPower=parseInt(playerCard.lastElementChild.innerText);
var hackerPower=parseInt(hackerCard.lastElementChild.innerText);
if(playerPower>hackerPower)
{
c=0;
hackerLife=hackerLife-(playerPower-hackerPower);
hackerCard.classList.add("worse-card");
playerCard.classList.add("better-card");
console.log( "hackerLife is:");
console.log( hackerLife);
}
else
{
c=1;
playerLife=playerLife-(hackerPower-playerPower);
hackerCard.classList.add("better-card");
playerCard.classList.add("worse-card");
console.log( "plakerLife is:");
console.log( playerLife);
}

updateScores();
gameOver();
// setTimeout(function(){
// restartGame();
// },2000)
// playTurn();
console.log("scores has been updated");
}

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

function gameOver()
{
console.log("gameover initial");
if(playerLife <= 0)
{
document.querySelector(".winner-section").style.display = "block";
document.querySelector(".next-turn").style.display = "none";
document.querySelector(".winner-message").innerHTML = hackerWinnerMessage;
console.log("gameover");
restartGame();
}
else if(hackerLife <= 0)
{
document.querySelector(".winner-section").style.display = "block";
document.querySelector(".next-turn").style.display = "none";
document.querySelector(".winner-message").innerHTML = playerWinnerMessage;
console.log("gameover");
restartGame();
}
}


// Write a function that starts the game
function startGame() {

}


// Now write a function that starts the game over from scratch
function restartGame(){

function startGame()
{
console.log("start the game");
document.querySelector(".game-board").classList.remove("before-game");
document.querySelector(".game-board").classList.add("during-game");
playTurn();
}

// 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;
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) {
if (playerPercent < 0)
{
playerPercent = 0;
}
document.querySelector(".player-stats .life-left").style.height = playerPercent + "%";

// Now you write the code to update the hacker lifebar
// done the task
var hackerPercent = hackerLife / hackerStartLife * 100;
if (hackerPercent < 0)
{
hackerPercent = 0;
}
document.querySelector(".hacker-stats .life-left").style.height = hackerPercent + "%";
}

function restartGame()
{
playerLife = 5;
hackerLife = 5;
cardSelected=false;
count=0;
c=0;
console.log("NEW GAME");
}

function playTurn()
{
console.log("count is :");
console.log(count);
cardSelected = false;
var playerCard = document.querySelector(".played-card");
var hackerCard = document.querySelector(".hacker-card");

if(c==0)
{
hackerCard.classList.remove("worse-card");
playerCard.classList.remove("better-card");
console.log("removed tags1");

// Write a function that Plays one turn of the game
function playTurn() {
playerCard.classList.remove("reveal-power");
hackerCard.classList.remove("reveal-power");

}
var playerCard = document.querySelector(".played-card");
playerCard.classList.remove("played-card");

// Finally write the function that reveals the cards. Use
function revealCards(){
document.querySelector(".game-board").classList.remove("card-selected");
hackerCard.classList.remove("showCard");

playerCardsArr.forEach((el) => {
el.classList.remove("showCard");});
}
else if(c==1)
{
hackerCard.classList.remove("better-card");
playerCard.classList.remove("worse-card");
console.log( "removed tags2");

playerCard.classList.remove("reveal-power");
hackerCard.classList.remove("reveal-power");

var playerCard = document.querySelector(".played-card");
playerCard.classList.remove("played-card");

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

playerCardsArr.forEach((el) => {
el.classList.remove("showCard");});
}

setTimeout(function(){
prrer();
},1000)
function prrer(){
playerCardsArr.forEach((el) => {
el.classList.add("showCard");});
console.log("showing 2nd one");
}

setTimeout(function(){
her();
},400)
function her(){
hackerCard.classList.add("showCard");
console.log("showing 2nd one");
}

hackerCard.firstElementChild.innerText = scenarios[count].hackerCard.description;
hackerCard.lastElementChild.innerText = scenarios[count].hackerCard.power;

playerCardsArr[0].firstElementChild.innerText = scenarios[count].playerCards[0].description;
playerCardsArr[1].firstElementChild.innerText = scenarios[count].playerCards[1].description;
playerCardsArr[2].firstElementChild.innerText = scenarios[count].playerCards[2].description;

playerCardsArr[0].lastElementChild.innerText = scenarios[count].playerCards[0].power;
playerCardsArr[1].lastElementChild.innerText = scenarios[count].playerCards[1].power;
playerCardsArr[2].lastElementChild.innerText = scenarios[count].playerCards[2].power;
}
Loading