Welcome to CODEBOX! (Branch 1334) (Copy 1350)

✨ นายพิชญ์รัฐ ไพบูลย์ธรรม

<html>
  <head>
    <title>Memory Game :D</title>
    <style>html {
    box-sizing: border-box;
}
*,
*::before,
*::after {
    box-sizing: inherit;
}
html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  font-size: 20px;
}

body {
    background-color: #93FFC8;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

h1 {
  margin-top: 20px;
    font-family: 'Pacifico', cursive;
    font-weight: 400;
  color:  black;
}
.deck {
    width: 660px;
    min-height: 680px;
    background: #79FDFF;
    padding: 32px;
    border-radius: 10px;
    box-shadow: 12px 15px 20px 0 rgba(46, 61, 73, 0.5);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 3em;
}

.deck .card {
    height: 125px;
    width: 125px;
    background: #e7e7e7;
    background-image:url("https://cdn.discordapp.com/attachments/806508680715042837/806511755975065640/P_get_fix_smaller.png");
    font-size: 0;
    color: black; 
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 5px 2px 20px 0 rgba(46, 61, 73, 0.5);
}

.deck .card.open {
    transform: rotateY(0);
    background:lightgrey;
    cursor: default;
}

.deck .card.show {
    font-size: 33px;
}

.deck .card.notMatch {
    background: #ff4747;
}

.deck .card.match {
    cursor: default;
    background: #99ff66;
    font-size: 33px;
}
.score-panel {
    text-align: left;
    width: 345px;
  margin:50px 330px 10px 5px;
  padding-left: 10px;
}

.score-panel .stars {
    margin: 0px;
    padding:0px;
    display: inline-block;
}

.score-panel .stars li {
    list-style: none;
    display: inline-block;
}

.score-panel .restart {
    float: right;
    cursor: pointer;
}

#timer{
  margin-left:5px;
  }

.moves{
  font-family: 'Roboto', sans-serif;
  padding-left: 5px;
}

@media screen and (max-width: 690px) {
	.deck{
		width: 600px;
		min-height: 620px;
	}
	.deck .card {
		height: 115px;
		width: 115px;
	}
}

@media screen and (max-width: 615px) {
	.deck {
		width: 550px;
		min-height: 570px;
	}

.deck .card {
		height: 100px;
		width: 100px;
	}
}

@media screen and (max-width: 550px) {
	.deck {
		width: 500px;
		min-height: 520px;
	}

.deck .card {
		height: 90px;
		width: 90px;
	}
}
@media screen and (max-width: 500px) {
	.deck {
		width: 400px;
		min-height: 420px;
	}

.deck .card {
		height: 70px;
		width: 70px;
	}
	.score-panel {
	  font-size: 0.8em;
	  width: 300px;
	}
.score-panel .stars {
		margin-left: 15px;
		padding-left:5px;
		padding-right: 5px;
	}
	.deck .card.show{
		font-size: 27px;
	}
	.deck .card.match {
		font-size: 27px;
	}

}

@media screen and (max-width: 400px) {
	.container {
		font-size: 1.2em;
	}
	.deck {
		width: 350px;
		min-height: 370px;
		padding: 20px;
		margin: 0 0 2em;
	}

.deck .card {
		height: 65px;
		width: 65px;
	}
	.score-panel {
		width: 350px;
    margin-right: 21px;
    padding:0px;
	}
	.deck .card.show{
		font-size: 22px;
	}
	.deck .card.match {
		font-size: 22px;
	}
}
@media screen and (max-width: 350px) {
	.container {
		font-size: 1em;
	}
	header {
		font-size: 3em;
    text-align: center;
	}

.deck {
		width: 300px;
		min-height: 320px;
	}

.deck .card {
		height: 55px;
		width: 55px;
	}

.score-panel {
		width: 290px;
    margin-right: 20px;
    padding:0px;
	}
	.deck .card.show{
		font-size: 19px;
	}
	.deck .card.match {
		font-size: 19px;
	}
}

@media screen and (max-width: 300px){
	.container {
		font-size: 0.8em;
	}
	header {
		font-size: 2.8em;
    text-align: center;
	}

.deck {
		width: 260px;
		min-height: 300px;
	}

.deck .card {
		height: 45px;
		width: 45px;
	}

.score-panel {
 		width: 220px;
		font-size: 0.7em;
    margin-right: 20px;
    padding:0px;
	}
	.deck .card .show{
		font-size: 15px;
	}
	.deck .card.match {
		font-size: 15px;
	}
}
	</style>
  </head>
	<body>
      <div class="container">

