Skip to content

Commit

Permalink
Merge pull request #1813 from codewithganeshhh/master
Browse files Browse the repository at this point in the history 
Adding Arcade Game
  • Loading branch information
@swapnilsparsh
swapnilsparsh authored Jun 18, 2024
2 parents 1999667 + 4aeb1d1 commit d5fb788
Show file tree
Hide file tree
Showing 8 changed files with 19,069 additions and 1 deletion.
Binary file added 125- Arcade Game/Arcade_Game.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
33 changes: 33 additions & 0 deletions 125- Arcade Game/README.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
# **Arcade_Room**

---

<br>

## **Description 📃**
<!-- add your game description here -->
- A pure CSS game where the user controls a stack of blocks by clicking and dragging the mouse.

## **functionalities 🎮**
<!-- add functionalities over here -->
- **Pure CSS game**: The game is entirely built using CSS, with no JavaScript required. This makes the game very lightweight and easy to load.
- **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.
- **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.
<br>

## **How to play? 🕹️**
<!-- add the steps how to play games -->
- Use the mouse to move the stack of blocks slowly and carefully.
- Try to stack the blocks in a way that they support each other.
- Avoid stacking the blocks too high, or they will fall off the screen.
- If you see that the stack of blocks is about to fall, try to move it to a more stable position.

<br>

## **Screenshots 📸**

<!-- add your screenshots like this -->
<!-- ![image](url) -->
![Image](Arcade_Game.png)


