diff --git a/.DS_Store b/.DS_Store index eee0eff..99020d8 100644 Binary files a/.DS_Store and b/.DS_Store differ diff --git a/Memory-Game/.DS_Store b/Memory-Game/.DS_Store new file mode 100644 index 0000000..144ab73 Binary files /dev/null and b/Memory-Game/.DS_Store differ diff --git a/Memory-Game/Images/fevicon.PNG b/Memory-Game/Images/fevicon.PNG new file mode 100644 index 0000000..cc2a49f Binary files /dev/null and b/Memory-Game/Images/fevicon.PNG differ diff --git a/Memory-Game/Images/snapshot1.PNG b/Memory-Game/Images/snapshot1.PNG new file mode 100644 index 0000000..ac87eb8 Binary files /dev/null and b/Memory-Game/Images/snapshot1.PNG differ diff --git a/Memory-Game/Images/snapshot2.PNG b/Memory-Game/Images/snapshot2.PNG new file mode 100644 index 0000000..16e29aa Binary files /dev/null and b/Memory-Game/Images/snapshot2.PNG differ diff --git a/Memory-Game/Images/snapshot3.PNG b/Memory-Game/Images/snapshot3.PNG new file mode 100644 index 0000000..1a9d712 Binary files /dev/null and b/Memory-Game/Images/snapshot3.PNG differ diff --git a/Memory-Game/Images/snapshot4.PNG b/Memory-Game/Images/snapshot4.PNG new file mode 100644 index 0000000..c39ed22 Binary files /dev/null and b/Memory-Game/Images/snapshot4.PNG differ diff --git a/Memory-Game/README.md b/Memory-Game/README.md new file mode 100644 index 0000000..1f58c12 --- /dev/null +++ b/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. +
+ + +snapshots +snapshots +snapshots +snapshots + +

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

Welcome !

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.

    • 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); + } + } +} \ No newline at end of file diff --git a/Memory-Game/gameStyle.css b/Memory-Game/gameStyle.css new file mode 100644 index 0000000..1ad3eef --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/Memory-Game/index.html b/Memory-Game/index.html new file mode 100644 index 0000000..0a04575 --- /dev/null +++ b/Memory-Game/index.html @@ -0,0 +1,29 @@ + + + + + + + Memory Matching Game + + + + + + +
    +
    +
    + +
    + +
    + + +
    + +
    +
    +
    + + \ No newline at end of file diff --git a/README.md b/README.md index b4b67ed..cbcac50 100644 --- a/README.md +++ b/README.md @@ -30,6 +30,7 @@ - Skycast (weather app) - Background Color Changer - BLog Website +- Memory Game

    🍰 Contribution Guidelines: