rock__paper_scissors/script.js at main · BertaRyan/rock__paper_scissors · GitHub

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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
let playerScore = 0
let computerScore = 0
let winningScore = 3
let gameOver = false


let playerScoreSpan = document.querySelector('.playerScore');
let computerScoreSpan = document.querySelector('.computerScore');

const updateScore= (playerScore,computerScore) => {
    playerScoreSpan.innerText= `${playerScore}`;
    computerScoreSpan.innerText= `${computerScore}`;
}


const rockbtn = document.querySelector('.rock');
const paperbtn = document.querySelector('.paper');
const scissorsbtn = document.querySelector('.scissors');
const outcome = document.querySelector('.outcome')

rockbtn.addEventListener('click', e =>{
   const computerSelection = getComputerChoice();
   const playerSelection = 'rock'
   playRound(playerSelection,computerSelection);
   updateScore(playerScore,computerScore);
   checkForWinner(playerScore,computerScore);
});

paperbtn.addEventListener("click", e => {
    const computerSelection = getComputerChoice();
    const playerSelection = 'paper'
    playRound(playerSelection,computerSelection);
    updateScore(playerScore,computerScore);
    checkForWinner(playerScore,computerScore);
});

scissorsbtn.addEventListener('click',e => {
    const computerSelection = getComputerChoice();
    const playerSelection = 'scissors'
    playRound(playerSelection,computerSelection);
    updateScore(playerScore,computerScore);
    checkForWinner(playerScore,computerScore);
})

const getComputerChoice = () => {
    let options = ['rock', 'paper', 'scissors']
    const randomNumber = Math.floor(Math.random() * 3)
    return options[randomNumber]
}

const playRound = (playerSelection, computerSelection) => {
    if (playerSelection === computerSelection) {
        const p = document.createElement('p');
        p.innerText=`Tie game you both picked ${playerSelection}`;
        outcome.appendChild(p);
    } else if (playerSelection === 'paper' && computerSelection === 'rock') {
        playerScore++
        const p = document.createElement('p');
        p.innerText='You win! paper covers rock'
        outcome.appendChild(p);
    } else if (playerSelection === 'rock' && computerSelection === 'scissors') {
        playerScore++
        const p = document.createElement('p')
        p.innerText ='You win! Rock smashes Scissors'
        outcome.appendChild(p);

    } else if (playerSelection === 'Scissors' && computerSelection === 'paper') {
        playerScore++
        const p = document.createElement('p');
        p.innerText='You win! Scissors cuts Paper'
        outcome.appendChild(p);
    } else if (playerSelection === 'rock' && computerSelection === 'paper') {
        computerScore++
        const p = document.createElement('p');
        p.innerText = 'You lose, Paper covers Rock'
        outcome.appendChild(p);
    } else if (playerSelection === 'paper' && computerSelection === 'scissors') {
        computerScore++
        const p = document.createElement('p');
        p.innerText='You lose! Scissors cuts Paper'
        outcome.appendChild(p);
    } else if (playerSelection === 'scissors' && computerSelection === 'rock') {
        computerScore++
        const p = document.createElement('p');
        p.innerText='You lose! Rock smashes Scissors'
        outcome.appendChild(p);
    }
}

function checkForWinner(playerScore,computerScore){
    if(playerScore === winningScore) {
    const h2 = document.createElement('h2');
    h2.classList.add('player-won')

    h2.innerText='Good job! You are the victor';
    outcome.append(h2);
    gameOver = true;
    rockbtn.disabled = true
    paperbtn.disabled = true
    scissorsbtn.disabled = true
    reset()

    } else if(computerScore === winningScore) {
        const h2 = document.createElement('h2');
        h2.classList.add('comp-won')

        h2.innerText='You lost this time. Keep practicing'
        gameOver = true;
        outcome.append(h2);
        rockbtn.disabled = true
        paperbtn.disabled = true
        scissorsbtn.disabled = true
        reset()
    }
}


const resetButton = document.querySelector('.reset');

resetButton.addEventListener('click', (e) =>{
   playerScoreSpan.innerText = 0;
   computerScoreSpan.innerText = 0;
   playerScore = 0;
   computerScore = 0;
   outcome.innerText = "";
   gameOver = false;
   rockbtn.disabled = false;
   paperbtn.disabled = false;
   scissorsbtn.disabled = false;
   reset();

})

// const game = () => {

//     for (let i = 1; i < 5; i++) {
//         const playerSelection = prompt('Pick rock paper or scissors').toLowerCase()
//         const computerSelection = getComputerChoice();
//         playRound(playerSelection, computerSelection)
//         console.log(playRound(playerSelection, computerSelection));
//     }
//     if (playerScore === computerScore) {
//         console.log('you tied')
//         return 'You tied the computer, which pretty much makes you an adriod!'
//     } else if (playerScore > computerScore) {
//         console.log('you win')
//         return 'Congratz you beat the computer!'
//     } else if (playerScore < computerScore) {
//         console.log('you lost')
//         return 'You lost, Try again. If you dare!'
//     }
//     console.log(playerScore, computerScore)


// }


// game();
// console.log(playerScore, computerScore)