rock-paper-scissors/javascript.js at main · charlilize/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
// RANDOMLY ASSIGNS THE COMPUTER ROCK, PAPER, OR SCISSORS
function getComputerChoice() {
    // Randomize a random number from 0-2, inclusive
    let choice = Math.round(Math.random() * 2);

    // Assigns rock, paper, or scissors, depending on randomization
    if (choice == 0) {
        return 'ROCK';
    } else if (choice == 1) {
        return 'PAPER';
    } else if (choice == 2) {
        return 'SCISSORS';
    }
}


function updateWins(playerSelection, computerSelection) {
        // Determine who wins each round
        if (playerSelection == computerSelection) {
            return;
        } else if (playerSelection == "ROCK" && computerSelection == "SCISSORS") {
            return 1;
        } else if (playerSelection == "PAPER" && computerSelection == "ROCK") {
            return 1;
        } else if (playerSelection == "SCISSORS" && computerSelection == "PAPER") {
            return 1
        } else if (computerSelection == "ROCK" && playerSelection == "SCISSORS") {
            return 0;
        } else if (computerSelection == "PAPER" && playerSelection == "ROCK") {
            return 0;
        } else if (computerSelection == "SCISSORS" && playerSelection == "PAPER") {
            return 0;
        } else {
            return "Error";
        }
}

// PLAYS A ROUND OF GAME
function playRound(playerSelection, computerSelection) {
    // Determine who wins each round
    if (playerSelection == computerSelection) {
        return "It's a Tie!";
    } else if (playerSelection == "ROCK" && computerSelection == "SCISSORS") {
        return "You Win! Rock beats Scissors!";
    } else if (playerSelection == "PAPER" && computerSelection == "ROCK") {
        return "You Win! Paper beats Rock!";
    } else if (playerSelection == "SCISSORS" && computerSelection == "PAPER") {
        return "You Win! Scissors beats Paper!"
    } else if (computerSelection == "ROCK" && playerSelection == "SCISSORS") {
        return "You Lose! Rock beats Scissors!";
    } else if (computerSelection == "PAPER" && playerSelection == "ROCK") {
        return "You Lose! Paper beats Rock!";
    } else if (computerSelection == "SCISSORS" && playerSelection == "PAPER") {
        return "You Lose! Scissors beats Paper!";
    } else {
        return "Error";
    }
}

const buttonsDiv = document.querySelector("#container");
const buttons = document.querySelectorAll("button");
const displayResults = document.querySelector("#results");
const displayWinner = document.querySelector("#winner");
const playerScore = document.querySelector("#plyrScore");
const compScore = document.querySelector("#compScore");
const playAgain = document.querySelector("#playAgain")
let playerWins = 0;
let computerWins = 0;
let roundWinner = 0;

buttons.forEach((button) => {

    button.addEventListener("click", (event) => {
        // Randomize computer's choice every play
        let computerSelection = getComputerChoice();

        // Depending on element's ID put player's selection
        switch(event.target.id) {
            case "rock":
                displayResults.textContent = playRound("ROCK", computerSelection);
                roundWinner = updateWins("ROCK", computerSelection);
                break;
            case "paper":
                displayResults.textContent = playRound("PAPER", computerSelection);
                roundWinner = updateWins("PAPER", computerSelection);
                break;
            case "scissors":
                displayResults.textContent = playRound("SCISSORS", computerSelection);
                roundWinner = updateWins("SCISSORS", computerSelection);
                break;
        }

        if (roundWinner == 1)      playerWins++;
        else if (roundWinner == 0) computerWins++;

        playerScore.textContent = "Player: " + playerWins;
        compScore.textContent = "Computer: " + computerWins;

        if (playerWins == 5 || computerWins == 5) {
            buttonsDiv.remove();

            if (playerWins == computerWins)     displayWinner.textContent = "GAME OVER: It's a Tie!";
            else if (playerWins > computerWins) displayWinner.textContent = "GAME OVER: Player Wins the Game!";
            else if (computerWins > playerWins) displayWinner.textContent = "GAME OVER: Computer Wins the Game!";

            let playAgainBtn = document.createElement("button");
            playAgainBtn.setAttribute("class", "buttons");
            playAgain.appendChild(playAgainBtn);
            playAgainBtn.textContent = "Play Again?";

            playAgainBtn.addEventListener("click", () => {
                window.location.reload();
            });
        }
    });
});