rock-paper-scissors/index.html at main · charliewturner/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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="playerSelection" style="margin-bottom: 30px;">
        <button id="rock">Rock</button>
        <button id="paper">Paper</button>
        <button id="scissors">Scissors</button>
    </div>

    <div id="scoreboard">Scoreboard

        <p id="playerScore"></p>
        <p id="computerScore"></p>
        <p id="winMessage"></p>

    </div>


    <script>

        let playerWinCount = 0;
        let computerWinCount = 0;
        let drawnGameCount = 0;
        let getPlayerChoice;

        const rockButton = document.querySelector("#rock");
        const paperButton = document.querySelector("#paper");
        const scissorsButton = document.querySelector("#scissors");
        const playerSelection = document.querySelector("#playerSelection");
        const playerScore = document.querySelector("#playerScore");
        const computerScore = document.querySelector("#computerScore");
        const winMessage = document.querySelector('#winMessage');

        rockButton.addEventListener('click', () => {
            getPlayerChoice = "rock";
            console.log("You chose " + getPlayerChoice);
            console.log(playRound());
            console.log(tallyScore());
        });

        paperButton.addEventListener('click', () => {
            getPlayerChoice = "paper";
            console.log("You chose " + getPlayerChoice);
            console.log(playRound());
            console.log(tallyScore());
        });

        scissorsButton.addEventListener('click', () => {
            getPlayerChoice = "scissors";
            console.log("You chose " + getPlayerChoice);
            console.log(playRound());
            console.log(tallyScore());
        });


        function playRound() {
            const choices = ["rock", "paper", "scissors"];
            let getComputerChoice = choices[Math.floor(Math.random() * 3)];
            console.log("Computer chose " + getComputerChoice);

            const playerChoice = getPlayerChoice;
            const computerChoice = getComputerChoice;
            const playerWins = "You win! " + playerChoice + " beats " + computerChoice;
            const computerWins = "You lose! " + computerChoice + " beats " + playerChoice;
            const drawnGame = "Its a tie!";


            if ((playerChoice === 'rock' && computerChoice === 'scissors')
                || (playerChoice === 'paper' && computerChoice === 'rock')
                || (playerChoice === 'scissors' && computerChoice === 'paper')) {
                playerWinCount++;
                return playerWins;

            } else if
                ((playerChoice === 'rock' && computerChoice === 'paper')
                || (playerChoice === 'paper' && computerChoice === 'scissors')
                || (playerChoice === 'scissors' && computerChoice === 'rock')) {
                computerWinCount++;
                return computerWins;

            } else {
                drawnGameCount++;
                return drawnGame;
            }

        }

        function tallyScore() {
            computerScore.textContent = "Computer score: " + computerWinCount;
            playerScore.textContent = "Player score: " + playerWinCount

            if (playerWinCount === 5 || computerWinCount === 5) {
                if (playerWinCount > computerWinCount) {
                    winMessage.textContent = "Well done, you win!";
                } else {
                    winMessage.textContent = "You lose! Better luck next time!";
                }
                rockButton.disabled = true;
                paperButton.disabled = true;
                scissorsButton.disabled = true;
            }


        };


    </script>
</body>

</html>