299 changes: 299 additions & 0 deletions 125- Arcade Game/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,299 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Pure CSS Game: Stacker</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=VT323'><link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
</head>
<body>
<div style="text-align: left; margin-left: 40px;
margin-top: 10px;
font-size: 30px; "><a href=""><i style="color:white;" class="fas fa-home home-icon"></i></a></div>
<!-- partial:index.partial.html -->
<form>
<input id="on-3-1" name="r-1" type="radio" value="1-1" />
<input id="on-3-2" name="r-1" type="radio" value="1-2" />
<input id="on-3-3" name="r-1" type="radio" value="1-3" />
<input id="on-3-4" name="r-1" type="radio" value="1-4" />
<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" />
<div class="controls">
<div class="control">
<div class="rs">
<div class="r r-1-1">
<label for="on-1-1"></label>
<label for="on-1-2"></label>
<label for="on-1-3"></label>
<label for="on-1-4"></label>
<label for="on-1-5"></label>
<label for="on-1-6"></label>
<label for="on-1-7"></label>
</div>
<div class="r r-1-2">
<label for="on-2-1"></label>
<label for="on-2-2"></label>
<label for="on-2-3"></label>
<label for="on-2-4"></label>
<label for="on-2-5"></label>
<label for="on-2-6"></label>
</div>
<div class="r r-1-3">
<label for="on-3-1"></label>
<label for="on-3-2"></label>
<label for="on-3-3"></label>
<label for="on-3-4"></label>
<label for="on-3-5"></label>
</div>
<div class="r r-2-1">
<label for="tw-1-1"></label>
<label for="tw-1-2"></label>
<label for="tw-1-3"></label>
<label for="tw-1-4"></label>
<label for="tw-1-5"></label>
<label for="tw-1-6"></label>
<label for="tw-1-7"></label>
</div>
<div class="r r-2-2">
<label for="tw-2-1"></label>
<label for="tw-2-2"></label>
<label for="tw-2-3"></label>
<label for="tw-2-4"></label>
<label for="tw-2-5"></label>
<label for="tw-2-6"></label>
</div>
<div class="r r-2-3">
<label for="tw-3-1"></label>
<label for="tw-3-2"></label>
<label for="tw-3-3"></label>
<label for="tw-3-4"></label>
<label for="tw-3-5"></label>
</div>
<div class="r r-3-1">
<label for="thr-1-1"></label>
<label for="thr-1-2"></label>
<label for="thr-1-3"></label>
<label for="thr-1-4"></label>
<label for="thr-1-5"></label>
<label for="thr-1-6"></label>
<label for="thr-1-7"></label>
</div>
<div class="r r-3-2">
<label for="thr-2-1"></label>
<label for="thr-2-2"></label>
<label for="thr-2-3"></label>
<label for="thr-2-4"></label>
<label for="thr-2-5"></label>
<label for="thr-2-6"></label>
</div>
<div class="r r-3-3">
<label for="thr-3-1"></label>
<label for="thr-3-2"></label>
<label for="thr-3-3"></label>
<label for="thr-3-4"></label>
<label for="thr-3-5"></label>
</div>
<div class="r r-4-1">
<label for="fr-1-1"></label>
<label for="fr-1-2"></label>
<label for="fr-1-3"></label>
<label for="fr-1-4"></label>
<label for="fr-1-5"></label>
<label for="fr-1-6"></label>
<label for="fr-1-7"></label>
</div>
<div class="r r-4-2">
<label for="fr-2-1"></label>
<label for="fr-2-2"></label>
<label for="fr-2-3"></label>
<label for="fr-2-4"></label>
<label for="fr-2-5"></label>
<label for="fr-2-6"></label>
</div>
<div class="r r-5-1">
<label for="fv-1-1"></label>
<label for="fv-1-2"></label>
<label for="fv-1-3"></label>
<label for="fv-1-4"></label>
<label for="fv-1-5"></label>
<label for="fv-1-6"></label>
<label for="fv-1-7"></label>
</div>
<div class="r r-5-2">
<label for="fv-2-1"></label>
<label for="fv-2-2"></label>
<label for="fv-2-3"></label>
<label for="fv-2-4"></label>
<label for="fv-2-5"></label>
<label for="fv-2-6"></label>
</div>
<div class="r r-6-1">
<label for="sx-1-1"></label>
<label for="sx-1-2"></label>
<label for="sx-1-3"></label>
<label for="sx-1-4"></label>
<label for="sx-1-5"></label>
<label for="sx-1-6"></label>
<label for="sx-1-7"></label>
</div>
<div class="r r-6-2">
<label for="sx-2-1"></label>
<label for="sx-2-2"></label>
<label for="sx-2-3"></label>
<label for="sx-2-4"></label>
<label for="sx-2-5"></label>
<label for="sx-2-6"></label>
</div>
<div class="r r-7-1">
<label for="svn-1-1"></label>
<label for="svn-1-2"></label>
<label for="svn-1-3"></label>
<label for="svn-1-4"></label>
<label for="svn-1-5"></label>
<label for="svn-1-6"></label>
<label for="svn-1-7"></label>
</div>
<div class="r r-8-1">
<label for="ght-1-1"></label>
<label for="ght-1-2"></label>
<label for="ght-1-3"></label>
<label for="ght-1-4"></label>
<label for="ght-1-5"></label>
<label for="ght-1-6"></label>
<label for="ght-1-7"></label>
</div>
<div class="r r-9-1">
<label for="nn-1-1"></label>
<label for="nn-1-2"></label>
<label for="nn-1-3"></label>
<label for="nn-1-4"></label>
<label for="nn-1-5"></label>
<label for="nn-1-6"></label>
<label for="nn-1-7"></label>
</div>
<div class="r r-10-1">
<label for="tn-1-1"></label>
<label for="tn-1-2"></label>
<label for="tn-1-3"></label>
<label for="tn-1-4"></label>
<label for="tn-1-5"></label>
<label for="tn-1-6"></label>
<label for="tn-1-7"></label>
</div>
</div>
</div>
</div>
<div class="bs">
<div class="div r">
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
</div>
<div class="div r">
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
</div>
<div class="div r">
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
</div>
<div class="div r">
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
</div>
<div class="div r">
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
</div>
<div class="div r">
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
</div>
<div class="div r">
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
</div>
<div class="div r">
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
</div>
<div class="div r">
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
</div>
<div class="div r">
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
</div>
<div class="line"></div>
</div>
<div class="results">
<div class="go">
<span>Game<br /> Over</span>
<div class="minor"></div>
<button type="reset">Again</button>
</div>
<div class="win">
<span>You<br /> Win</span>
<div class="major"></div>
<button type="reset">Again</button>
</div>
</div>
</form>
<h1>
Stacker
</h1>
<!-- partial -->
<script src="script.js"></script>

</body>
</html>
1 change: 1 addition & 0 deletions 125- Arcade Game/script.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
/* No JS */
Loading

0 comments on commit d5fb788

Please sign in to comment.