Flip Card Game Code for Website | Blogger Game Flip Card

Dear bloggers, do you like retro games? Do you remember the games which had been wonders of your digital playthings? We have brought a code of Flip Game (HTML, JS, CSS combo) which can be used on your Blogger website.

Blogger Game Flip Card

All you need to do is, 1. copy the codes below, 2. edit the post/page in Blogger (HTML mode), 3. paste the codes, and 4. save the post/page.

Please remember to keep the CSS script between <style> and </style>. Additionally, the JS between <script> and </script>. Otherwise, we have made it possible it for you. See further down below.

By now, while you are reading and doing things, this Flip Card Game should have been live on your Blogger website! Hola!

Credits to: RyoCoding | CodePen.io

See the Pen Flip Game by りょう@ウェブエンジニア (@ryocoding) on CodePen.

If there are some problems in the HTML, CSS, JS code above, you can use the reformatted code from below.

<style>
  body {

  font-family: Arial;
}

.container {
  margin-top: 40px;
  text-align: center;
}

.message {
  color: black;
  font-size: 20px;
  margin-bottom: 12px;
}

.reset-button {
  border: 1;
  background-color: white;
  border-radius: 20px;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  outline: none;
  padding: 10px 12px; 
}

.frame {
  margin: 0 auto;
  width: 430px;
}

.row {
  display: flex;
  margin-bottom: 12px;
}

.card {
  background-color: white;
  border-radius: 10px;
  box-sizing: border-box;
  cursor: pointer;
  height: 100px;
  margin-right: 12px;
  position: relative;
  transition: .4s;
  transform: rotateY(0deg);
  width: 100px;
}

.card:last-child {
  margin-right: 0;
}

.card .front {
  background-color: white;
  border: 8px solid;
  border-radius: 10px;
  box-sizing: border-box;
  height: 100%;
  left: 0;
  margin-right: 12px;
  padding: 20px 0;
  position: relative;
  text-align: center;
  transition: .4s;
  top: 0;
  width: 100%;
}

.card .number {
  font-family: "Hiragino Sans", Arial;
  font-size: 24px;
  left: 6px;
  line-height: 1;
  position: absolute;
  top: 4px;
}


.card .icon {
  font-size: 48px;
  line-height: 1;
}

.card.moon .front {
  border-color: #5E00A3;
}

.card.moon {
  color: #5E00A3;
}

.card.star {
  color: #ffc800;
}
.card.star .front {
  border-color: #ffc800;
}

.card.cloud {
  color: #375dfd;
}
.card.cloud .front {
  border-color: #375dfd;
}

.card.sun {
  color: #ff8026;
}
.card.sun .front {
  border-color: #ff8026;
}


.card .back {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQklEQVQoU2P8Lyn5n4GBgeHbnTsgioFLRQVMowNGohV+/foVbCI6QDeZkWiFuKyGuRlmE0434lQI04nL93AT6a8QANCyN0ct+wzIAAAAAElFTkSuQmCC) repeat; 
  background-position: center;
  border: 4px solid #ff0000;
  border-radius: 10px;
  box-sizing: border-box;
  opacity: 0;
  position: absolute;
  height: 100%;
  left: 0;
  transition: .4s;
  top: 0;
  width: 100%; 
}

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

.card.flipped .back {
  opacity: 1;
}
  </style>

<script src="https://kit.fontawesome.com/e369b1ab80.js" crossorigin="anonymous"></script>

<div class="container">
  <div id="message" class="message"></div>
  <div id="frame" class="frame"></div>
  <div><button id="reset-button" class="reset-button">RESET</button></div>
</div>

<script>
  /**
 * カードの柄
 * @enum {string}
 */
var Suit = {
  SUN: "sun",
  STAR: "star",
  CLOUD: "cloud",
  MOON: "moon",
};
/**
 * 裏向きにする CSS クラス
 * @type {string}
 */
var FLIPPED_CLASS = "flipped";
/**
 * めくりに失敗できる最大の回数
 * @type {number}
 */
var MAX_FAIL = 5;
/**
 * カードにふる番号 
 * @type {Array.<number>}
 */
var numbers = ["1", "2"];
/**
 * カードにふる柄 
 * @type {Array.<number>}
 */
var suits = [
  Suit.SUN,
  Suit.STAR,
  Suit.CLOUD,
  Suit.MOON,
];
/**
 * 一行に並べるカードの数
 * @type {number}
 */
var cardsPerRow = 4;
/**
 * 選択されているカードの ID
 * @type {?string}
 */
