Memory game

Memory-Game/README.md

@@ -0,0 +1,14 @@
+# Memory matching game
+
+This project is made using HTML,CSS & JavaScript.
+
+It's a simple online memory matching game, which contains various levels.
+<br>
+
+
+<img src="Images/snapshot1.PNG" width=95% alt="snapshots">
+<img src="Images/snapshot2.PNG" width=95% alt="snapshots">
+<img src="Images/snapshot3.PNG" width=95% alt="snapshots">
+<img src="Images/snapshot4.PNG" width=95% alt="snapshots">
+
+<br><br>

Memory-Game/gameScript.js

@@ -0,0 +1,139 @@
+var em = ["💐","🌹","🌻","🏵️","🌺","🌴","🌈","🍓","🍒","🍎","🍉","🍊","🥭","🍍","🍋","🍏","🍐","🥝","🍇","🥥","🍅","🌶️","🍄","🧅","🥦","🥑","🍔","🍕","🧁","🎂","🍬","🍩","🍫","🎈"];
+//Shuffling above array
+var tmp, c, p = em.length;
+if(p) while(--p) {
+   c = Math.floor(Math.random() * (p + 1));
+   tmp = em[c];
+   em[c] = em[p];
+   em[p] = tmp;
+}
+
+//Variables
+var pre="", pID, ppID=0, turn=0, t="transform", flip="rotateY(180deg)", flipBack="rotateY(0deg)", time, mode;
+
+//Resizing Screen
+window.onresize = init;
+function init() {
+   W = innerWidth;
+   H = innerHeight;
+   $('body').height(H+"px");
+   $('#ol').height(H+"px");
+}
+
+//Showing instructions
+window.onload = function() {
+    $("#ol").html(`<center><div id="inst"><h3>Welcome !</h3>Instructions For Game<br/><br/><li>Make pairs of similiar blocks by flipping them.</li><li>To flip a block you can click on it.</li><li>If two blocks you clicked are not similar, they will be flipped back.</li><p style="font-size:18px;">Click one of the following mode to start the game.</p></div><button onclick="start(3, 4)">3 x 4</button> <button onclick="start(4, 4)" style="w">4 x 4</button><button onclick="start(4, 5)">4 x 5</button><button onclick="start(5, 6)">5 x 6</button><button onclick="start(6, 6)">6 x 6</button></center>`);
+}
+
+//Starting the game
+function start(r,l) {
+    //Timer and moves
+    min=0, sec=0, moves=0;
+    $("#time").html("Time: 00:00");
+    $("#moves").html("Moves: 0");
+    time = setInterval(function() {
+      sec++;
+      if(sec==60) {
+          min++; sec=0;
+      }
+      if(sec<10) 
+          $("#time").html("Time: 0"+min+":0"+sec);
+      else 
+        $("#time").html("Time: 0"+min+":"+sec);
+    }, 1000);
+    rem=r*l/2, noItems=rem;
+    mode = r+"x"+l;
+    //Generating item array and shuffling it
+    var items = [];
+    for (var i=0;i<noItems;i++)
+        items.push(em[i]);
+    for (var i=0;i<noItems;i++)
+        items.push(em[i]);
+    var tmp, c, p = items.length;
+    if(p) while(--p) {
+        c = Math.floor(Math.random() * (p + 1));
+        tmp = items[c];
+        items[c] = items[p];
+        items[p] = tmp;
+    }
+
+    //Creating table
+    $("table").html("");
+    var n=1;
+    for (var i = 1;i<=r;i++) {
+        $("table").append("<tr>");
+        for (var j = 1;j<=l;j++) {
+           $("table").append(`<td id='${n}' onclick="change(${n})"><div class='inner'><div class='front'></div><div class='back'><p>${items[n-1]}</p></div></div></td>`);
+           n++;
+         }
+         $("table").append("</tr>");
+    }
+
+    //Hiding instructions screen
+    $("#ol").fadeOut(500);
+}
+
+//Function for flipping blocks
+function change(x) {
+  //Variables
+  let i = "#"+x+" .inner";
+  let f = "#"+x+" .inner .front";
+  let b = "#"+x+" .inner .back";
+
+  //Dont flip for these conditions
+  if (turn==2 || $(i).attr("flip")=="block" || ppID==x) {}
+
+  //Flip
+  else {
+    $(i).css(t, flip);
+    if (turn==1) {
+      //This value will prevent spam clicking
+      turn=2;
+
+      //If both flipped blocks are not same
+      if (pre!=$(b).text()) {
+         setTimeout(function() {
+            $(pID).css(t, flipBack);
+            $(i).css(t, flipBack);
+            ppID=0;
+         },1000);
+      }
+
+      //If blocks flipped are same
+      else {
+          rem--;
+          $(i).attr("flip", "block");
+          $(pID).attr("flip", "block");
+      }
+
+      setTimeout(function() {
+         turn=0;
+         //Increase moves
+         moves++;
+         $("#moves").html("Moves: "+moves);
+      },1150);
+
+    }
+    else {
+      pre = $(b).text();
+      ppID = x;
+      pID = "#"+x+" .inner";
+      turn=1;
+    }
+
+    //If all pairs are matched
+    if (rem==0) {
+          clearInterval(time);
+          if (min==0) {
+              time = `${sec} seconds`;
+          }
+          else {
+              time = `${min} minute(s) and ${sec} second(s)`;
+          }
+          setTimeout(function() {
+              $("#ol").html(`<center><div id="iol"><h2>Congrats!</h2><p style="font-size:23px;padding:10px;">You completed the ${mode} mode in ${moves} moves. It took you ${time}.</p><p style="font-size:18px">Comment Your Score!<br/>Play Again ?</p><button onclick="start(3, 4)">3 x 4</button> <button onclick="start(4, 4)" style="w">4 x 4</button><button onclick="start(4, 5)">4 x 5</button><button onclick="start(5, 6)">5 x 6</button><button onclick="start(6, 6)">6 x 6</button></div></center>`);
+              $("#ol").fadeIn(750);
+          }, 1500);
+    }
+  }
+}

