-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
126 lines (110 loc) · 3.49 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Cricket Game</title>
<link rel="stylesheet" href="cricket.css">
</head>
<body>
<h1>Bat Ball Stump Game</h1>
<button class="choice-button" onclick="
let computerChoice = generateComputerChoice();
let resultMsg = getResult('Bat', computerChoice);
showResult('Bat', computerChoice, resultMsg);
">
<img src="images/bat.png" alt="Bat Image" class="choice-image">
</button>
<button class="choice-button" onclick="
computerChoice = generateComputerChoice();
resultMsg = getResult('Ball', computerChoice);
showResult('Ball', computerChoice, resultMsg);
">
<img src="images/ball.png" alt="Ball Image" class="choice-image">
</button>
<button class="choice-button" onclick="
computerChoice = generateComputerChoice();
resultMsg = getResult('Stump', computerChoice);
showResult('Stump', computerChoice, resultMsg);
">
<img src="images/stump.png" alt="Stump Image" class="choice-image">
</button>
<h3 id="user-move"></h3>
<h3 id="computer-move"></h3>
<h3 id="result"></h3>
<h3 id="score"></h3>
<button onclick="localStorage.clear()
resetScore();
">Reset</button>
<script>
let scoreStr = localStorage.getItem('Score');
let score;
resetScore(scoreStr);
function resetScore(scoreStr) {
score = scoreStr ? JSON.parse(scoreStr) : {
win: 0,
lost: 0,
tie: 0,
};
score.displayScore = function() {
return `Score:Won:${score.win}, Lost:${score.lost}, Tie: ${score.tie}`;
};
showResult();
}
function generateComputerChoice() {
//This will generate random number between 0 and 3
let randomNumber = Math.random() * 3;
if (randomNumber > 0 && randomNumber <= 1) {
return 'Bat';
} else if (randomNumber > 1 && randomNumber <= 2) {
return 'Ball';
} else {
return 'Stump'
}
}
function getResult(userMove, computerMove) {
if (userMove === 'Bat') {
if (computerMove === 'Ball') {
score.win++;
return 'User won.';
} else if (computerMove === 'Bat') {
score.tie++;
return `It's a tie`;
} else if (computerMove === 'Stump') {
score.lost++;
return 'Computer has won';
}
} else if (userMove === 'Ball') {
if (computerMove === 'Ball') {
score.tie++;
return `It's a tie`;
} else if (computerMove === 'Bat') {
score.lost++;
return 'Computer has won';
} else if (computerMove === 'Stump') {
score.win++;
return 'User won.';
}
} else {
if (computerMove === 'Ball') {
score.lost++;
return 'Computer has won';
} else if (computerMove === 'Bat') {
score.win++;
return 'User won.';
} else if (computerMove === 'Stump') {
score.tie++;
return `It's a tie`;
}
}
}
function showResult(userMove, computerMove, result) {
localStorage.setItem('Score', JSON.stringify(score));
document.querySelector('#user-move').innerText =
userMove ? `You have chosen ${userMove}` : '';
document.querySelector('#computer-move').innerText =
computerMove ? `Computer choice is ${computerMove}` : '';
document.querySelector('#result').innerText = result || '';
document.querySelector('#score').innerText = score.displayScore();
}
</script>
</body>
</html>