var selected = null;
/**
 * すでにマッチしたカードの ID
 * @type {Array.<string>}
 */
var matched = [];
/**
 * カードを開いてマッチせずに、裏返すのを待っているかどうか
 * @type {boolean}
 */
var waitingAfterFail = false;
/**
 * 失敗した数
 * @type {number}
 */
var failCount = 0;
/**
 * ゲームが終了しているかどうか
 * @type {boolean}
 */
var gameEnded = false;
/**
 * メッセージを表示する HTML 要素
 * @type {HTMLElement}
 */
var messageElement = document.getElementById("message");
/**
 * ゲームを終了する
 * @param {boolean} failed ゲームが失敗で終了したか
 */
function endGame(failed) {
  gameEnded = true;
  if (failed) {
    messageElement.innerText = "Failed 😭";
  } else {
    messageElement.innerText = "You done 😎";
  }
}
/**
 * カードがクリックされた時の動作
 * @param {HTMLElement} card
 */
function onCardClick(card) {
  if (waitingAfterFail || gameEnded) {
    return;
  }
  var id = card.dataset.id;
  if (card.classList.contains(FLIPPED_CLASS)) {
    // Turn to front
    if (selected) {
      if (selected == id) {
        card.classList.remove(FLIPPED_CLASS); 
        matched.push(id);
        selected = null;
        if (matched.length == numbers.length * suits.length) {
          endGame(false);
          return;
        }
      } else {
        card.classList.remove(FLIPPED_CLASS);
        failCount += 1;
        if (failCount > MAX_FAIL) {
          endGame(true);
          return;
        } else {
          waitingAfterFail = true;
          setTimeout(function() {
            Array.prototype.forEach.call(
              document.getElementsByClassName(id),
              function(card) {
                card.classList.add(FLIPPED_CLASS); 
              }
            );
            Array.prototype.forEach.call(
              document.getElementsByClassName(selected),
              function(card) {
                card.classList.add(FLIPPED_CLASS); 
              }
            );
            waitingAfterFail = false;
            selected = null;
          }, 1000);
        }
      }
    } else {
      selected = id;
      card.classList.remove(FLIPPED_CLASS); 
    }
    messageElement.innerText = "You can mistake " + (MAX_FAIL - failCount) + " out of " + MAX_FAIL;
  }
}
/**
 * ゲームをリセットする
 */
function reset() {
  failCount = 0;
  selected = null;
  gameEnded = false;
  matched = [];
  createMatrix();
  messageElement.innerText = "Please flip and find suit-number pairs !";
}
/**
 * カードの HTML 要素を作る
 * @param {string} suit
 * @param {string} number
 * @return HTMLElement
 */
function createCard(suit, number) {
  var id = suit + "-" + number;
  var frame = document.createElement("div");
  frame.classList.add("card");
  frame.classList.add("flipped");
  frame.classList.add(suit);
  frame.classList.add(id);
  frame.dataset.id = id;
  var front = document.createElement("div");
  front.className = "front";
  var numberElem = document.createElement("div");
  numberElem.className = "number";
  numberElem.innerText = number;
  var icon = document.createElement("div");
  icon.className = "icon fas fa-" + suit;
  front.appendChild(numberElem);
  front.appendChild(icon);
  frame.appendChild(front);
  var back = document.createElement("div");
  back.className = "back";
  frame.appendChild(back);
  frame.addEventListener("click", function() {
    onCardClick(frame);
  });
  return frame;
}
/**
 * カードを配置する
 */
function createMatrix() {
  var frame = document.getElementById("frame");
  frame.innerHTML = "";
  var seeds = [];
  for(var i = 0; i < 2; i++) {
    suits.forEach(function(suit) {
       numbers.forEach(function(number) {
         seeds.push([suit, number, Math.random()]);
       });
    });
  }
  seeds = seeds.sort(function(a, b) {
    return a[2] < b[2] ? -1 : 1;
  }).map(function(seed) {
    return [seed[0], seed[1]];
  });
  var row;
  for (var i = 0; i < seeds.length; i++) {
    var seed = seeds[i];
    if (i % cardsPerRow === 0) {
      row = document.createElement("div");
      row.className = "row";
      frame.appendChild(row);
    }
    var card = createCard(seed[0], seed[1]);
    row.appendChild(card);
  }
}
// プログラムの開始
(function() {
  reset();
  document.getElementById("reset-button").addEventListener(
    "click",
    function() {
      reset(); 
    }
  );
})();
  </script>

We hope that you will utilize the essence of the codes presented here from various sources.

Happy Coding !