Add files via upload

README.md

@@ -0,0 +1,16 @@
+# Project-MemoryCard
+
+## <b> [Click here to Play the GAME!!](https://nmnkmr.github.io/Project-MemoryCard/)
+
+This project is made using HTML,CSS &amp; JavaScript.
+
+It's a simple online memory matching game, which contains various levels.
+<br>
+Here are some snapshots from game.
+
+<img src="Images/GameSnapshot1.png" width=95% alt="snapshots">
+<img src="Images/GameSnapshot2.png" width=95% alt="snapshots">
+<img src="Images/GameSnapshot3.png" width=95% alt="snapshots">
+<img src="Images/GameSnapshot4.png" width=95% alt="snapshots">
+
+<br><br>

gamescript.js

@@ -0,0 +1,132 @@
+
+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;
+
+//Showing instructions
+window.onload = function() {
+    $("#ol").html(`<center><div id="inst"><h3 class = "game-title">Match The Cards !</h3><h4>Instructions For Game - </h4><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><li>Complete the game, comment your score and challenge your friends too.</li><p style = "font-size: 25px; font-weight: 400; margin-top: 90px;">Click one of the following mode to start the game.</p><button class = "btn btn-outline-light btn-lg modes" onclick="start(3, 4)">3 x 4</button> <button class = "btn btn-outline-light btn-lg modes" onclick="start(4, 4)" style="w">4 x 4</button><button class = "btn btn-outline-light btn-lg modes" onclick="start(4, 5)">4 x 5</button><button class = "btn btn-outline-light btn-lg modes" onclick="start(5, 6)">5 x 6</button><button class = "btn btn-outline-light btn-lg modes" onclick="start(6, 6)">6 x 6</button></div></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;">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 class = "btn btn-outline-light btn-lg modes2" onclick="start(3, 4)">3 x 4</button> <button class = "btn btn-outline-light btn-lg modes2" onclick="start(4, 4)" style="w">4 x 4</button><button class = "btn btn-outline-light btn-lg modes2"
+              onclick="start(4, 5)">4 x 5</button><button class = "btn btn-outline-light btn-lg modes2" onclick="start(5, 6)">5 x 6</button><button class = "btn btn-outline-light btn-lg modes2" onclick="start(6, 6)">6 x 6</button></div></center>`);
+              $("#ol").fadeIn(750);
+          }, 1500);
+    }
+  }
+}

gamestyle.css

@@ -0,0 +1,138 @@
+
+body {
+    font-family: 'Montserrat', sans-serif;
+    margin:0;
+    background-color: #1687A7;
+}
+
+p {
+    font-size: 40px;
+    margin-top:10px;
+}
+td {
+    background-color: transparent;
+    height:85px;
+    width:85px;
+}
+td, .inner, .front, .back {
+    border-radius: 4px;
+}
+table {
+    margin-top: 80px;
+}
+
+#inst {
+    width: 85%;
+    height: 75%;
+    background-color: #F9F9F9;
+    text-align: center;
+    margin-top:10vh;
+    backdrop-filter: blur(10px);
+    border: 0.2px solid;
+    border-radius: 10px;
+    padding: 5px;
+    line-height: 2;
+}
+li {
+    color: #787A91;
+    text-align: left;
+    padding: 5px;
+}
+
+#ol {
+    position: absolute;
+    height:100%;
+    width:100%;
+    background-color: rgba(0,0,0,0.8);
+    color: #8f8f8f;
+    backdrop-filter: blur(8px);
+    z-index:2;
+
+}
+#iol {
+    text-align: center;
+    position: absolute;
+    top: 25%;
+    left: 22%;
+    border: 5px dotted;
+    border-radius: 10px;
+    padding: 15px;
+    line-height: 2;
+}
+
+#title {
+    background-color: rgba(255,255,255,0.3);
+    backdrop-filter: blur(15px);
+    border-radius:10px;
+    margin: 8px;
+    margin-top: 0;
+    color: white;
+    font-size: 25px;
+    padding-top: 10px;
+    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;
+}
+
+.game-title {
+  font-family: 'Patrick Hand', cursive;
+  color: #968C83;
+  font-size: 3.5rem;
+  font-weight: bold;
+  margin-bottom: 60px;
+}
+
+.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.5);
+}
+
+.back {
+    background-color: rgba(255,255,255,0.8);
+    -webkit-transform: rotateY(180deg);
+            transform: rotateY(180deg);
+}
+
+.front, .back {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    -webkit-backface-visibility: hidden;
+            backface-visibility: hidden;
+}
+
+.modes {
+  background-color: #8f8f8f;
+}
+
+.modes, .modes2 {
+  margin: auto 5px auto 5px;
+}

index.html

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Memory Matching Game</title>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <!--CSS Stylesheet-->
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
+    <link rel="stylesheet" href="gamestyle.css">
+
+    <!--Favicon-->
+    <link rel="shortcut icon" href="Images/fevicon.png"/>
+
+    <!--Bootstrap script-->
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
+
+    <!--Google Fonts-->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,400;0,700;0,900;1,100;1,400;1,700;1,900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">
+
+    <!-- Javascript -->
+    <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">
+      <h3>MEMORY MATCHING GAME</h3>
+      </div>
+
+      <div id="title" style="height: 40px;">
+          <span id="moves"></span>
+          <span id="time"></span>
+      </div>
+
+      <center>
+          <table cellspacing="0"></table>
+      </center>
+
+</body>
+</html>