kunjgit · kunjgit · Jul 14, 2024 · Jun 18, 2024 · Jun 18, 2024 · Jun 18, 2024
diff --git a/Games/Hide_And_Seek/README.md b/Games/Hide_And_Seek/README.md
@@ -0,0 +1,38 @@
+# Hide and Seek
+
+## Description 📌
+
+Hide and Seek is a Memorising flipping-Card Game that features a beautiful and attractive interference where players test their memory skills in order to find out the correct pair of cards. The objective of this game is to test the memory power of player. The player has to flip two cards at a time and find out the matching pair of it, if the player succesfully finds out all the matched pairs, it will be a win otherwise defeat.
+
+## Functionalities 🔎
+
+1. It consists a play area of 4x4 square tiles.
+2. Added Gradient effect to make it beautiful.
+3. A Reset Button to restart the gameplay.
+4. Flipping of tiles to match the pair.
+5. A Win! alert, on successfully matching all pairs.
+
+## How to Play 🕹️
+
+- Start by flipping a tile and remember the symbol behind it.
+- Here, the game begins now. As you start searching for other tiles and initial tile will hide.
+- Now, search for the tile until the pair matches.
+- If the pair matches, the tiles will remain open.
+- Continuing play in this manner, till all pairs are matched.
+- Once all pairs get matched, you'll win the game 🏆.
+
+## Screenshots 📸
+
+Here are some screenshots of the game:
+
+**At the Starting of Game:**
+
+![Starting](./assets/image1.png)
+
+**During Playing:**
+
+![Playing](./assets/image2.png)
+
+**At the End of Game:**
+
+![End](./assets/image3.png)
diff --git a/Games/Hide_And_Seek/assets/image1.png b/Games/Hide_And_Seek/assets/image1.png
diff --git a/Games/Hide_And_Seek/assets/image2.png b/Games/Hide_And_Seek/assets/image2.png
diff --git a/Games/Hide_And_Seek/assets/image3.png b/Games/Hide_And_Seek/assets/image3.png
diff --git a/Games/Hide_And_Seek/index.html b/Games/Hide_And_Seek/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Hide and Seek</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <h2>Hide and Seek</h2>
+        <div class="game"></div>
+        <button class="reset" onclick="window.location.reload()">Reset Game</button>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Games/Hide_And_Seek/script.js b/Games/Hide_And_Seek/script.js
@@ -0,0 +1,35 @@
+const generateGame = () => {
+    const emojis = ["🍄", "🍄", "🎄", "🎄", "🌵", "🌵", "🍀", "🍀", "🍁", "🍁", "🌴", "🌴", "🌻", "🌻", "🌹", "🌹"];
+    var shuffle_emojis = emojis.sort(() => Math.random() > .5 ? 2 : -1);
+    for (var i = 0; i < emojis.length; i++) {
+        let box = document.createElement('div')
+        box.className = 'item';
+        box.innerHTML = shuffle_emojis[i]
+        box.onclick = function() {
+            this.classList.add('boxOpen')
+            setTimeout(function() {
+                if (document.querySelectorAll('.boxOpen').length > 1) {
+                    if (document.querySelectorAll('.boxOpen')[0].innerHTML == document.querySelectorAll('.boxOpen')[1].innerHTML) {
+                        document.querySelectorAll('.boxOpen')[0].classList.add('boxMatch')
+                        document.querySelectorAll('.boxOpen')[1].classList.add('boxMatch')
+
+                        document.querySelectorAll('.boxOpen')[1].classList.remove('boxOpen')
+                        document.querySelectorAll('.boxOpen')[0].classList.remove('boxOpen')
+
+                        if (document.querySelectorAll('.boxMatch').length == emojis.length) {
+                            alert("Winner!")
+                            window.location.reload()
+                        }
+                    }   else {
+                        document.querySelectorAll('.boxOpen')[1].classList.remove('boxOpen')
+                        document.querySelectorAll('.boxOpen')[0].classList.remove('boxOpen')
+                    }
+                }
+            },500)
+        }
+
+        document.querySelector('.game').appendChild(box);
+    }
+}
+
+generateGame();
diff --git a/Games/Hide_And_Seek/style.css b/Games/Hide_And_Seek/style.css
@@ -0,0 +1,105 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: linear-gradient(-45deg, #7d0d56, #37128c, #861169, #3b128e);
+    background-size: 400% 400%;
+    animation: gradient 10s ease infinite;
+    min-height: 100vh;
+}
+
+@keyframes gradient {
+	0% {
+		background-position: 0% 50%;
+	}
+	50% {
+		background-position: 100% 50%;
+	}
+	100% {
+		background-position: 0% 50%;
+	}
+}
+
+
+.container {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    gap: 30px;
+    background: linear-gradient(to right, rgba(46, 0, 59, 0.603), rgba(46, 0, 59, 0.603), rgba(46, 0, 59, 0.603));
+    padding: 40px 60px;
+}
+
+h2 {
+    font-size: 2em;
+    color: rgba(255, 255, 255, 0.74);
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+}
+
+.reset {
+    padding: 15px 20px;
+    background-color: rgba(255, 20, 251, 0.379);
+    color: aliceblue;
+    border: none;
+    font-size: 0.8em;
+    text-transform: uppercase;
+    cursor: pointer;
+    font-weight: 600;
+}
+
+.reset:focus {
+    color: #fff;
+    background: #3700ff69;
+}
+
+.game {
+    width: 430px;
+    height: 430px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    transform-style: preserve-3d;
+    perspective: 500px;
+}
+
+.item {
+    position: relative;
+    width: 100px;
+    height: 100px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 3em;
+    background: #ffffff2f;
+    transform: rotateY(180deg);
+    transition: 0.25s;
+}
+
+.item.boxOpen {
+    transform: rotateY(0deg);
+}
+
+.item::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: #7a00b3;
+    transition: 0.25s;
+    transform: rotate(0.25deg);
+    backface-visibility: hidden;
+}
+
+.boxOpen:after, .boxMatch:after
+{
+    transform: rotateY(180deg);
+}
diff --git a/README.md b/README.md
@@ -286,6 +286,7 @@ This repository also provides one such platforms where contributers come over an
 | [QuickFingers](https://github.com/kunjgit/GameZone/tree/main/Games/QuickFingers)       | 
 | [Physics_Quizz](https://github.com/kunjgit/GameZone/tree/main/Games/Physics_Quizz)     |
 | [Tiny_Fishing](https://github.com/kunjgit/GameZone/tree/main/Games/Tiny_Fishing)       | 
+| [Hide and Seek](https://github.com/PilotAxis/GameZone/tree/main/Games/Hide%20and%20Seek)    |
 
 | [Hover_Board_Effect](https://github.com/kunjgit/GameZone/tree/main/Games/Hover_Board_Effect)    |
 
@@ -348,8 +349,12 @@ This repository also provides one such platforms where contributers come over an
 | [Intellect Quest](https://github.com/Will2Jacks/GameZoneForked/tree/Task/Games/Intellect_Quest) |
 | [Number_Guessing_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Number_Guessing_Game) |
 | [Modulo_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Modulo_Game) |
+
+| [Hide_and_Seek](https://github.com/PilotAxis/GameZone/tree/main/Games/Hide_And_Seek) |
+
 | [Drawing_App](https://github.com/kunjgit/GameZone/tree/main/Games/Drawing_app) |
 
+
 |[Town-Rise](https://github.com/kunjgit/GameZone/tree/main/Games/Town_Rise_Game)|
 
   </center>
@@ -807,8 +812,13 @@ This repository also provides one such platforms where contributers come over an
 |[Mole](https://github.com/taneeshaa15/GameZone/tree/main/Games/Mole)|
 | [Go-fish-master](https://github.com/kunjgit/GameZone/tree/main/Games/Go-fish-master) |
 |[Pottery-Game](https://github.com/kunjgit/GameZone/tree/main/Games/Pottery-Game)|
+
+|[Hide_and_Seek](https://github.com/PilotAxis/GameZone/tree/main/Games/Hide_And_Seek)|
+
+
  | [Ganesh QR Maker](https://github.com/kunjgit/GameZone/tree/main/Games/Ganesh_QR_Maker) |
 
+
  | [Ganesh_QR_Maker](https://github.com/kunjgit/GameZone/tree/main/Games/Ganesh_QR_Maker) |
 
 |[Wheel_of_Fortunes](https://github.com/Saipradyumnagoud/GameZone/tree/main/Games/Wheel_of_Fortunes)|

diff --git a/assets/images/Hide_and_Seek.png b/assets/images/Hide_and_Seek.png