Skip to content

Commit e5f21de

Browse files
thinkswellthinkswell
authored
Merge pull request #306 from ArshdeepSingh98/game_of_21
Game of 21
2 parents fce070e + b7f8af5 commit e5f21de

File tree

3 files changed

+322
-0
lines changed

3 files changed

+322
-0
lines changed

‎GameOf21/ArshdeepSingh98/game.js

Lines changed: 171 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
1+
var firstTurn = Math.random() < 0.5
2+
3+
const startElm = document.getElementById('start')
4+
const infoElm = document.getElementById('info-container')
5+
const optionsElm = document.getElementById('options')
6+
const resultElm = document.getElementById('result')
7+
const history = document.getElementById('guess-history')
8+
const option1 = document.getElementById('option-1')
9+
const option2 = document.getElementById('option-2')
10+
11+
12+
function start() {
13+
const responseNode = document.createElement('span')
14+
15+
startElm.classList.add('hidden')
16+
infoElm.classList.add('hidden')
17+
optionsElm.classList.remove('hidden')
18+
19+
responseNode.innerHTML = 1;
20+
responseNode.classList.add('float-left');
21+
22+
history.style.display = 'flex';
23+
24+
if (firstTurn === 0) {
25+
history.append(responseNode)
26+
27+
option1.innerHTML = 2;
28+
option2.innerHTML = 3;
29+
}
30+
}
31+
32+
function getOptimumValue(value) {
33+
return Number(value)+Number(1);
34+
}
35+
36+
function resetState() {
37+
const responseNode = document.createElement('span')
38+
firstTurn = Math.random() < 0.5;
39+
setTimeout(function() {
40+
history.innerHTML = '';
41+
}, 500)
42+
43+
if (firstTurn === 0) {
44+
responseNode.innerHTML = 1;
45+
responseNode.classList.add('float-left');
46+
history.append(responseNode)
47+
48+
option1.innerHTML = 2;
49+
option2.innerHTML = 3;
50+
} else {
51+
option1.innerHTML = 1;
52+
option2.innerHTML = 2;
53+
}
54+
55+
setTimeout(function() {
56+
resultElm.style.display = 'none';
57+
}, 4000)
58+
}
59+
60+
function check(e) {
61+
e.preventDefault();
62+
63+
const textNode = document.createElement('span')
64+
const responseNode = document.createElement('span')
65+
66+
const value1 = option1.innerHTML;
67+
const value2 = option2.innerHTML;
68+
let selected = 'option1'
69+
70+
const activeElement = document.activeElement;
71+
if(activeElement.type === 'submit') {
72+
selected = activeElement.name
73+
}
74+
75+
if (selected === 'option1') {
76+
textNode.innerHTML = value1;
77+
textNode.classList.add('float-right');
78+
79+
let responseValue = getOptimumValue(value1);
80+
responseNode.innerHTML = responseValue;
81+
responseNode.classList.add('float-left');
82+
83+
setTimeout(function() {
84+
history.append(textNode)
85+
}, 100);
86+
87+
if (Number(value1) === 21) {
88+
resultElm.style.display = 'flex';
89+
resultElm.style.background = '#0088ff';
90+
resultElm.innerHTML = 'YOU WON';
91+
resetState();
92+
return false;
93+
} else if (Number(value1) > 21) {
94+
resultElm.style.display = 'flex';
95+
resultElm.style.background = 'red';
96+
resultElm.innerHTML = 'YOU LOOSE';
97+
resetState();
98+
return false;
99+
}
100+
101+
setTimeout(function() {
102+
history.append(responseNode)
103+
}, 500)
104+
105+
if (Number(responseValue) === 21) {
106+
resultElm.style.display = 'flex';
107+
resultElm.style.background = 'red';
108+
resultElm.innerHTML = 'YOU LOOSE';
109+
resetState();
110+
return false;
111+
} else if (Number(responseValue) > 21) {
112+
resultElm.style.display = 'flex';
113+
resultElm.style.background = '#0088ff';
114+
resultElm.innerHTML = 'YOU WON';
115+
resetState();
116+
return false;
117+
}
118+
119+
option1.innerHTML = responseValue + 1;
120+
option2.innerHTML = responseValue + 2;
121+
} else {
122+
textNode.innerHTML = value2;
123+
textNode.classList.add('float-right')
124+
125+
let responseValue = getOptimumValue(value2);
126+
responseNode.innerHTML = responseValue;
127+
responseNode.classList.add('float-left');
128+
129+
setTimeout(function() {
130+
history.append(textNode)
131+
}, 100);
132+
133+
if (Number(value2) === 21) {
134+
resultElm.style.display = 'flex';
135+
resultElm.style.background = '#0088ff';
136+
resultElm.innerHTML = 'YOU WON';
137+
resetState();
138+
return false;
139+
} else if (Number(value2) > 21) {
140+
resultElm.style.display = 'flex';
141+
resultElm.style.background = 'red';
142+
resultElm.innerHTML = 'YOU LOOSE';
143+
resetState();
144+
return false;
145+
}
146+
147+
setTimeout(function() {
148+
history.append(responseNode)
149+
}, 500)
150+
151+
if (Number(responseValue) === 21) {
152+
resultElm.style.display = 'flex';
153+
resultElm.style.background = 'red';
154+
resultElm.innerHTML = 'YOU LOOSE';
155+
resetState();
156+
return false;
157+
} else if (Number(responseValue) > 21) {
158+
resultElm.style.display = 'flex';
159+
resultElm.style.background = '#0088ff';
160+
resultElm.innerHTML = 'YOU WON';
161+
resetState();
162+
return false;
163+
}
164+
165+
option1.innerHTML = responseValue + 1;
166+
option2.innerHTML = responseValue + 2;
167+
}
168+
setTimeout(function() {
169+
history.scrollTop = history.scrollHeight;
170+
}, 500)
171+
}

