rps/javascript.js at main · rayssarrsilva/rps · 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
function getComputerChoice() {
    value = Math.floor(Math.random() * 3);

    if (value === 0) {
        value = "rock";
    } else if (value === 1) {
        value = "paper";
    } else {
        value = "scissors";
    }

    return value;
}

function getHumanChoice() {
    userChoice = prompt("Rock, Paper or Scissors? [type one]").toLowerCase();

    return userChoice;
}

let humanScore = 0;
let computerScore = 0;
let tie = 0;

function playRound(computer, human) {
    if (computerScore === 5){
        perdedor.style.visibility = "visible";
    } else if (humanScore === 5) {
        ganhador.style.visibility = "visible";

    } else {
        if (computer === "rock" && human === "scissors" || computer === "paper" && human === "rock" || computer === "scissors" && human === "papel") {
            console.log(`Lost this round [${computer} beats ${human}]`);
            computerScore += 1;

            return "computer"
        } else if (human === "rock" && computer === "scissors" || human === "paper" && computer === "rock" || human === "scissors" && computer === "papel") {
            console.log(`Won this round [${human} beats ${computer}]`);
            humanScore += 1;

            return "human";
        } else {
            if (computerScore !== 5 || humanScore != 5) { // Stop couting if some of the players in the score reach 5 points
                console.log(`Tie between You and Computer [${human} = ${computer}]`);
                tie += 1;
                return "tie";
            }
        }
    }

}


// Score + buttons
const rock = document.querySelector(".rock");
const paper = document.querySelector(".paper");
const scissors = document.querySelector(".scissors");
const score = document.querySelector(".score");

rock.addEventListener("click", () => {
    let resultRock = playRound(getComputerChoice(), "rock");
    score.textContent =`Score: ${humanScore} x ${computerScore} | Ties: ${tie}`;

    result();

});

paper.addEventListener("click", () => {
    let resultPaper = playRound(getComputerChoice(), "paper");
    score.textContent =`Score: ${humanScore} x ${computerScore} | Ties: ${tie}`;

    result();
});

scissors.addEventListener("click", () => {
    let resultScissors = playRound(getComputerChoice(), "scissors");
    score.textContent =`Score: ${humanScore} x ${computerScore} | Ties: ${tie}`;

    result();
});


score.textContent =`Score: ${humanScore} x ${computerScore} | Ties: ${tie}`;

// Score design
score.setAttribute("style", "font-size: 35px; text-align: center; padding-top: 70px;")

// Declaration of the winner design
const ganhador = document.querySelector(".ganhador");
const perdedor = document.querySelector(".perdedor");
ganhador.style.visibility = "hidden";
perdedor.style.visibility = "hidden";

function result() {
    if (computerScore === 5) {
        ganhador;
        rock.remove();
        paper.remove();
        scissors.remove();
        perdedor.style.visibility = "visible";
    } else if (humanScore === 5) {
        perdedor;
        rock.remove();
        paper.remove();
        scissors.remove();
        ganhador.style.visibility = "visible";
    }
}