"Rock-Paper-Scissors Game"
Bootstrap 4.1.1 Snippet by karanbohara0

Post to Facebook Tweet this

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
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rock Paper Scissors</title>
<link rel="stylesheet" href="10-rock-paper-scissors.css">
<!-- <link rel="stylesheet" href="10-rock-paper-scissors.js"> -->
</head>
<body>
<p class="title">Rock Paper Scissors</p>
<button class="move-button" onclick="playGame('Rock')"><img src="https://supersimple.dev/projects/rock-paper-scissors/images/rock-emoji.png" class="move-icon"></button>
<button class="move-button" onclick="playGame('Paper')"><img src="https://supersimple.dev/projects/rock-paper-scissors/images/paper-emoji.png" class="move-icon" ></button>
<button class="move-button" onclick="playGame('Scissors')"><img src="https://supersimple.dev/projects/rock-paper-scissors/images/scissors-emoji.png" class="move-icon"></button>
<p class="js-result result"></p>
<p class="js-score score"></p>
<button onclick="score.wins=0;score.losses=0;score.ties=0;
localStorage.removeItem('score');
updateScoreElement();
" class="reset-score-button">Reset Score</button>
<script src="10-rock-paper-scissors.js">
</script>
</body>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
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
body{
background-color: rgb(25,25,25);
color: white;
font-family: Arial;
}
.title{
font-size: 30px;
font-weight: bold;
}
.move-icon{
height: 50px;
}
.move-button{
background-color: transparent;
border: 3px solid white;
border-radius: 100%;
width: 120px;
height: 120px;
margin-right: 10px;
cursor: pointer;
}
.result{
font-size: 25px;
font-weight: bold;
margin-top: 50px;
}
.score{
margin-top: 60px;
}
.reset-score-button{
background-color: white;
border: none;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
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
let score =(JSON.parse(localStorage.getItem('score')))
||{
wins:0,
losses:0,
ties:0
};
updateScoreElement();
/*if(!score){ // it means if the score is null
score = {
wins:0,
losses:0,
ties:0
};
}*/
function playGame(playerMove) {
const computerMove = pickComputerMove();
let result = '';
if (playerMove === 'Scissors') {
if (computerMove === 'Rock') {
result = 'You lose.';
} else if (computerMove === 'Paper') {
result = 'You win.';
} else if (computerMove === 'Scissors') {
result = 'Tie.';
}
}
else if (playerMove === 'Rock') {
if (computerMove === 'Rock') {
result = 'Tie.';
} else if (computerMove === 'Paper') {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Dashboard React

Questions / Comments: