rockPaperScissors-odin/script.js at main · sayandcode/rockPaperScissors-odin · 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
let score=[0,0];
const scoreDisplay=document.querySelector('#score');

const options=document.querySelector('.options').querySelectorAll(':scope > div');
options.forEach(option => option.addEventListener('click',()=> playRound(option.id)));

scoreDisplay.addEventListener("Game Over",e=>showEndScreen(e.detail.text));

function playRound(userChoice){
    let compChoice = computerPlay();
    let result;
    const resultDiv=document.querySelector('#roundResult');
    resultDiv.textContent=`You played ${userChoice}. Computer played ${compChoice}`
    switch(userChoice){
        case "rock":
            switch(compChoice){
                case "rock": result=[0,0];
                            break;

                case "paper": result=[0,1];
                            break;

                case "scissors": result=[1,0];
                            break;
            }
            break;

        case "paper":
            switch(compChoice){
                case "rock": result=[1,0];
                            break;

                case "paper": result=[0,0];
                            break;

                case "scissors": result=[0,1];
                            break;
            }
            break;

        case "scissors":
            switch(compChoice){
                case "rock": result=[0,1];
                            break;

                case "paper": result=[1,0];
                            break;

                case "scissors": result=[0,0];
                            break;
            }
            break;
    }
    score[0]+=result[0];
    score[1]+=result[1];
    scoreDisplay.textContent=`${score[0]}-${score[1]}`;

    if(result[1]){
        document.querySelector(`#lives :nth-child(${score[1]})`).classList.add('dead');
        document.querySelector('audio[id="No"]').play();
    }
    else if(result[0])
        document.querySelector('audio[id="Yes"]').play();

    if(score[0]==5){
        document.querySelector('audio[id="Win"]').play();
        const gameOver = new CustomEvent("Game Over", {
            detail:{
                text:"You Won!"
            }
        });
        scoreDisplay.dispatchEvent(gameOver);
    }
    else if(score[1]==5){
        document.querySelector('audio[id="Lose"]').play();
        const gameOver = new CustomEvent("Game Over", {
            detail:{
                text:"You Lost!"
            }
        });
        scoreDisplay.dispatchEvent(gameOver);
    }

}

function computerPlay(){
    let compChoice=Math.floor(Math.random()*3);//random int < 3
    switch(compChoice){

        case 0: return "rock";

        case 1: return "paper";

        case 2: return "scissors";
    }
}

function showEndScreen(text){
    const endScreen=document.querySelector('#endScreen');
    const result = endScreen.firstElementChild;
    result.textContent=text;
    endScreen.style.display='flex';
    endScreen.querySelector('button').addEventListener('click',()=>{
        score=[0,0];
        scoreDisplay.textContent=`${score[0]}-${score[1]}`;
        document.querySelectorAll('#lives > div').forEach(life=>life.classList.remove('dead'));
        endScreen.style.display='none';
        document.querySelectorAll('audio').forEach(sound=>{
            sound.pause();
            sound.currentTime = 0;
        })
    })
}