<header>
      <h1>Memory Game :D</h1>
    </header>

<span class="moves">0</span> Moves
      <span><time id="timer">00Mins:00Secs</time></span>
      <div class="restart">
        <i class="fa fa-repeat"></i>
      </div>
    </section>

<ul class="deck"></ul>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  <script>
let cards = [
  "fa fa-paper-plane-o",
  "fa fa-tags",
  "fa fa-leaf",
  "fa fa fa-female",
  "fa fa-bug",
  "fa fa-bluetooth-b",
  "fa fa-bolt",
  "fa fa-cube"
];

cards = cards.concat(cards);

let opened = [];

let counter = 0;

let moves = 0;

let stars = document.getElementsByClassName("fa fa-star");
console.log(stars);
let rating = 3;

let shuffledCards;

let hasTheTimerStarted = false;

function shuffle(array) {
  var currentIndex = array.length,
    temporaryValue,
    randomIndex;

while (currentIndex !== 0) {
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

return array;
}

function createCards() {
  
  let shuffledCards = shuffle(cards);

shuffledCards.forEach(function(item) {
    
    $("ul.deck").append(`<li class='card'><i class="${item}"></i></li>`);
  });
}

createCards();

$(".card").click(function() {
  
  openCards($(this));
  console.log(this);
});

function openCards(card) {
  
  if (opened.length === 0) {
    
    opened.push(card);

card.toggleClass("open show animated headShake");

//Calling timer
    if (!hasTheTimerStarted) {
      timer();
      hasTheTimerStarted = true;
    }
  } 
  else if (opened.length === 1 && opened[0][0]!== card[0]) {
    
    opened.push(card);

card.toggleClass("open show animated headShake");

timeOut = setTimeout(checkMatch, 500);
  }
}

function checkMatch() {
  let open = opened;

open[0].toggleClass("disable");
  moveCounter();

if (
    open[0][0].firstChild.className === open[1][0].firstChild.className &&
    open[0][0] !== open[1][0]
  ) {
    open[0].toggleClass("match tada");
    open[1].toggleClass("match tada");

open[0].css("pointer-events", "none");
    open[1].css("pointer-events", "none");

opened = [];
    timeOut2 = setTimeout(matchCounter, 1000);
  } else if (opened.length === 1 && opened[0][0] !== card[0]) {
    opened.toggleClass("disable");
  } else {
    open[0].toggleClass("notMatch");
    open[1].toggleClass("notMatch");
    opened = [];
    setTimeout(function() {
      open[0].toggleClass("open show animated notMatch headShake");
      open[1].toggleClass("open show animated notMatch headShake");
    }, 300);
  }
}

function matchCounter() {
  counter++;
  if (counter === 8) {
    shouldTimerTick = false;
    openWinModal();
  }
}

function moveCounter() {
  moves++;

$(".moves").html(moves);
  checkStars();
}

function checkStars() {
  if (moves > 10 && moves < 19) {
    stars[2].style.display = "none";
    rating = 2;
  } else if (moves >= 20) {
    stars[1].style.display = "none";
    rating = 1;
  }
}

document.querySelector(".reset").addEventListener("click", reset);
  $("#myModal").modal("show");
}

function reset() {
  $(".deck").html("");
  opened = [];
  counter = 0;
  moves = -1;
  rating = 3;
  moveCounter();
  shuffledCards = [];
  createCards();
  hasTheTimerStarted = false;
  shouldTimerTick = false;
  t.textContent = "00Mins:00Secs";
  seconds = 0;
  minutes = 0;
  $(".card").click(function() {
    openCards($(this));
  });
  stars[1].style.display = "block";
  stars[2].style.display = "block";
  $("#myModal").css("display", "none");
}

$(".restart").click(function() {
  reset();
});

let shouldTimerTick;
let t = document.getElementById("timer"),
  seconds = 0,
  minutes = 0;

function timer() {
  let time;
  shouldTimerTick = true;

time = setInterval(function() {
    if (shouldTimerTick) {
      (function add() {
        seconds++;
        if (seconds >= 60) {
          seconds = 0;
          minutes++;
        }

t.textContent =
          (minutes
            ? minutes > 9 ? minutes + "Mins" : "0" + minutes + "Mins"
            : "00Mins") +
          ":" +
          (seconds > 9 ? seconds + "Secs" : "0" + seconds + "Secs");
      })();
    } else {
      clearInterval(time);
    }
  }, 1000);
}
	</script>
	</body>
</html>