-
Notifications
You must be signed in to change notification settings - Fork 0
/
function.js
127 lines (113 loc) · 3.83 KB
/
function.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
const game = () => {
let pScore = 0;
let cScore = 0;
let playerName = document.querySelector(".player-score h2");
function getInputVal() {
let inputVal = document.getElementById("myInput").value;
return inputVal;
}
const startGame = () => {
const playButton = document.querySelector(".intro button");
const introScreen = document.querySelector(".intro");
const matchScreen = document.querySelector(".match");
// let playerName = document.querySelector(".player-name");
let defaultPlayerName = document.querySelector(".player-score h2");
playButton.addEventListener("click", () => {
introScreen.classList.add("fadeOut");
matchScreen.classList.add("fadeIn");
defaultPlayerName.textContent = getInputVal();
});
};
const playMatch = () => {
const playerOption = document.querySelectorAll(".options button");
const playerHand = document.querySelector(".player-hand");
const computerHand = document.querySelector(".computer-hand");
const hands = document.querySelectorAll(".hands img");
const computerOptions = ["rock", "paper", "scissors"];
hands.forEach((hand) => {
hand.addEventListener("animationend", function () {
this.style.animation = "";
});
});
playerOption.forEach((option) => {
option.addEventListener("click", function () {
const computerNumber = Math.floor(Math.random() * 3);
const computerChoice = computerOptions[computerNumber];
//call compareHand fn
setTimeout(() => {
compareHands(this.textContent, computerChoice);
updateScore();
//update images
playerHand.src = `${this.textContent}.png`;
computerHand.src = `${computerChoice}.png`;
}, 2000);
playerHand.style.animation = "shakePlayer 2s ease";
computerHand.style.animation = "shakeComputer 2s ease";
});
});
};
const updateScore = () => {
let winner = document.querySelector(".winner");
playerScore = document.querySelector(".player-score p");
computerScore = document.querySelector(".computer-score p");
playerScore.textContent = pScore;
computerScore.textContent = cScore;
// if (winner.textContent === "Player Wins") {
// pScore++;
// } else if (winner.textContent === "Computer Wins") {
// cScore++;
// } else {
// return;
// }
};
const compareHands = (playerChoice, computerChoice) => {
let winner = document.querySelector(".winner");
//check for tie
if (playerChoice === computerChoice) {
winner.textContent = "It is a tie";
return;
}
//check for rock
if (playerChoice === "rock") {
if (computerChoice === "scissors") {
winner.textContent = playerName.textContent + " Wins";
pScore++;
updateScore();
return;
} else {
winner.textContent = "Computer Wins";
cScore++;
updateScore();
}
}
//check for scissors
if (playerChoice === "paper") {
if (computerChoice === "scissors") {
winner.textContent = "Computer Wins";
cScore++;
updateScore();
return;
} else {
winner.textContent = "Player Wins";
pScore++;
updateScore();
}
}
//check for paper
if (playerChoice === "rock") {
if (computerChoice === "paper") {
winner.textContent = "Computer Wins";
cScore++;
updateScore();
return;
} else {
winner.textContent = "Player Wins";
pScore++;
updateScore();
}
}
};
startGame();
playMatch();
};
game();