MARIO MATCHING GAME JAVASCRIPT

Friday, 25 March 2022

MARIO MATCHING GAME JAVASCRIPT

---------------------------------------------------------------------------------------------------------------------

MARIO MATCHING GAME JAVASCRIPT

https://taniarascia.github.io/memory/?ref=morioh.com&utm_source=morioh.com

https://www.youtube.com/watch?v=B6aJpbX_IZU

https://codepen.io/codegrind6/pen/WNXXRKg

https://github.com/topics/pairs-game

https://nimbusapp.github.io/SimpsonsMemory

---------------------------------------------------------------------------------------------------------------------

<html>  <head> <title>Memory Game</title> <style> *, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box; } body { margin: 20px 0; background: #6589F9; } .grid { max-width: 960px; margin: 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: space-evenly; -ms-flex-pack: space-evenly; justify-content: space-evenly; } .card { position: relative; -webkit-transition: all .4s linear; -o-transition: all .4s linear; transition: all .4s linear; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 5px; } .card, .back, .front { height: 381px; width: 400px; } .back, .front { position: absolute; -webkit-backface-visibility: hidden; } .front { } .back { } .selected { } .match .front { background: #6589F9 !important; } .matched { background:Green; } </style> <link rel="icon" type="image/png" href="https://taniarascia.github.io/memory/img/mushroom.png"> </head> <body> <div id="game"></div> <script type='text/javascript'> 'use strict'; var cardsArray = [ { 'name': 'shell', 'img': 'https://www.pngmart.com/files/5/Balcony-PNG-File.png' }, { 'name': 'star', 'img': 'https://taniarascia.github.io/memory/img/star.png' }, ]; var gameGrid = cardsArray.concat(cardsArray).sort(function () { return 0.5 - Math.random(); }); var firstGuess = ''; var secondGuess = ''; var count = 0; var previousTarget = null; var delay = 0; var game = document.getElementById('game'); var grid = document.createElement('section'); grid.setAttribute('class', 'grid'); game.appendChild(grid); gameGrid.forEach(function (item) { var name = item.name, img = item.img; var card = document.createElement('div'); card.classList.add('card'); card.dataset.name = name; var front = document.createElement('div'); front.classList.add('front'); var back = document.createElement('div'); back.classList.add('back'); back.style.backgroundImage = 'url(' + img + ')'; grid.appendChild(card); card.appendChild(front); card.appendChild(back); }); var match = function match() { var selected = document.querySelectorAll('.selected'); selected.forEach(function (card) { card.classList.add('matched'); }); }; var resetGuesses = function resetGuesses() { firstGuess = ''; secondGuess = ''; count = 0; previousTarget = null; var selected = document.querySelectorAll('.selected'); selected.forEach(function (card) { card.classList.remove('selected'); }); }; grid.addEventListener('click', function (event) { var clicked = event.target; if (clicked.nodeName === 'SECTION' || clicked === previousTarget || clicked.parentNode.classList.contains('selected') || clicked.parentNode.classList.contains('match')) { return; } if (count < 2) { count++; if (count === 1) { firstGuess = clicked.parentNode.dataset.name; console.log(firstGuess); clicked.parentNode.classList.add('selected'); } else { secondGuess = clicked.parentNode.dataset.name; console.log(secondGuess); clicked.parentNode.classList.add('selected'); } if (firstGuess && secondGuess) { if (firstGuess === secondGuess) { setTimeout(match, delay); } setTimeout(resetGuesses, delay); } previousTarget = clicked; } }); </script> </body> </html>

---------------------------------------------------------------------------------------------------------------------

https://github.com/NoraX1/Responsive-Memmory-Game

---------------------------------------------------------------------------------------------------------------------

<html>

<head>

<title>Memmory Game</title>

<style>

* {

padding: 0;

margin: 0;

box-sizing: border-box;

}

body {

background-color: #f2f2f2;

}

.head {

max-width: 480px;

border: 2px solid #a6a6a6;

margin: auto;

height: 150px;

display: flex;

justify-content: center;

align-items: center;

flex-direction: column;

margin-top: 20px;

font-family: "Orbitron", sans-serif;

color: #333;

}

.score {

margin-top: 10px;

}

.container {

max-width: 960px;

display: grid;

grid-template-columns: repeat(3, auto);

gap: 1rem;

margin: auto;

padding: 20px;

}

.cell div {

height: 130px;

border-radius: 4px;

}

.cell {

position: relative;

cursor: pointer;

}

.front {

position: absolute;

height: 100%;

width: 100%;

display: flex;

justify-content: center;

align-items: center;

border: 2px solid #a6a6a6;

background-color: #f2f2f2;

transform: rotateY(90deg);

}

.back {

background-color: #333;

}

img {

height: 100px;

width: 100px;

}

.flip {

transform: rotateY(0deg);

}

.match {

transform: rotateY(0deg);

}

.show {

transform: rotateY(0deg);

}

@media screen and (min-width: 770px) {

.head {

max-width: 760px;

}

.container {

grid-template-columns: repeat(4, auto);

}

.cell div {

height: 170px;

}

</style>

</head>

<body>

<h2>Memmory Game</h2>

<div class="score">Score: <span>0</span></div>

</div>

</div>

</div>

</div>

</div>

const card = document.querySelectorAll('.cell')

const front = document.querySelectorAll('.front')

const container = document.querySelector('.container')

const score = document.querySelector('.score span')

suffleImage()

clicking()

function suffleImage(){

card.forEach(c=>{

const num = [...Array(card.length).keys()]

const random = Math.floor(Math.random()*card.length)

c.style.order = num[random]

})

}

function clicking(){

for(let i =0; i<card.length; i++){

front[i].classList.add('show')

setInterval(() => {

front[i].classList.remove('show')

}, 2000);

card[i].addEventListener('click' ,()=>{

front[i].classList.add('flip')

const filppedCard = document.querySelectorAll('.flip')

if(filppedCard.length == 2){

container.style.pointerEvents ='none'

setInterval(() => {

container.style.pointerEvents ='all'

}, 1000);

match(filppedCard[0] , filppedCard[1])

}

})

}

function match(cardOne , cardTwo){

if(cardOne.id == cardTwo.id){

score.innerHTML = parseInt(score.innerHTML) + 1

cardOne.classList.remove('flip')

cardTwo.classList.remove('flip')

cardOne.classList.add('match')

cardTwo.classList.add('match')

}else{

setTimeout(() => {

cardOne.classList.remove('flip')

cardTwo.classList.remove('flip')

}, 1000);

}

</script>

</body>

</html>

---------------------------------------------------------------------------------------------------------------------

https://marina-ferreira.github.io/memory-game

https://clockworkchilli.com/tutorials/javascript_memory_game.html

---------------------------------------------------------------------------------------------------------------------

<html>

<head>

<title>Memory Game</title>

<style>

* {

padding: 0;

margin: 0;

box-sizing: border-box;

}

body {

height: 100vh;

display: flex;

background: #060AB2;

}

.memory-game {

width: 640px;

height: 640px;

margin: auto;

display: flex;

justify-content: center;

align-items: center;

flex-wrap: wrap;

perspective: 1000px;

}

.memory-card {

width: calc(25% - 10px);

height: calc(33.333% - 10px);

margin: 5px;

position: relative;

box-shadow: 1px 1px 1px rgba(0,0,0,.3);

transition: all .5s;

transform-style: preserve-3d;

transform: scale(1);

}

.memory-card.flip {

transform: rotateY(180deg);

}

.memory-card:active {

transform: scale(0.97);

transition: transform .2s;

}

.front-face,

.back-face {

width: 100%;

height: 100%;

padding: 20px;

position: absolute;

backface-visibility: hidden;

border-radius: 5px;

background: #1C7CCC;

}

.front-face {

transform: rotateY(180deg);

}

@media screen and (max-width: 750px) and (max-height: 500px) {

.memory-game {

width: 50%;

height: 90%;

}

.memory-card {

width: calc(25% - 8px);

height: calc(33.333% - 8px);

margin: 4px;

}

.front-face,

.back-face {

padding: 10px;

}

</style>

</head>

<body>

</div>

</div>

</div>

</div>

</section>

const cards = document.querySelectorAll('.memory-card');

let hasFlippedCard = false;

let lockBoard = false;

let firstCard, secondCard;

function flipCard() {

if (lockBoard) return;

if (this === firstCard) return;

this.classList.add('flip');

if (!hasFlippedCard) {

hasFlippedCard = true;

firstCard = this;

return;

}

secondCard = this;

lockBoard = true;

checkForMatch();

}

function checkForMatch() {

let isMatch = firstCard.dataset.name === secondCard.dataset.name;

isMatch ? disableCards() : unflipCards();

}

function disableCards() {

firstCard.removeEventListener('click', flipCard);

secondCard.removeEventListener('click', flipCard);

resetBoard();

}

function unflipCards() {

setTimeout(() => {

firstCard.classList.remove('flip');

secondCard.classList.remove('flip');

resetBoard();

}, 1500);

}

function resetBoard() {

hasFlippedCard = false;

lockBoard = false;

firstCard = null;

secondCard = null;

}

(function shuffle() {

cards.forEach(card => {

let ramdomPos = Math.ceil(Math.random() * 4);

card.style.order = ramdomPos;

});

})();

cards.forEach(card => card.addEventListener('click', flipCard));

</script>

</body>

</html>

---------------------------------------------------------------------------------------------------------------------

https://nimbusapp.github.io/SimpsonsMemory/

https://github.com/topics/pairs-game

---------------------------------------------------------------------------------------------------------------------

<html>
<head>
<title>SIMPSONS MEMORY GAME</title>
<link rel="shortcut icon" href="https://nimbusapp.github.io/SimpsonsMemory/images/simpsons.ico" type="image/x-icon">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<style>
body {
background: rgb(172,175,38);
background: linear-gradient(90deg, rgba(172,175,38,1) 0%, rgba(154,244,135,1) 49%, rgba(231,245,179,1) 100%);
}
.grid {
margin: auto;
display: flex;
flex-wrap: wrap;
height: 300px;
width: 400px;
cursor: pointer;
}
footer {
position: fixed;
padding: 10px;
left: 0;
bottom: 0;
width: 100%;
color: blue;
text-align: center;
font-size: 15px;
font-family: 'Noto Sans JP', sans-serif;
}
footer a {
text-decoration: none;
color: inherit;
font-family: inherit;
}
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">
</head>
<body>
<div class="content mt-3">
<h2 class="text-info text-center mb-3">SIMPSONS MEMORY GAME</h2>
<h4 class="text-center text-primary">Score: <span id="result">0</span></h4>
<div class="grid"></div>
</div>
<footer>  Copyright &copy; <label id="year"></label> | Designed by <a href="https://github.com/FabianCristancho">Fabian Cristancho</a></footer>
<script >
document.addEventListener('DOMContentLoaded', () => {});
const cardArray = [
{
name: 'homer',
img: 'https://nimbusapp.github.io/SimpsonsMemory/images/homer.png'
},
{
name: 'homer',
img: 'https://nimbusapp.github.io/SimpsonsMemory/images/homer.png'
},
{
name: 'marge',
img: 'https://nimbusapp.github.io/SimpsonsMemory/images/marge.png'
},
{
name: 'marge',
img: 'https://nimbusapp.github.io/SimpsonsMemory/images/marge.png'
},
{
name: 'maggie',
img: 'https://nimbusapp.github.io/SimpsonsMemory/images/maggie.png'
},
{
name: 'maggie',
img: 'https://nimbusapp.github.io/SimpsonsMemory/images/maggie.png'
},
{
name: 'lisa',
img: 'https://nimbusapp.github.io/SimpsonsMemory/images/lisa.png'
},
{
name: 'lisa',
img: 'https://nimbusapp.github.io/SimpsonsMemory/images/lisa.png'
},
{
name: 'bart',
img: 'https://nimbusapp.github.io/SimpsonsMemory/images/bart.png'
},
{
name: 'bart',
img: 'https://nimbusapp.github.io/SimpsonsMemory/images/bart.png'
},
{
name: 'pets',
img: 'https://nimbusapp.github.io/SimpsonsMemory/images/pets.png'
},
{
name: 'pets',
img: 'https://nimbusapp.github.io/SimpsonsMemory/images/pets.png'
}
];
cardArray.sort(() => 0.5 - Math.random());
const grid = document.querySelector('.grid');
const resultDisplay = document.querySelector('#result');
var cardsChosen = [];
var cardsChosenId = [];
var cardsWon = [];
function createBoard(){
for (let i = 0; i < cardArray.length; i++) {
let card = document.createElement('img');
card.setAttribute('src', 'https://nimbusapp.github.io/SimpsonsMemory/images/happy.png');
card.setAttribute('data-id', i);
card.addEventListener('click', flipCard);
grid.appendChild(card);          
}
}
function checkForMatch(){
var cards = document.querySelectorAll('img');
const optionOneId = cardsChosenId[0];
const optionTwoId = cardsChosenId[1];
if(cardsChosen[0] === cardsChosen[1]){
alert('You found a match');
cards[optionOneId].setAttribute('src', 'https://nimbusapp.github.io/SimpsonsMemory/images/white.png');
cards[optionTwoId].setAttribute('src', 'https://nimbusapp.github.io/SimpsonsMemory/images/white.png');
cardsWon.push(cardsChosen);
}else{
cards[optionOneId].setAttribute('src', 'https://nimbusapp.github.io/SimpsonsMemory/images/happy.png');
cards[optionTwoId].setAttribute('src', 'https://nimbusapp.github.io/SimpsonsMemory/images/happy.png');
alert('Sorry, try again');
}
cardsChosen = [];
cardsChosenId = [];
resultDisplay.textContent = cardsWon.length;
if(cardsWon.length === cardArray.length/2){
resultDisplay.textContent = 'CONGRATULATIONS!!! SIMPSON ARE FOUND';
setTimeout(()=>location.reload(), 2000);
}
}
function flipCard(){
let cardId = this.getAttribute('data-id');
cardsChosen.push(cardArray[cardId].name);
cardsChosenId.push(cardId);
this.setAttribute('src', cardArray[cardId].img)
if(cardsChosen.length === 2){
setTimeout(checkForMatch, 500)
}
}
createBoard();
document.getElementById('year').innerHTML = new Date().getFullYear();
</script>
</body>
</html>

---------------------------------------------------------------------------------------------------------------------
READ MORE:
https://codepen.io/codegrind6/pen/WNXXRKg
---------------------------------------------------------------------------------------------------------------------

<!-- Download all Images- https://bit.ly/memory-game-images -->
<h2 class="heading">Memory Game using JavaScript</h2>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: grid;
place-items: center;
min-height: 100vh;
}
.heading {
text-align: center;
font-family: "Poppins", sans-serif;
font-size: 2rem;
font-weight: 500;
}
.cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 2em;
position: relative;
float: left;
padding: 15px;
}
.card {
height: 110px;
width: 90px;
background-color: #ffff00;
border-radius: 10px;
display: grid;
place-items: center;
cursor: pointer;
transition: 0.3s all ease;
}
.card:hover {
transform: scale(1.03);
}
.card img {
height: 110px;
width: 90px;
opacity: 100; FOR SHOW IMAGE OPACITY 100 OPACITY ZERO FOR HIDE IMAGE}
.card.clicked {
background-color: orange;
}
.card.checked {
background-color: lightgreen;
}
.card.clicked img,
.card.checked img {
opacity: 1;
}
.card.shake {
background-color: #f15f5f;
animation: shake 0.5s;
}
</style>
</head>
<body>
<div class="cards">
<div class="card" animal="duck">
<img src="https://imgkub.com/images/2022/02/16/duck.png" alt="" />
</div>
<div class="card" animal="lion">
<img src="https://imgkub.com/images/2022/02/16/lion.png" alt="" />
</div>
<div class="card" animal="duck">
<img src="https://imgkub.com/images/2022/02/16/duck.png" alt="" />
</div>
<div class="card" animal="lion">
<img src="https://imgkub.com/images/2022/02/16/lion.png" alt="" />
</div>
</div>
<script id="rendered-js" >
let counter = 0;
let firstSelection = "";
let secondSelection = "";
var cards = document.querySelectorAll(".cards .card");
cards.forEach(card => {
card.addEventListener("click", () => {
card.classList.add("clicked");
if (counter === 0) {
firstSelection = card.getAttribute("animal");
counter++;
} else {
secondSelection = card.getAttribute("animal");
counter = 0;
if (firstSelection === secondSelection) {
var correctCards = document.querySelectorAll(
".card[animal='" + firstSelection + "']");
correctCards[0].classList.add("checked");
correctCards[0].classList.remove("clicked");
correctCards[1].classList.add("checked");
correctCards[1].classList.remove("clicked");
} else {
var incorrectCards = document.querySelectorAll(".card.clicked");
incorrectCards[0].classList.add("shake");
incorrectCards[1].classList.add("shake");
setTimeout(() => {
incorrectCards[0].classList.remove("shake");
incorrectCards[0].classList.remove("clicked");
incorrectCards[1].classList.remove("shake");
incorrectCards[1].classList.remove("clicked");
}, 800);
}
}
});
});
//# sourceURL=pen.js
</script>
</body>
---------------------------------------------------------------------------------------------------------------------
MARIO MATCHING GAME WITHOUT HIDE WITHOUT FLEX DIV
---------------------------------------------------------------------------------------------------------------------
<html>
<head>
<!-- https://github.com/NoraX1/Responsive-Memmory-Game -->
<title>Memmory Game</title>
<style>
.score {
margin-top: 10px;
}
.front {
position: relative;
background-color:White
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
.back {
background-color: #333;
}
img {
height: 100px;
width: 100px;
}
.CssOrangeClass {
background-color: Orange;
}
.match {
background-color:Green;
}
</style>
</head>
<body>
<div class="head">
<h2>Memmory Game</h2>
<div class="score">Score: <span>0</span></div>
</div>
<div class="container">

<div class="front" id="1">
<img src="https://www.pngmart.com/files/5/Balcony-PNG-File.png" alt="">
<div class="back"></div>
</div>

<div class="front" id="1">
<img src="https://www.pngmart.com/files/5/Balcony-PNG-File.png" alt="">
<div class="back"></div>
</div>

<div class="front" id="2">
<img src="https://taniarascia.github.io/memory/img/star.png" alt="">
<div class="back"></div>
</div>

<div class="front" id="2">
<img src="https://taniarascia.github.io/memory/img/star.png" alt="">
<div class="back"></div>
</div>

</div>

<script type='text/javascript'>

var CardArray = document.querySelectorAll('.front')
var container = document.querySelector('.container')
var score = document.querySelector('.score span')

for(let i =0; i<CardArray.length; i++){

CardArray[i].addEventListener('click' ,()=>{

CardArray[i].classList.add('CssOrangeClass')

var Css = document.querySelectorAll('.CssOrangeClass')
if(Css.length == 2){
match(Css[0] , Css[1])
}

})
}

function match(cardOne , cardTwo){
if(cardOne.id == cardTwo.id){
score.innerHTML = parseInt(score.innerHTML) + 1
cardOne.classList.remove('CssOrangeClass') 
cardTwo.classList.remove('CssOrangeClass') 
cardOne.classList.add('match')
cardTwo.classList.add('match')
}else{
setTimeout(() => {
cardOne.classList.remove('CssOrangeClass') 
cardTwo.classList.remove('CssOrangeClass') 
}, 1000);
}
}
</script>
</body>
</html>
---------------------------------------------------------------------------------------------------------------------