Merge pull request #4315 from divyalaldinani/updating-ui-of-memory-game

Updating UI of memory game

Games/Memory_Game/index.html

@@ -24,10 +24,10 @@
         </div>
         <div class="instructions">
             <h1>INSTRUCTIONS</h1>
-            <p>1.Click on each block to turn it</p>
-             <p>2.Remember the position of each block image</p>
-             <p>3.click on another block and try to remember on which block have you seen the same image</p>
-             <p>4.Your Number of moves are counted</p></div>
+            <p><b>1.</b> Click on each block to turn it</p>
+             <p><b>2.</b> Remember the position of each block image</p>
+             <p><b>3.</b> Click on another block and try to remember on which block have you seen the same image</p>
+             <p><b>4.</b> Your Number of moves are counted</p></div>
         <div class="game-container"></div>
         <button id="stop" class="hide">Stop Game</button>
     </div>

Games/Memory_Game/script.js

@@ -124,8 +124,14 @@ const matrixGenerator = (cardValues, size = 4) => {
             winCount += 1;
             //check if winCount ==half of cardValues
             if (winCount == Math.floor(cardValues.length / 2)) {
-              result.innerHTML = `<h2>You Won</h2>
-            <h4>Moves: ${movesCount}</h4>`;
+              result.innerHTML = `<h2>You Won!!</h2>`;
+              result.style.fontFamily = 'Arial, sans-serif'; // Change the font family
+              result.style.fontSize = '24px'; // Change the font size
+              result.style.fontWeight = 'bold'; // Change the font weight
+              //result.style.fontStyle = 'italic'; // Change the font style
+              result.style.color = 'white'; // Change the text color
+
+              `<h4>Moves: ${movesCount}</h4>`;
               stopGame();
             }
           } else {

Games/Memory_Game/style.css

@@ -1,26 +1,29 @@
 :root {
-    /* --color-green--light: #00c46a; */
-    /* background-image: linear-gradient(135deg, #71FA32, #009DE0) ; */
-
+    --color-green--light: #00c46a;
+    background-color: linear-gradient(135deg, #71FA32, #009DE0);
 }
 
 * {
     padding: 0;
     margin: 0;
     box-sizing: border-box;
     font-family: "Poppins", sans-serif;
+    overflow: hidden;
 }
 
 body {
-    background-image: url("./mind1.jpg");
+    background-image:url(img1.jpg); /*changing bg image*/
+    background-size: cover;
 }
 
 .wrapper {
     box-sizing: content-box;
     width: 26.87em;
     padding: 2.5em 3em;
-
-    background-color: #0d614b;
+    /* margin: 0; */
+    height: 90vh;
+    background-color: transparent;
+    /* background- */
     position: absolute;
     transform: translate(-50%, -50%);
     left: 50%;
@@ -34,7 +37,7 @@ body {
     width: 100%;
     display: grid;
     gap: 0.6em;
-   
+
 }
 
 .stats-container {
@@ -56,7 +59,7 @@ body {
 .card-before,
 .card-after {
     position: absolute;
-    border-radius: 5px;
+    border-radius: 2px;
     width: 100%;
     height: 100%;
     display: flex;
@@ -68,8 +71,11 @@ body {
 }
 
 .card-before {
-    background-color: var(--color-green--light);
-
+    background: rgba(203, 250, 255, 0.24);
+    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+    backdrop-filter: blur(2px);
+    -webkit-backdrop-filter: blur(2px);
+    border: 1px solid rgba(203, 250, 255, 0.26);
     font-size: 2.8em;
     font-weight: 600;
 }
@@ -86,7 +92,7 @@ body {
 
 .card-container.flipped .card-after {
     transform: rotateY(0deg);
-}
+} 
 
 .controls-container {
     position: absolute;
@@ -96,7 +102,8 @@ body {
     flex-direction: column;
     width: 100%;
     height: 100%;
-    background-image: url("./mind.png");
+    background-image: url("./mind.jpeg");
+    background-size: cover;
     /* background-color: var(--color-green--light); */
 
     top: 0;
@@ -122,7 +129,7 @@ button {
     font-size: 1.3em;
     font-family: cursive;
     box-shadow: 0 0.6em 2em rgba(86, 66, 0, 0.2);
-    background-color: rgb(162, 162, 93);
+    background-color: transparent;
 
 }
 
@@ -143,18 +150,71 @@ button {
     font-size: 1.8em;
     margin: 0.6em 0 1em 0;
 }
-.menu{
+.menu {
     justify-content: center;
 }
 .instructions{
     font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
-    font-size: 10px;
-    background-color: aquamarine;
-    border-radius: 30px;
-    padding:45px;
+    font-size: 12px;
+    /* background-color: #ffffff; */
+    box-shadow: 0 0.9em 2.8em rgba(86, 66, 0, 0.2);
+    /* color:#1479EA; */
+    border: 1px solid white;
+    border-radius: 10px;
+    padding: 10px;
+    margin-bottom: 10px;
 
 }
 .instructions p{
-    padding:25 25 25 25;
+    /* padding: 10px; */
+    font-size: 12px;
     font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+}
+
+/*adding button animation to start game and stop game buttons*/
+button {
+    width: 10em;
+    position: relative;
+    height: 3.5em;
+    border: 4px ridge #ffffff;
+    outline: none;
+    background-color: transparent;
+    color: rgb(190, 238, 255);
+    transition: 1s;
+    border-radius: 0.3em;
+    font-size: 16px;
+    font-weight: bold;
+    cursor: pointer;
+}
+
+button::after {
+    content: "";
+    position: absolute;
+    top: -10px;
+    left: 3%;
+    width: 95%;
+    height: 40%;
+    /* background-color: #212121; */
+    transition: tranform ease-in .5s;
+    transform-origin: center;
+}
+
+button::before {
+    content: "";
+    transform-origin: center;
+    position: absolute;
+    top: 80%;
+    left: 3%;
+    width: 95%;
+    height: 40%;
+    /* background-color: #212121; */
+    transition: transform ease-in 0.5s;
+}
+
+button:hover::before, button:hover::after {
+    transform: scale(1.1);
+}
+
+button:hover {
+    box-shadow: inset 0px 0px 25px #ffffff;
 }