Group’D P’faiifu (Branch 1374) (Copy 1556)

Group’D P’faiifu (Branch 1374) (Copy 1..

✨ PARATTAKORN SINGWISET

<html>
<head>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
  body {
  margin: 0;
  color: #4d4d4d;
  font-family: Open Sans, sans-serif;
  letter-spacing: 1px;
  font-weight: 300;
  font-size: 15px;
}

h1 {
  color: #FF4500;
  font-family: Comfortaa, cursive;
  letter-spacing: 3px;
  font-size: 42px;
  text-align: center;
  margin: 0;
	text-shadow: 2px 2px #000000;
}

h2 {
  font-size: 80px;
  text-shadow: 2px 2px #000000;
  margin: 5px 0 0;
}

h3 {
  font-size: 28px;
  font-weight: 300;
  margin: 0;
}

h3{
	font-family: font-sarabun;
  font-size: 28px;
  font-weight: 300;
	color: #FF4500;
  margin: 0;
}

h4{
	font-family: font-chulalongkorn;
	font-size: 22px;
	color: #FF6347;
}

p {
  margin: 0;
}

a {
  color: inherit;
}

header {
  background: url("https://i.pinimg.com/originals/0c/a0/dd/0ca0ddd9bf8dfee8a2c26227bf21f6b8.gif");
	background-size: cover;
	position: relative;
  padding: 0px 8px 0px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
	
}
#new-game-button {
  text-decoration: none;
  color: black;
	background-color: #FA8072;
  margin-top: 40px;
  padding: 18px 30px;
  border: 2px solid;
  border-radius: 5px;
  box-shadow: inset 0 0 0 0 white;
	transition: ease-out .5s;
}

#new-game-button:hover {
  background-color: black;
  color: black;
  margin-top: 40px;
  padding: 18px 30px;
  border: 2px solid white;
  border-radius: 5px;
  box-shadow: inset 300px 0 0 0 #90EE90;
}

#game-container {
	background:url("https://i.pinimg.com/originals/eb/e6/8e/ebe68e74c1c2fac7dac5650e33821165.gif");
	background-size: cover;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 50px 8px 30px;
	
}

#game-container.hidden {
  display: none;
}

#game {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  max-width: 900px;
  perspective: 800px;
}

.game-card {
  height: 180px;
  width: 180px;
  margin: 5px;
  cursor: pointer;
  position: relative;
  transform-style: preserve-3d;
  transition: transform .55s;
  box-shadow: 0px 2px 4px gray;
}
.game-card:hover {
          -ms-transform: scale(1.05);
          -webkit-transform: scale(1.05);
          transform: scale(1.05); 
        }

.game-card figure {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.game-card .front {
  background-color: #9D6340;
}

.game-card .back {
  background-color: #EC9360;
  transform: rotateY(180deg);
}

@media (max-width: 800px) {
  .game-card {
    height: 150px;
    width: 150px;
  }
}

.game-card.flipped {
  transform: rotateY(180deg);
}

#score-board {
  margin: 30px 0 0;
  display: flex;
}

.winner{
    font-size:60px;
    padding: 40px 30px;
    color:hsl(180, 100%, 000%);
    background:hsla(30,100%,50%,0.5);
    border:4px solid white;
    border-radius: 10px;
    -webkit-text-stroke: 1px white;
}

.score {
  display: inline-block;
    margin: auto;
    background:hsla(0,0%,0%,0.5);
    border:1px solid black;
    color:white;
    padding: 20px 20px;
  border-radius: 5px;
}

#score-board.hidden {
  visibility: hidden;
}

#win-screen {
  height: 100%;
  width: 100%;
  margin: 0;
  background: url("https://media1.tenor.com/images/a4e8f57ced98a21b659f0fe2cd0cd8b7/tenor.gif?itemid=15688111");
	background-size: cover;
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
}

#win-screen>* {
  line-height: 0;
  margin: 25px;
}

#win-screen.visible {
  visibility: visible;
  opacity: 1;
  transition: all 0.8s;
}

#replay-button {
  padding: 15px;
  margin: 50px;
  background-color: white;
  border: 1px solid white;
  border-radius: 5px;
  box-shadow: 0px 0px 3px white;
	align-items: center;
	display: flex;
	transition: ease-out 0.3s;
	
}