Memory-Game/gameStyle.css

@@ -0,0 +1,147 @@
+@import url('https://fonts.googleapis.com/css2?family=Biryani:wght@800&display=swap');
+* {
+    font-family: 'Biryani', sans-serif;
+}
+html {
+    width:100vw;
+    height:100%;
+}
+body {
+    margin:0px;
+    background-image: -webkit-gradient(linear, left top, left bottom, from(#4481eb), to(#04bedd));
+    background-image: -o-linear-gradient(top, #4481eb 0%, #04bedd 100%);
+    background-image: linear-gradient(to bottom, #4481eb 0%, #04bedd 100%);
+}
+
+p {
+    font-size: 40px;
+    margin-top:5px;
+}
+td {
+    background-color: transparent;
+    height:70px;
+    width:70px;
+}
+td, .inner, .front, .back {
+    border-radius: 4px;
+}
+table {
+    margin-top: 80px;
+}
+
+#inst {
+    width: 85vw;
+    background-color: rgba(255,255,255,0.1);
+    text-align: center;
+    margin-top:16vh;
+    -webkit-backdrop-filter: blur(10px);
+            backdrop-filter: blur(10px);
+    border: 0.2px solid #ffff;
+    border-radius: 10px;
+    padding: 5px;
+}
+#inst li {
+    text-align: left;
+    padding: 5px;
+}
+
+button {
+    background-color: rgba(255,255,255,0.2);
+    -webkit-backdrop-filter: (20px);
+    backdrop-filter: (20px);
+    color: white;
+    margin: 5px;
+    border: 0.1px solid #ffff;
+    border-radius: 10px;
+    font-weight: smaller;
+    width:100px;
+    font-size:18px;
+    padding:5px;
+}
+
+#ol {
+    position: absolute;
+    height:100vh;
+    width:100vw;
+    background-color: rgba(0,0,200,0.1);
+    color: white;
+    -webkit-backdrop-filter: blur(8px);
+            backdrop-filter: blur(8px);
+    z-index:2;
+
+}
+#iol {
+    text-align: center;
+    position: absolute;
+    width: 100vw;
+    top: 35vw;
+}
+
+#title {
+    background-color: rgba(255,255,255,0.25);
+    -webkit-backdrop-filter: blur(15px);
+            backdrop-filter: blur(15px);
+    border-radius:10px;
+    margin: 8px;
+    margin-top:0px;
+    color: white;
+    height:56px;
+    text-align: center;
+}
+
+#time {
+    position: absolute;
+    right: 20px;
+    font-size: 16px;
+    top: 8.5px;
+}
+
+#moves {
+    position: absolute;
+    left: 20px;
+    font-size: 16px;
+    top:8.5px;
+}
+
+#logo {
+    font-size: 22px;
+    padding-top: 10px;
+    display: block;
+}
+
+.inner {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    -webkit-transition: -webkit-transform 0.8s;
+            transition: -webkit-transform 0.8s;
+         -o-transition: transform 0.8s;
+            transition: transform 0.8s;
+            transition: transform 0.8s, -webkit-transform 0.8s;
+    -webkit-transform-style: preserve-3d;
+            transform-style: preserve-3d;
+    -webkit-transform: rotateY(0deg);
+            transform: rotateY(0deg);
+}
+
+.front {
+    background-color: rgba(255,255,255,0.3);
+}
+
+.back {
+    background-color: rgba(255,255,255,0.5);
+    -webkit-transform: rotateY(180deg);
+            transform: rotateY(180deg);
+}
+
+.front, .back {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    -webkit-backface-visibility: hidden;
+            backface-visibility: hidden;
+}
+button:hover, button:active {
+    outline:0;
+}

Memory-Game/index.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Memory Matching Game</title>
+    <link rel="shortcut icon" type="image/jpg" href="Images/fevicon.PNG"/>
+    <link rel="stylesheet" href="gameStyle.css">
+    <script src="https://code.jquery.com/jquery-3.2.1.min.js"> </script>
+    <script src="gameScript.js"> </script>
+</head>
+<body>
+    <div id="ol"> </div>
+    <div style="height: 8px;"></div>
+    <div id="title">
+    <span id="logo">MEMORY MATCHING GAME</span>
+    </div>
+
+    <div id="title" style="height: 40px;">
+        <span id="moves"></span>
+        <span id="time"></span>
+    </div>
+
+    <center>
+        <table cellspacing="0"></table>
+    </center>
+</body>
+</html>

README.md

@@ -30,6 +30,7 @@
 - Skycast (weather app)
 - Background Color Changer
 - BLog Website
+- Memory Game
 
 
 <h2>🍰 Contribution Guidelines:</h2>