Skip to content

Commit d5fb788

Browse files
swapnilsparshswapnilsparsh
authored
Merge pull request #1813 from codewithganeshhh/master
Adding Arcade Game
2 parents 1999667 + 4aeb1d1 commit d5fb788

File tree

8 files changed

+19069
-1
lines changed

8 files changed

+19069
-1
lines changed

‎125- Arcade Game/Arcade_Game.png

10.6 KB
Loading

‎125- Arcade Game/README.md

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
# **Arcade_Room**
2+
3+
---
4+
5+
<br>
6+
7+
## **Description 📃**
8+
<!-- add your game description here -->
9+
- A pure CSS game where the user controls a stack of blocks by clicking and dragging the mouse.
10+
11+
## **functionalities 🎮**
12+
<!-- add functionalities over here -->
13+
- **Pure CSS game**: The game is entirely built using CSS, with no JavaScript required. This makes the game very lightweight and easy to load.
14+
- **Simple and easy to play**: The game is very simple to play, and it is easy to get started. The user just needs to click and drag the mouse to move the stack of blocks.
15+
- **Challenging**: The game can be challenging to play, and it can be difficult to stack the blocks as high as possible. This makes the game more rewarding to play.
16+
<br>
17+
18+
## **How to play? 🕹️**
19+
<!-- add the steps how to play games -->
20+
- Use the mouse to move the stack of blocks slowly and carefully.
21+
- Try to stack the blocks in a way that they support each other.
22+
- Avoid stacking the blocks too high, or they will fall off the screen.
23+
- If you see that the stack of blocks is about to fall, try to move it to a more stable position.
24+
25+
<br>
26+
27+
## **Screenshots 📸**
28+
29+
<!-- add your screenshots like this -->
30+
<!-- ![image](url) -->
31+
![Image](Arcade_Game.png)
32+
33+

‎125- Arcade Game/index.html

