diff --git a/emojiGame/.DS_Store b/emojiGame/.DS_Store new file mode 100644 index 0000000..e362646 Binary files /dev/null and b/emojiGame/.DS_Store differ diff --git a/emojiGame/angryface.png b/emojiGame/angryface.png new file mode 100644 index 0000000..3c9356a Binary files /dev/null and b/emojiGame/angryface.png differ diff --git a/emojiGame/coke.png b/emojiGame/coke.png new file mode 100644 index 0000000..e9c38cc Binary files /dev/null and b/emojiGame/coke.png differ diff --git a/emojiGame/coolface.png b/emojiGame/coolface.png new file mode 100644 index 0000000..628f4a1 Binary files /dev/null and b/emojiGame/coolface.png differ diff --git a/emojiGame/evilface.png b/emojiGame/evilface.png new file mode 100644 index 0000000..6abff07 Binary files /dev/null and b/emojiGame/evilface.png differ diff --git a/emojiGame/feverface.png b/emojiGame/feverface.png new file mode 100644 index 0000000..dc569b9 Binary files /dev/null and b/emojiGame/feverface.png differ diff --git a/emojiGame/freezeface.png b/emojiGame/freezeface.png new file mode 100644 index 0000000..238e990 Binary files /dev/null and b/emojiGame/freezeface.png differ diff --git a/emojiGame/index.html b/emojiGame/index.html new file mode 100644 index 0000000..54828f4 --- /dev/null +++ b/emojiGame/index.html @@ -0,0 +1,112 @@ + + + + + Mind Game + + + + + +
+
+

CHECK YOUR MEMORIZING POWER

+
+
+

Get Your Remark!!

+
+
+
+
+ +
+
+
+
+
+ evilface + lco +
+
+ evilface + lco +
+
+ angryface + lco +
+
+ angryface + lco +
+
+ coolface + lco +
+
+ coolface + lco +
+
+ feverface + feverface +
+
+ feverface + feverface +
+
+ vomitface + vomitface +
+
+ vomitface + lco +
+
+ sneezeface + lco +
+
+ sneezeface + lco +
+
+ mindblownface + lco +
+
+ mindblownface + lco +
+
+ thinkingface + lco +
+
+ thinkingface + lco +
+ + + +
+ + + + + + diff --git a/emojiGame/index.js b/emojiGame/index.js new file mode 100644 index 0000000..f146723 --- /dev/null +++ b/emojiGame/index.js @@ -0,0 +1,93 @@ +const cards = document.querySelectorAll(".card"); +// console.log(cards); +const score=document.querySelector(".points") +const message=document.querySelector(".msg") +const again=document.querySelector(".again") + + +var points= 0; +var msg; +var final=0; +//variables +var isFlipped = false; +var firstCard; +var secondCard; + +cards.forEach((card) => card.addEventListener("click", flip)); + +function flip() { + // console.log("Card flipped"); + // console.log(this); + this.classList.add("flip"); + if (!isFlipped) { + isFlipped = true; + firstCard = this; + } else { + secondCard = this; + // console.log(firstCard); + // console.log(secondCard); + + checkIt(); + } +} + +function checkIt() { + // console.log("Checking..."); + if (firstCard.dataset.image === secondCard.dataset.image) { + success(); + } else { + fail(); + } +} + +function success() { + // console.log("Success"); + firstCard.removeEventListener("click", flip); + secondCard.removeEventListener("click", flip); + reset(); + points+=15; + score.innerText=points+"Points"; + msg="Good Going!! "; + + final+=1; + if(final==8){ + msg="You Won!!" + } + message.innerText=msg; +} + + +function fail() { + // console.log("Failed"); + setTimeout(() => { + firstCard.classList.remove("flip"); + secondCard.classList.remove("flip"); + reset(); + points-=5; + msg= "better luck next time !!" + score.innerText=points+" Points"; + message.innerText=msg; + + + + }, 700); +} + +function reset() { + isFlipped = false; + firstCard = null; + secondCard = null; +} + +//TODO: shuffle + +(function shuffle() { + cards.forEach((card) => { + var index = Math.floor(Math.random() * 16); + card.style.order = index; + }); +})(); + +again.addEventListener("click",()=>{ + location.reload(); +}) \ No newline at end of file diff --git a/emojiGame/lco.png b/emojiGame/lco.png new file mode 100644 index 0000000..88ccf0a Binary files /dev/null and b/emojiGame/lco.png differ diff --git a/emojiGame/mark.png b/emojiGame/mark.png new file mode 100644 index 0000000..7df7e9d Binary files /dev/null and b/emojiGame/mark.png differ diff --git a/emojiGame/mindblownface.png b/emojiGame/mindblownface.png new file mode 100644 index 0000000..2757c45 Binary files /dev/null and b/emojiGame/mindblownface.png differ diff --git a/emojiGame/readme.md b/emojiGame/readme.md new file mode 100644 index 0000000..75939b8 --- /dev/null +++ b/emojiGame/readme.md @@ -0,0 +1,11 @@ + +# Project Title + +This is simple project built using html css js . +Its basically a memory based game of flipping the card and remember the images + + +## 🔗 Links +https://mayank8085.github.io/minijavascriptworld/emojiGame/index.html + +image diff --git a/emojiGame/sneezeface.png b/emojiGame/sneezeface.png new file mode 100644 index 0000000..e27f375 Binary files /dev/null and b/emojiGame/sneezeface.png differ diff --git a/emojiGame/styles.css b/emojiGame/styles.css new file mode 100644 index 0000000..8e7b769 --- /dev/null +++ b/emojiGame/styles.css @@ -0,0 +1,57 @@ +* { + margin: 0 auto; + padding: 0; + box-sizing: border-box; +} + +body { + height: 100vh; + background-color: #6718a8; + color: whitesmoke; + display: flex; +} + +.gameContainer { + width: 600px; + height: 600px; + margin: auto; + display: flex; + flex-wrap: wrap; + perspective: 1000px; +} + +.card { + width: 23%; + height: 23%; + margin: 5px; + position: relative; + transform-style: preserve-3d; + transition: transform 0.3s; + cursor: pointer; + background-color: transparent; +} + +.card:active { + transform: scale(0.95); + transition: transform 0.2s ease-in-out; +} + +.card.flip { + transform: rotateY(180deg); + cursor: pointer; +} + +.back, +.front { + background-color: #807f7f; + width: 100%; + height: 100%; + padding: 10px; + border-radius: 4px; + position: absolute; + backface-visibility: hidden; +} + +.front { + transform: rotateY(180deg); +} diff --git a/emojiGame/thinkingface.png b/emojiGame/thinkingface.png new file mode 100644 index 0000000..e5cfb44 Binary files /dev/null and b/emojiGame/thinkingface.png differ diff --git a/emojiGame/vomitface.png b/emojiGame/vomitface.png new file mode 100644 index 0000000..724274a Binary files /dev/null and b/emojiGame/vomitface.png differ