rockpaperscissorsgame/index.js at main · ira-francesco/rockpaperscissorsgame · 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
const btnScissors = document.querySelector('#scissors');
const btnRock = document.querySelector('#rock');
const btnPaper = document.querySelector('#paper');
const resultsContainer = document.querySelector('.results-container');
const computerPoints = document.querySelector('#computer-h2');
const playerPoints = document.querySelector('#player-h2');
const computerSign = document.querySelector('.computer-points');
const playerSign = document.querySelector('.player-points');

btnScissors.addEventListener('click', () => {
    return playRound(btnScissors.id, computerPlay());
});

btnRock.addEventListener('click', () => {
    return playRound(btnScissors.id, computerPlay());
});


btnPaper.addEventListener('click', () => {
    return playRound(btnScissors.id, computerPlay());
});


function computerPlay() {
    let random = Math.floor(Math.random() * 3);
    let PC_Answer;

    switch (random) {
        case 0:
            PC_Answer = "rock";
            break;
        case 1:
            PC_Answer = "paper";
            break;
        case 2:
            PC_Answer = "scissors";
            break;
    }
    return PC_Answer;
}

let playerCont = 0;
let PCCont = 0;

function playRound(playerSelection, computerSelection) {
    const content = document.createElement('div');

    playerSelection = playerSelection.toLowerCase();


    if (playerSelection == computerSelection) {
        content.classList.add('content');
        content.textContent = 'Nobody Won!';
        resultsContainer.appendChild(content);
    } else if ((playerSelection == "rock" && computerSelection == "scissors") ||
        (playerSelection == "scissors" && computerSelection == "paper") ||
        (playerSelection == "paper" && computerSelection == "rock")) {
        playerCont++;
        playerPoints.innerHTML = playerCont;
        content.classList.add('content');
        content.textContent = "You won! The " + playerSelection + " beats the " + computerSelection + "!";
        content.style.color = 'green';
        resultsContainer.appendChild(content);
    } else if (playerCont == 5) {
        content.classList.add('content');
        content.textContent = "Player win this match!";
        content.style.color = 'yellow';
        resultsContainer.appendChild(content);
        document.location.reload();
    } else if (PCCont == 5) {
        content.classList.add('content');
        content.textContent = "PC win this match!";
        content.style.color = 'yellow';
        resultsContainer.appendChild(content);
        document.location.reload();

    } else {
        PCCont++;
        computerPoints.innerHTML = PCCont;
        content.classList.add('content');
        content.textContent = "You lost! The " + computerSelection + " beats the " + playerSelection + "!";
        content.style.color = 'red';
        resultsContainer.appendChild(content);
    }
}