+299
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,299 @@
1+
<!DOCTYPE html>
2+
<html lang="en" >
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>CodePen - Pure CSS Game: Stacker</title>
6+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
7+
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=VT323'><link rel="stylesheet" href="style.css">
8+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
9+
</head>
10+
<body>
11+
<div style="text-align: left; margin-left: 40px;
12+
margin-top: 10px;
13+
font-size: 30px; "><a href=""><i style="color:white;" class="fas fa-home home-icon"></i></a></div>
14+
<!-- partial:index.partial.html -->
15+
<form>
16+
<input id="on-3-1" name="r-1" type="radio" value="1-1" />
17+
<input id="on-3-2" name="r-1" type="radio" value="1-2" />
18+
<input id="on-3-3" name="r-1" type="radio" value="1-3" />
19+
<input id="on-3-4" name="r-1" type="radio" value="1-4" />
20+
<input id="on-3-5" name="r-1" type="radio" value="1-5" /><input id="tw-3-1" name="r-2" type="radio" value="2-1" /><input id="tw-3-2" name="r-2" type="radio" value="2-2" /><input id="tw-3-3" name="r-2" type="radio" value="2-3" /><input id="tw-3-4" name="r-2" type="radio" value="2-4" /><input id="tw-3-5" name="r-2" type="radio" value="2-5" /><input id="thr-1-1" name="r-3" type="radio" value="3-1-1" /><input id="thr-1-2" name="r-3" type="radio" value="3-1-2" /><input id="thr-1-3" name="r-3" type="radio" value="3-1-3" /><input id="thr-1-4" name="r-3" type="radio" value="3-1-4" /><input id="thr-1-5" name="r-3" type="radio" value="3-1-5" /><input id="thr-1-6" name="r-3" type="radio" value="3-1-6" /><input id="thr-1-7" name="r-3" type="radio" value="3-1-7" /><input id="thr-2-1" name="r-3" type="radio" value="3-2-1" /><input id="thr-2-2" name="r-3" type="radio" value="3-2-2" /><input id="thr-2-3" name="r-3" type="radio" value="3-2-3" /><input id="thr-2-4" name="r-3" type="radio" value="3-2-4" /><input id="thr-2-5" name="r-3" type="radio" value="3-2-5" /><input id="thr-2-6" name="r-3" type="radio" value="3-2-6" /><input id="thr-3-1" name="r-3" type="radio" value="3-3-1" /><input id="thr-3-2" name="r-3" type="radio" value="3-3-2" /><input id="thr-3-3" name="r-3" type="radio" value="3-3-3" /><input id="thr-3-4" name="r-3" type="radio" value="3-3-4" /><input id="thr-3-5" name="r-3" type="radio" value="3-3-5" /><input id="thr-1-1" name="r-3" type="radio" value="3-1-1" /><input id="thr-1-2" name="r-3" type="radio" value="3-1-2" /><input id="thr-1-3" name="r-3" type="radio" value="3-1-3" /><input id="thr-1-4" name="r-3" type="radio" value="3-1-4" /><input id="thr-1-5" name="r-3" type="radio" value="3-1-5" /><input id="thr-1-6" name="r-3" type="radio" value="3-1-6" /><input id="thr-1-7" name="r-3" type="radio" value="3-1-7" /><input id="thr-2-1" name="r-3" type="radio" value="3-2-1" /><input id="thr-2-2" name="r-3" type="radio" value="3-2-2" /><input id="thr-2-3" name="r-3" type="radio" value="3-2-3" /><input id="thr-2-4" name="r-3" type="radio" value="3-2-4" /><input id="thr-2-5" name="r-3" type="radio" value="3-2-5" /><input id="thr-2-6" name="r-3" type="radio" value="3-2-6" /><input id="fr-1-1" name="r-4" type="radio" value="4-1-1" /><input id="fr-1-2" name="r-4" type="radio" value="4-1-2" /><input id="fr-1-3" name="r-4" type="radio" value="4-1-3" /><input id="fr-1-4" name="r-4" type="radio" value="4-1-4" /><input id="fr-1-5" name="r-4" type="radio" value="4-1-5" /><input id="fr-1-6" name="r-4" type="radio" value="4-1-6" /><input id="fr-1-7" name="r-4" type="radio" value="4-1-7" /><input id="fr-2-1" name="r-4" type="radio" value="4-2-1" /><input id="fr-2-2" name="r-4" type="radio" value="4-2-2" /><input id="fr-2-3" name="r-4" type="radio" value="4-2-3" /><input id="fr-2-4" name="r-4" type="radio" value="4-2-4" /><input id="fr-2-5" name="r-4" type="radio" value="4-2-5" /><input id="fr-2-6" name="r-4" type="radio" value="4-2-6" /><input id="fv-1-1" name="r-5" type="radio" value="5-1-1" /><input id="fv-1-2" name="r-5" type="radio" value="5-1-2" /><input id="fv-1-3" name="r-5" type="radio" value="5-1-3" /><input id="fv-1-4" name="r-5" type="radio" value="5-1-4" /><input id="fv-1-5" name="r-5" type="radio" value="5-1-5" /><input id="fv-1-6" name="r-5" type="radio" value="5-1-6" /><input id="fv-1-7" name="r-5" type="radio" value="5-1-7" /><input id="fv-2-1" name="r-5" type="radio" value="5-2-1" /><input id="fv-2-2" name="r-5" type="radio" value="5-2-2" /><input id="fv-2-3" name="r-5" type="radio" value="5-2-3" /><input id="fv-2-4" name="r-5" type="radio" value="5-2-4" /><input id="fv-2-5" name="r-5" type="radio" value="5-2-5" /><input id="fv-2-6" name="r-5" type="radio" value="5-2-6" /><input id="sx-1-1" name="r-6" type="radio" value="6-1-1" /><input id="sx-1-2" name="r-6" type="radio" value="6-1-2" /><input id="sx-1-3" name="r-6" type="radio" value="6-1-3" /><input id="sx-1-4" name="r-6" type="radio" value="6-1-4" /><input id="sx-1-5" name="r-6" type="radio" value="6-1-5" /><input id="sx-1-6" name="r-6" type="radio" value="6-1-6" /><input id="sx-1-7" name="r-6" type="radio" value="6-1-7" /><input id="svn-1-1" name="r-7" type="radio" value="7-1-1" /><input id="svn-1-2" name="r-7" type="radio" value="7-1-2" /><input id="svn-1-3" name="r-7" type="radio" value="7-1-3" /><input id="svn-1-4" name="r-7" type="radio" value="7-1-4" /><input id="svn-1-5" name="r-7" type="radio" value="7-1-5" /><input id="svn-1-6" name="r-7" type="radio" value="7-1-6" /><input id="svn-1-7" name="r-7" type="radio" value="7-1-7" /><input id="ght-1-1" name="r-8" type="radio" value="8-1-1" /><input id="ght-1-2" name="r-8" type="radio" value="8-1-2" /><input id="ght-1-3" name="r-8" type="radio" value="8-1-3" /><input id="ght-1-4" name="r-8" type="radio" value="8-1-4" /><input id="ght-1-5" name="r-8" type="radio" value="8-1-5" /><input id="ght-1-6" name="r-8" type="radio" value="8-1-6" /><input id="ght-1-7" name="r-8" type="radio" value="8-1-7" /><input id="nn-1-1" name="r-9" type="radio" value="9-1-1" /><input id="nn-1-2" name="r-9" type="radio" value="9-1-2" /><input id="nn-1-3" name="r-9" type="radio" value="9-1-3" /><input id="nn-1-4" name="r-9" type="radio" value="9-1-4" /><input id="nn-1-5" name="r-9" type="radio" value="9-1-5" /><input id="nn-1-6" name="r-9" type="radio" value="9-1-6" /><input id="nn-1-7" name="r-9" type="radio" value="9-1-7" /><input id="tn-1-1" name="r-10" type="radio" value="10-1-1" /><input id="tn-1-2" name="r-10" type="radio" value="10-1-2" /><input id="tn-1-3" name="r-10" type="radio" value="10-1-3" /><input id="tn-1-4" name="r-10" type="radio" value="10-1-4" /><input id="tn-1-5" name="r-10" type="radio" value="10-1-5" /><input id="tn-1-6" name="r-10" type="radio" value="10-1-6" /><input id="tn-1-7" name="r-10" type="radio" value="10-1-7" />
21+
<div class="controls">
22+
<div class="control">
23+
<div class="rs">
24+
<div class="r r-1-1">
25+
<label for="on-1-1"></label>
26+
<label for="on-1-2"></label>
27+
<label for="on-1-3"></label>
28+
<label for="on-1-4"></label>
29+
<label for="on-1-5"></label>
30+
<label for="on-1-6"></label>
31+
<label for="on-1-7"></label>
32+
</div>
33+
<div class="r r-1-2">
34+
<label for="on-2-1"></label>
35+
<label for="on-2-2"></label>
36+
<label for="on-2-3"></label>
37+
<label for="on-2-4"></label>
38+
<label for="on-2-5"></label>
39+
<label for="on-2-6"></label>
40+
</div>
41+
<div class="r r-1-3">
42+
<label for="on-3-1"></label>
43+
<label for="on-3-2"></label>
44+
<label for="on-3-3"></label>
45+
<label for="on-3-4"></label>
46+
<label for="on-3-5"></label>
47+
</div>
48+
<div class="r r-2-1">
49+
<label for="tw-1-1"></label>
50+
<label for="tw-1-2"></label>
51+
<label for="tw-1-3"></label>
52+
<label for="tw-1-4"></label>
53+
<label for="tw-1-5"></label>
54+
<label for="tw-1-6"></label>
55+
<label for="tw-1-7"></label>
56+
</div>
57+
<div class="r r-2-2">
58+
<label for="tw-2-1"></label>
59+
<label for="tw-2-2"></label>
60+
<label for="tw-2-3"></label>
61+
<label for="tw-2-4"></label>
62+
<label for="tw-2-5"></label>
63+
<label for="tw-2-6"></label>
64+
</div>
65+
<div class="r r-2-3">
66+
<label for="tw-3-1"></label>
67+
<label for="tw-3-2"></label>
68+
<label for="tw-3-3"></label>
69+
<label for="tw-3-4"></label>
70+
<label for="tw-3-5"></label>
71+
</div>
72+
<div class="r r-3-1">
73+
<label for="thr-1-1"></label>
74+
<label for="thr-1-2"></label>
75+
<label for="thr-1-3"></label>
76+
<label for="thr-1-4"></label>
77+
<label for="thr-1-5"></label>
78+
<label for="thr-1-6"></label>
79+
<label for="thr-1-7"></label>
80+
</div>
81+
<div class="r r-3-2">
82+
<label for="thr-2-1"></label>
83+
<label for="thr-2-2"></label>
84+
<label for="thr-2-3"></label>
85+
<label for="thr-2-4"></label>
86+
<label for="thr-2-5"></label>
87+
<label for="thr-2-6"></label>
88+
</div>
89+
<div class="r r-3-3">
90+
<label for="thr-3-1"></label>
91+
<label for="thr-3-2"></label>
92+
<label for="thr-3-3"></label>
93+
<label for="thr-3-4"></label>
94+
<label for="thr-3-5"></label>
95+
</div>
96+
<div class="r r-4-1">
97+
<label for="fr-1-1"></label>
98+
<label for="fr-1-2"></label>
99+
<label for="fr-1-3"></label>
100+
<label for="fr-1-4"></label>
101+
<label for="fr-1-5"></label>
102+
<label for="fr-1-6"></label>
103+
<label for="fr-1-7"></label>
104+
</div>
105+
<div class="r r-4-2">
106+
<label for="fr-2-1"></label>
107+
<label for="fr-2-2"></label>
108+
<label for="fr-2-3"></label>
109+
<label for="fr-2-4"></label>
110+
<label for="fr-2-5"></label>
111+
<label for="fr-2-6"></label>
112+
</div>
113+
<div class="r r-5-1">
114+
<label for="fv-1-1"></label>
115+
<label for="fv-1-2"></label>
116+
<label for="fv-1-3"></label>
117+
<label for="fv-1-4"></label>
118+
<label for="fv-1-5"></label>
119+
<label for="fv-1-6"></label>
120+
<label for="fv-1-7"></label>
121+
</div>
122+
<div class="r r-5-2">
123+
<label for="fv-2-1"></label>
124+
<label for="fv-2-2"></label>
125+
<label for="fv-2-3"></label>
126+
<label for="fv-2-4"></label>
127+
<label for="fv-2-5"></label>
128+
<label for="fv-2-6"></label>
129+
</div>
130+
<div class="r r-6-1">
131+
<label for="sx-1-1"></label>
132+
<label for="sx-1-2"></label>
133+
<label for="sx-1-3"></label>
134+
<label for="sx-1-4"></label>
135+
<label for="sx-1-5"></label>
136+
<label for="sx-1-6"></label>
137+
<label for="sx-1-7"></label>
138+
</div>
139+
<div class="r r-6-2">
140+
<label for="sx-2-1"></label>
141+
<label for="sx-2-2"></label>
142+
<label for="sx-2-3"></label>
143+
<label for="sx-2-4"></label>
144+
<label for="sx-2-5"></label>
145+
<label for="sx-2-6"></label>
146+
</div>
147+
<div class="r r-7-1">
148+
<label for="svn-1-1"></label>
149+
<label for="svn-1-2"></label>
150+
<label for="svn-1-3"></label>
151+
<label for="svn-1-4"></label>
152+
<label for="svn-1-5"></label>
153+
<label for="svn-1-6"></label>
154+
<label for="svn-1-7"></label>
155+
</div>
156+
<div class="r r-8-1">
157+
<label for="ght-1-1"></label>
158+
<label for="ght-1-2"></label>
159+
<label for="ght-1-3"></label>
160+
<label for="ght-1-4"></label>
161+
<label for="ght-1-5"></label>
162+
<label for="ght-1-6"></label>
163+
<label for="ght-1-7"></label>
164+
</div>
165+
<div class="r r-9-1">
166+
<label for="nn-1-1"></label>
167+
<label for="nn-1-2"></label>
168+
<label for="nn-1-3"></label>
169+
<label for="nn-1-4"></label>
170+
<label for="nn-1-5"></label>
171+
<label for="nn-1-6"></label>
172+
<label for="nn-1-7"></label>
173+
</div>
174+
<div class="r r-10-1">
175+
<label for="tn-1-1"></label>
176+
<label for="tn-1-2"></label>
177+
<label for="tn-1-3"></label>
178+
<label for="tn-1-4"></label>
179+
<label for="tn-1-5"></label>
180+
<label for="tn-1-6"></label>
181+
<label for="tn-1-7"></label>
182+
</div>
183+
</div>
184+
</div>
185+
</div>
186+
<div class="bs">
187+
<div class="div r">
188+
<div class="b"></div>
189+
<div class="b"></div>
190+
<div class="b"></div>
191+
<div class="b"></div>
192+
<div class="b"></div>
193+
<div class="b"></div>
194+
<div class="b"></div>
195+
</div>
196+
<div class="div r">
197+
<div class="b"></div>
198+
<div class="b"></div>
199+
<div class="b"></div>
200+
<div class="b"></div>
201+
<div class="b"></div>
202+
<div class="b"></div>
203+
<div class="b"></div>
204+
</div>
205+
<div class="div r">
206+
<div class="b"></div>
207+
<div class="b"></div>
208+
<div class="b"></div>
209+
<div class="b"></div>
210+
<div class="b"></div>
211+
<div class="b"></div>
212+
<div class="b"></div>
213+
</div>
214+
<div class="div r">
215+
<div class="b"></div>
216+
<div class="b"></div>
217+
<div class="b"></div>
218+
<div class="b"></div>
219+
<div class="b"></div>
220+
<div class="b"></div>
221+
<div class="b"></div>
222+
</div>
223+
<div class="div r">
224+
<div class="b"></div>
225+
<div class="b"></div>
226+
<div class="b"></div>
227+
<div class="b"></div>
228+
<div class="b"></div>
229+
<div class="b"></div>
230+
<div class="b"></div>
231+
</div>
232+
<div class="div r">
233+
<div class="b"></div>
234+
<div class="b"></div>
235+
<div class="b"></div>
236+
<div class="b"></div>
237+
<div class="b"></div>
238+
<div class="b"></div>
239+
<div class="b"></div>
240+
</div>
241+
<div class="div r">
242+
<div class="b"></div>
243+
<div class="b"></div>
244+
<div class="b"></div>
245+
<div class="b"></div>
246+
<div class="b"></div>
247+
<div class="b"></div>
248+
<div class="b"></div>
249+
</div>
250+
<div class="div r">
251+
<div class="b"></div>
252+
<div class="b"></div>
253+
<div class="b"></div>
254+
<div class="b"></div>
255+
<div class="b"></div>
256+
<div class="b"></div>
257+
<div class="b"></div>
258+
</div>
259+
<div class="div r">
260+
<div class="b"></div>
261+
<div class="b"></div>
262+
<div class="b"></div>
263+
<div class="b"></div>
264+
<div class="b"></div>
265+
<div class="b"></div>
266+
<div class="b"></div>
267+
</div>
268+
<div class="div r">
269+
<div class="b"></div>
270+
<div class="b"></div>
271+
<div class="b"></div>
272+
<div class="b"></div>
273+
<div class="b"></div>
274+
<div class="b"></div>
275+
<div class="b"></div>
276+
</div>
277+
<div class="line"></div>
278+
</div>
279+
<div class="results">
280+
<div class="go">
281+
<span>Game<br /> Over</span>
282+
<div class="minor"></div>
283+
<button type="reset">Again</button>
284+
</div>
285+
<div class="win">
286+
<span>You<br /> Win</span>
287+
<div class="major"></div>
288+
<button type="reset">Again</button>
289+
</div>
290+
</div>
291+
</form>
292+
<h1>
293+
Stacker
294+
</h1>
295+
<!-- partial -->
296+
<script src="script.js"></script>
297+
298+
</body>
299+
</html>

‎125- Arcade Game/script.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/* No JS */

0 commit comments

Comments
 (0)