‎GameOf21/ArshdeepSingh98/index.html

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" href="./style.css"></link>
8+
<title>Counting to 21 Game | ArshdeepSingh98</title>
9+
</head>
10+
<body>
11+
<div class="container">
12+
<h1>Counting to 21</h1>
13+
<div id="info-container">
14+
<p>First person to write 21 wins</p>
15+
<p>You can only add 1 or 2 to whatever the other player says</p>
16+
<p>First turn is decided on random</p>
17+
<br/>
18+
</div>
19+
<button id="start" onclick="start()">Start</button>
20+
21+
<div id="guess-history" class="guesses"></div>
22+
23+
<form id="options" onsubmit="return check(event)" class="hidden">
24+
<button id="option-1" name="option1" value="option1" type="submit">1</button>
25+
<button id="option-2" name="option2" value="option2" type="submit">2</button>
26+
</form>
27+
</div>
28+
<div id="result" class="final" />
29+
<script src="./game.js"></script>
30+
</body>
31+
</html>

‎GameOf21/ArshdeepSingh98/style.css

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
body {
2+
margin: 0px;
3+
padding: 0px;
4+
background-color: #597646;
5+
display: flex;
6+
flex-direction: column;
7+
align-items: center;
8+
justify-content: center;
9+
height: 100vh;
10+
}
11+
12+
.final {
13+
width: 300px;
14+
height: 100px;
15+
color: white;
16+
display: none;
17+
position: fixed;
18+
justify-content: center;
19+
align-items: center;
20+
font-size: 24px;
21+
border: 2px solid black;
22+
font-family: Arial, Helvetica, sans-serif;
23+
}
24+
25+
.container {
26+
background-color: rgb(206, 240, 197);
27+
border: none;
28+
border-radius: 12px;
29+
display: flex;
30+
flex-direction: column;
31+
justify-content: space-between;
32+
align-items: center;
33+
width: 300px;
34+
height: 500px;
35+
min-width: 300px;
36+
max-width: 300px;
37+
min-height: 500px;
38+
padding-bottom: 40px;
39+
box-shadow: 0 4px 16px black;
40+
}
41+
42+
h1 {
43+
background-color: black;
44+
color: white;
45+
width: 100%;
46+
height: 80px;
47+
margin: 0;
48+
border-radius: 12px 12px 0 0;
49+
font-family: Arial, Helvetica, sans-serif;
50+
display: flex;
51+
flex-direction: column;
52+
text-align: center;
53+
justify-content: center;
54+
}
55+
56+
p {
57+
padding: 0 20px;
58+
font-family: Arial, Helvetica, sans-serif;
59+
}
60+
61+
.hidden {
62+
display: none;
63+
}
64+
65+
.guesses {
66+
background-color: #f7fff2;
67+
padding: 20px 0;
68+
display: none;
69+
flex-direction: column;
70+
max-height: 300px;
71+
height: 300px;
72+
overflow-y: scroll;
73+
width: 100%;
74+
}
75+
76+
span {
77+
padding: 0 40px;
78+
}
79+
80+
#start {
81+
background: black;
82+
color: white;
83+
border: none;
84+
border-radius: 6px;
85+
width: 120px;
86+
height: 40px;
87+
font-size: 12px;
88+
font-family: Arial, Helvetica, sans-serif;
89+
}
90+
91+
button {
92+
background: white;
93+
color: #212121;
94+
border: none;
95+
border-radius: 6px;
96+
width: 120px;
97+
height: 40px;
98+
font-size: 16px;
99+
margin: 0 8px;
100+
box-shadow: 2px 5px rgb(0 0 0 / 20%);
101+
font-family: Arial, Helvetica, sans-serif;
102+
}
103+
104+
button:hover {
105+
background: black;
106+
color: white;
107+
}
108+
109+
.float-left {
110+
font-family: Arial, Helvetica, sans-serif;
111+
text-align: left;
112+
color: red;
113+
}
114+
115+
.float-right {
116+
font-family: Arial, Helvetica, sans-serif;
117+
text-align: right;
118+
color: #0088ff
119+
}
120+

0 commit comments

Comments
 (0)