#replay-button:hover {
	color: white;
  background-color: #B22222;
  cursor: pointer;
}

#replay1-button {
  position: relative;
	cursor: pointer;
	padding: 20px 30px;
	border: 2px solid #df80ff;
	margin: 10px;
	display: inline-block;
	text-decoration: none;
	color: white;
	transition: transform .2s;
	background-color: #e699ff;
	letter-spacing: 2px;
	text-transform: uppercase;
	transition: 0.5s;
}

#replay1-button:hover{
	color: black;
	background-color: white;
	cursor: pointer;
	transform: scale(1.1);
}

em {
  font-size: 14px;
}

footer {
  background-color: #FFAA28;
  font-size: 13px;
  padding: 12px;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
}

footer.hidden {
  display: none;
}

footer a:hover {
  color: #808080;
}

@keyframes example {
  0%   {background-color: #FF99FF;}
  25%  {background-color: #99CCFF;}
  75% {background-color: #FFCC66;}
  100% {background-color: #FF99FF;}
}
</style>
<body scroll="no" style="overflow: hidden">
<header id="home">
  <h1>MEMORY CARD GAME<br>Group D P'FaiiFuu</h1>
	<h4><p1> Credit by </p1></h4><a href="https://goyanespaula.github.io/" target="a_blank"><h3>"Paula Goyanes"</h3></a>
  <a href="#game-container" id="new-game-button">เริ่มเกม</a>
</header>
<section id="game-container" class="hidden">
  <section id="game">
    <div id="game-card-1" class="game-card">
      <figure class="front"></figure>
      <figure class="back"></figure>
    </div>
    <div id="game-card-2" class="game-card">
      <figure class="front"></figure>
      <figure class="back"></figure>
    </div>
    <div id="game-card-3" class="game-card">
      <figure class="front"></figure>
      <figure class="back"></figure>
    </div>
    <div id="game-card-4" class="game-card">
      <figure class="front"></figure>
      <figure class="back"></figure>
    </div>
    <div id="game-card-5" class="game-card">
      <figure class="front"></figure>
      <figure class="back"></figure>
    </div>
    <div id="game-card-6" class="game-card">
      <figure class="front"></figure>
      <figure class="back"></figure>
    </div>
    <div id="game-card-7" class="game-card">
      <figure class="front"></figure>
      <figure class="back"></figure>
    </div>
    <div id="game-card-8" class="game-card">
      <figure class="front"></figure>
      <figure class="back"></figure>
    </div>
    <div id="game-card-9" class="game-card">
      <figure class="front"></figure>
      <figure class="back"></figure>
    </div>
    <div id="game-card-10" class="game-card">
      <figure class="front"></figure>
      <figure class="back"></figure>
    </div>
    <div id="game-card-11" class="game-card">
      <figure class="front"></figure>
      <figure class="back"></figure>
    </div>
    <div id="game-card-12" class="game-card">
      <figure class="front"></figure>
      <figure class="back"></figure>
    </div>
  </section>
	
  <section id="score-board" class="">
    <div class="score low-score" >จำนวนการคลิ๊กต่ำสุด: N/A</div>
		<a href="#home" id="replay-button" >กลับหน้าหลัก</a>
    <div class="score click-count">จำนวนการคลิ๊กล่าสุด: 0</div>
  </section>
  <div id="win-screen" class="">
    <h3 class="winner">ชนะแล้วเก่งมากๆเลย</h3>
    <div class="score click-count"
>จำนวนการคลิ๊กล่าสุด: 0</div>
    <div class="score low-score">จำนวนการคลิ๊กต่ำสุด:</div>
		<a id="replay1-button">ลองเริ่มเล่นอีกครั้ง</a>
  </div>
</section>

<footer class="hidden"> Coded and designed con mucho amor <i class="far fa-hand-spock"></i> by <a href="https://goyanespaula.github.io/" target="a_blank">Paula Goyanes</a> 2018 <i class="far fa-copyright"></i>
</footer>

function assignLowScore($lowScoreOutput) {
  lowScore = lowScore || "N/A";
  $lowScoreOutput.text("จำนวนการคลิ๊กต่ำสุด: " + lowScore);
}

function getRandomIndex(length) {
  return Math.floor(Math.random() * length);
}

function getRandomFace(randomIndex) {
  var face;
  randomIndex = getRandomIndex(possibleCardFaces.length);
  face = possibleCardFaces[randomIndex];
  possibleCardFaces.splice(randomIndex, 1);
  return face;
}

function assignCardFaces($cardFaces) {
  for (var i = 0; i < 12; i++) {
    $($cardFaces[i]).html("<h2>" + getRandomFace() + "</h2>");
  }
 possibleCardFaces = ["&#x1F308;", "&#x1F334;", "&#x1F383;", "&#x1F47e;", "&#x1F680;", "&#x26c4;", "&#x1F308;", "&#x1F334;", "&#x1F383;", "&#x1F47e;", "&#x1F680;", "&#x26c4;"];
}

function isNotFlipped($card) {
  return !$card.hasClass("flipped");
}

function areMatching(flippedCards) {
  return (flippedCards[0].html() === flippedCards[1].html());
}

function hideCards(flippedCards) {
  setTimeout(function() {
    $(flippedCards[0]).removeClass("flipped");
    $(flippedCards[1]).removeClass("flipped");
    locked = false;
  }, flipTimeout);
}

function hideScoreBoard($scoreBoard) {
  $scoreBoard.addClass("hidden");
}

function renderWinScreen($winScreen) {
  setTimeout(function() {
    $winScreen.addClass("visible");
  }, 400);
}

function reset($lowScoreOutput, $cardFaces, $gameClicks, $gameCardElements, $winScreen, $scoreBoard) {
  assignCardFaces($cardFaces);
  matchedCards = [];
  score = 0;
  $lowScoreOutput.text("จำนวนการคลิ๊กต่ำสุด: " + lowScore);
  $gameClicks.text("จำนวนการคลิ๊กล่าสุด: " + score);
  $winScreen.removeClass("visible");
  $scoreBoard.removeClass("hidden");
  $gameCardElements.removeClass("flipped");
}

$(document).ready(function(){
  var $newGameButton = $("#new-game-button");
  var $gameContainer = $("#game-container");
  var $gameCardElements = $(".game-card");
  var $cardFaces = $(".game-card .back");
  var $scoreBoard = $("#score-board");
  var $gameClicks = $(".click-count");
  var $lowScoreOutput = $(".low-score");
  var $winScreen = $("#win-screen");
  var $replay = $("#replay-button");
  var $replay1 = $("#replay1-button");
  var $footer = $("footer");

assignLowScore($lowScoreOutput);
  assignCardFaces($cardFaces);

$newGameButton.on("click", function() {
    $gameContainer.removeClass("hidden");
    $footer.removeClass("hidden");
  });

$gameContainer.on("click", ".front, .front h2", function(event) {
    if(event.target != this || locked){ return true; }

// in case I decide to put a figure on front of card
    var $card = $(event.target).closest(".game-card");

if (isNotFlipped($card)) {
      $card.addClass("flipped");
      flippedCards.push($card);
      score++;
      $gameClicks.text("จำนวนการคลิ๊กล่าสุด: " + score);
    }

if (flippedCards.length === 2) {
      if (areMatching(flippedCards)) {
        matchedCards.push(flippedCards[0], flippedCards[1]);
      } else {
        locked = true;
        hideCards(flippedCards);
      }
      flippedCards = [];
    }

if(matchedCards.length === $gameCardElements.length) {
      checkForLowScore(score, $lowScoreOutput);
      hideScoreBoard($scoreBoard);
      renderWinScreen($winScreen);
    }
  });

$replay.on("click", function() {
    reset($lowScoreOutput, $cardFaces, $gameClicks, $gameCardElements, $winScreen, $scoreBoard);
  });
	
	$replay1.on("click", function() {
    reset($lowScoreOutput, $cardFaces, $gameClicks, $gameCardElements, $winScreen, $scoreBoard);
  });

// Smooth Scrolling
  $("a").on('click', function(event) {
    if (this.hash !== "") {
      event.preventDefault();
      var hash = this.hash;
      $('html, body').animate({
        scrollTop: $(hash).offset().top
        }, 600);
    }
  });
})
    </script>
</body>
</head>
</html>