diff --git a/Images/GameSnapshot1.png b/Images/GameSnapshot1.png new file mode 100644 index 0000000..68eef48 Binary files /dev/null and b/Images/GameSnapshot1.png differ diff --git a/Images/GameSnapshot2.png b/Images/GameSnapshot2.png new file mode 100644 index 0000000..316542c Binary files /dev/null and b/Images/GameSnapshot2.png differ diff --git a/Images/GameSnapshot3.png b/Images/GameSnapshot3.png new file mode 100644 index 0000000..237aea7 Binary files /dev/null and b/Images/GameSnapshot3.png differ diff --git a/Images/GameSnapshot4.png b/Images/GameSnapshot4.png new file mode 100644 index 0000000..2b03790 Binary files /dev/null and b/Images/GameSnapshot4.png differ diff --git a/Images/fevicon.png b/Images/fevicon.png new file mode 100644 index 0000000..cc2a49f Binary files /dev/null and b/Images/fevicon.png differ diff --git a/README.md b/README.md new file mode 100644 index 0000000..4df84b1 --- /dev/null +++ b/README.md @@ -0,0 +1,16 @@ +# Project-MemoryCard + +## [Click here to Play the GAME!!](https://nmnkmr.github.io/Project-MemoryCard/) + +This project is made using HTML,CSS & JavaScript. + +It's a simple online memory matching game, which contains various levels. +
+Here are some snapshots from game. + +snapshots +snapshots +snapshots +snapshots + +

diff --git a/gamescript.js b/gamescript.js new file mode 100644 index 0000000..ac2c964 --- /dev/null +++ b/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(`

Match The Cards !

Instructions For Game -



  • Make pairs of similiar blocks by flipping them.
  • To flip a block you can click on it.
  • If two blocks you clicked are not similar, they will be flipped back.
  • Complete the game, comment your score and challenge your friends too.

    • Click one of the following mode to start the game.

    `); +} + +//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"); + for (var j = 1;j<=l;j++) { + $("table").append(`

    ${items[n-1]}

    `); + n++; + } + $("table").append(""); + } + + //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(`

    Congrats!

    You completed the ${mode} mode in ${moves} moves. It took you ${time}.

    Comment Your Score!
    Play Again ?

    `); + $("#ol").fadeIn(750); + }, 1500); + } + } +} diff --git a/gamestyle.css b/gamestyle.css new file mode 100644 index 0000000..b44a2f1 --- /dev/null +++ b/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; +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..4f5bb01 --- /dev/null +++ b/index.html @@ -0,0 +1,46 @@ + + + + + Memory Matching Game + + + + + + + + + + + + + + + + + + + + + + + + +
    +
    +
    +

    MEMORY MATCHING GAME

    +
    + +
    + + +
    + +
    +
    +
    + + +