Rock-Paper-Scissors-JavaScript/index.html at master · atishchandra/Rock-Paper-Scissors-JavaScript · 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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE html>
<html>
<head>
	<title>Rock, Paper, Scissor</title>
	<style type="text/css">
		body{
			background-color:#ffe6e6;
			display:flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			align-content: center;
		}
		button{
			height: 40px;
			width: 100px;
			background-color: cyan;
		}
		p{
			font-size: 20px;
		}


	</style>
</head>
<body>
<h1> Rock, Paper, Scissors </h1>
<p>Play this game with the computer and make sure you Win</p>
<p><strong>Rules: </strong>"Rock breaks scissors," "Scissor cuts Paper", "Paper covers Rock."</p><br>
<div class="score">
</div>
<div class="message">

</div>

<button type="'button">Rock</button><br>
<button type="button">Paper</button><br>
<button type="button">Scissors</button><br>

<script type="text/javascript">
        const message = document.querySelector('.message');
        const score = document.querySelector('.score');
        const buttons = document.querySelectorAll('button');
        const winnerScores = [0,0];

        //add event listeners to buttons
        for ( let i = 0 ; i < buttons.length ; i++){
            buttons[i].addEventListener('click', playGame);
        }

        function playGame(e){
            //setup player's selection
            let playerSelection = e.target.innerText;
            //setup a random number to select for computer
            //selects a number between 0 and 1 (1 not-inclusive)
            let computerSelection = Math.random();

            //if computerSelection is less than .34, computer selects Rock
            if (computerSelection < .34){
                computerSelection = 'Rock';
            } else if (computerSelection <= .67){
                computerSelection = 'Paper';
            } else {
                computerSelection = 'Scissors';
            }

            //setup a function to compare winners and return result
            let result = checkWinner(playerSelection, computerSelection);

            //output scores to the DOM
            if (result === 'Player'){
                result += ' wins!';
                //update score
                winnerScores[0]++;
            }

            if (result === 'Computer'){
                result += ' wins!';
                winnerScores[1]++;
            }

            if (result === 'Draw'){
                result += '. It\'s a tie!'
            }

            //output score into Score DIV
            score.innerHTML = 'Player: [ ' + winnerScores[0]+ ' ] Computer: [ ' + winnerScores[1] + ' ]';

            //output player and computer's selections
            messenger('Player: <strong>' + playerSelection + '</strong> Computer: <strong>' + computerSelection + '</strong><br>' + result);
        }

        function messenger(selectionMessage){
            message.innerHTML = selectionMessage;
        }

        function checkWinner(player, computer){
            if (player === computer){
                return 'Draw';
            }

            if (player === 'Rock'){
                if(computer === 'Paper'){
                    return 'Computer';
                } else {
                    return 'Player';
                }
            }

            if (player === 'Paper'){
                if (computer === 'Scissors'){
                    return 'Computer';
                } else {
                    return 'Player';
                }
            }

            if (player === 'Scissors'){
                if (computer === 'Rock'){
                    return 'Computer';
                } else {
                    return 'Player';
                }
            }


            if (player === 'Scissors'){
                if (computer === 'Rock'){
                    return 'Computer';
                } else {
                    return 'Player';
                }
            }


            if (player === 'Scissors'){
                if (computer === 'Paper'){
                    return 'Player';
                } else {
                    return 'Computer';
                }
            }
        }
    </script>
</body>
</html>