rock_paper_scissors/script.js at main · TamzinC/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
// Rock, Paper, Scissors Game

const choices = ["rock", "paper", "scissors"];
const winningConditions = ["paperrock", "scissorspaper", "rockscissors"];

let userScore = 0;
let compScore = 0;
let ties = 0;

// Getting references to HTML elements
const computerChoiceDisplay = document.getElementById("computer-choice");
const resultDisplay = document.getElementById("result");
const userScoreDisplay = document.getElementById("user-score");
const compScoreDisplay = document.getElementById("computer-score");
const tiesDisplay = document.getElementById("ties");

// Adding event listeners
document.getElementById("rock").addEventListener("click", () => playGame("rock"));
document.getElementById("paper").addEventListener("click", () => playGame("paper"));
document.getElementById("scissors").addEventListener("click", () => playGame("scissors"));

// Function to play the game
function playGame(userChoice) {
    // Generating random computer choice
    const compChoice = choices[Math.floor(Math.random() * choices.length)];
    computerChoiceDisplay.textContent = compChoice;

    // Determining the result
    const result = userChoice + compChoice;

    if (winningConditions.includes(result)) {
        showResultPopup("You win!");
        userScore++;
    } else if (userChoice === compChoice) {
       showResultPopup("It's a tie!");
        ties++;
    } else {
        showResultPopup("You lose!");
        compScore++;
    }

    // Updating the scores
    userScoreDisplay.textContent = userScore;
    compScoreDisplay.textContent = compScore;
    tiesDisplay.textContent = ties;
}


// Result pop up box function:
function showResultPopup(message) {
    // Removing any existing popups
    const existing = document.getElementById("result-overlay");
    if (existing) existing.remove();

    // Creating an overlay
    const overlay = document.createElement("div");
    overlay.id = "result-overlay";

    // Creating a popup box
    const box = document.createElement("div");
    box.id = "result-box";
    box.textContent = message;

    // Creating a close button
    const closeBtn = document.createElement("button");
    closeBtn.className = "popup-close-btn";
    closeBtn.textContent = "OK";
    closeBtn.onclick = () => {
        overlay.remove();
        computerChoiceDisplay.textContent = "-"
    }
    box.appendChild(document.createElement("br"));
    box.appendChild(closeBtn);
    overlay.appendChild(box);
    document.body.appendChild(overlay);
}


// POP UP ALERTS + PROMPTS VERSION

// let userChoice = "rock";
// let compChoice = choices[Math.floor(Math.random() * choices.length)];

// for (;true;){
//     // Prompt the user to enter a choice
//     userChoice = prompt("Enter your choice (rock, paper, or scissors):").toLowerCase();

//     // Check if the user's choice is valid
//     if (!choices.includes(userChoice)) {
//         alert("Invalid choice. Please try again.");
//         continue;
//     }

//     // Generate a random choice for the computer
//     compChoice = choices[Math.floor(Math.random() * choices.length)];
//     alert("Computer chose: " + compChoice);

//     // Determine the result
//     let result = userChoice + compChoice;

//     if (winningConditions.includes(result)) {
//         alert("You win!");
//         userScore++;
//     } else if (userChoice === compChoice) {
//         alert("It's a tie!");
//         ties++;
//     } else {
//         alert("You lose!");
//         compScore++;
//     }

//     alert(`Scores: You: ${userScore} - Computer: ${compScore} - Ties: ${ties}`);

//     // Ask if the user wants to play again
//     let keepPlaying = confirm("Would you like to play again?");

//     if (!keepPlaying) {
//         alert("Thanks for playing!");
//         break;
//     }
// }