Open in app

Sign in

Write

Sign in

Home

Library

Stories

Stats

Code for flip card (uno flip) game…

Code With Gp
Output Looks like...

These codes work together to create a fully functional and playable game.

HTML

The HTML structure sets up the game board and a simple interface for the user.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Memory Card Game</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <header>
      <h1>Memory Card Game</h1>
      <p>Find all the pairs before the timer runs out!</p>
    </header>

    <div class="settings">
      <button id="set-timer" class="cute-button">⏳ Set Timer</button>
      <button id="start-game" class="cute-button" disabled>🎮 Start Game</button>
    </div>

    <div class="stats">
      <div>
        <p>🌀 Moves</p>
        <span id="moves-count">0</span>
      </div>
      <div>
        <p>⏰ Time Left</p>
        <span id="timer">02:00</span>
      </div>
    </div>

    <div id="game-board"></div>
    <button id="restart" class="cute-button" style="display: none;">🔄 Restart Game</button>
  </div>

  <div id="timer-modal" class="modal hidden">
    <div class="modal-content">
      <h2>Select Timer</h2>
      <div class="time-options">
        <button class="time-option cute-button" data-time="1">1 Minute</button>
        <button class="time-option cute-button" data-time="2">2 Minutes</button>
        <button class="time-option cute-button" data-time="3">3 Minutes</button>
        <button class="time-option cute-button" data-time="5">5 Minutes</button>
        <button class="time-option cute-button" data-time="10">10 Minutes</button>
      </div>
      <button id="close-timer-modal" class="cute-button">Close</button>
    </div>
  </div>

  <div id="modal" class="modal hidden">
    <div class="modal-content">
      <h2 id="modal-title"></h2>
      <p id="result-message"></p>
      <button id="play-again" class="cute-button">🎉 Play Again</button>
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>

Css

The CSS adds styling, including a gradient background, hover effects, and animations to make the game visually appealing. The design is clean, with smooth transitions and a modern look.

/* General Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Poppins', sans-serif;
  background: linear-gradient(135deg, #f6d365, #fda085);
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  color: #333;
}

.container {
  width: 100%;
  max-width: 600px;
  padding: 20px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
  text-align: center;
}

header h1 {
  font-size: 2.5rem;
  color: #ff6b6b;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}

header p {
  font-size: 1rem;
  color: #777;
  margin-bottom: 20px;
}

.cute-button {
  background: linear-gradient(135deg, #ff6b6b, #ff9f43);
  color: #fff;
  padding: 10px 20px;
  font-size: 1rem;
  font-weight: bold;
  border: none;
  border-radius: 15px;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.3s ease;
}

.cute-button:hover {
  background: linear-gradient(135deg, #ee5253, #ff6b6b);
  transform: scale(1.1);
}

/* Set Timer Modal */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

.modal.hidden {
  display: none;
}

.modal-content {
  background: #fff;
  padding: 30px;
  border-radius: 20px;
  text-align: center;
  width: 90%;
  max-width: 400px;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
}

.modal-content h2 {
  font-size: 1.5rem;
  margin-bottom: 20px;
  color: #ff6b6b;
}

.time-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.time-option {
  width: 100px;
  height: 50px;
  background: linear-gradient(135deg, #74b9ff, #0984e3);
  color: #fff;
  font-size: 1rem;
  font-weight: bold;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.3s ease;
}

.time-option:hover {
  background: linear-gradient(135deg, #0984e3, #74b9ff);
  transform: translateY(-5px);
}

/* Game Board */
#game-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 10px;
  margin: 20px auto;
  width: 100%;
  max-width: 400px;
  aspect-ratio: 1;
}

.card {
  position: relative;
  perspective: 1000px;
  cursor: pointer;
}

.card-inner {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 100%; /* Maintain square shape */
  transform-style: preserve-3d;
  transform: rotateY(0);
  transition: transform 0.6s ease;
  border-radius: 10px;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
}

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

.card-front,
.card-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
}

.card-front {
  background: linear-gradient(135deg, #ffeaa7, #fab1a0);
  border: 2px solid #ff7675;
}

.card-back {
  background: linear-gradient(135deg, #55efc4, #00cec9);
  color: #2d3436;
  font-size: 2rem;
  transform: rotateY(180deg);
  font-family: 'Poppins', sans-serif;
  box-shadow: inset 0px 5px 10px rgba(0, 0, 0, 0.1);
}

/* Restart Button */
#restart {
  margin-top: 20px;
  display: none;
}

Javascript

The JavaScript handles the game logic and makes the computer a challenging opponent by using the minimax algorithm.

const images = ['🍎', '🍌', '🍇', '🍉', '🍓', '🍒', '🍍', '🥝'];
let cards = [...images, ...images];
let flippedCards = [];
let matchedCards = 0;
let moves = 0;
let timer = null;
let timeLeft = 0;

const gameBoard = document.getElementById('game-board');
const movesCount = document.getElementById('moves-count');
const timerDisplay = document.getElementById('timer');
const restartButton = document.getElementById('restart');
const startGameButton = document.getElementById('start-game');
const setTimerButton = document.getElementById('set-timer');
const timerModal = document.getElementById('timer-modal');
const closeTimerModalButton = document.getElementById('close-timer-modal');
const timeOptions = document.querySelectorAll('.time-option');

let selectedTime = 2;

// Timer Modal Controls
setTimerButton.addEventListener('click', () => timerModal.classList.remove('hidden'));
closeTimerModalButton.addEventListener('click', () => timerModal.classList.add('hidden'));
timeOptions.forEach(option => {
  option.addEventListener('click', event => {
    selectedTime = parseInt(event.target.dataset.time);
    timerDisplay.textContent = `${String(selectedTime).padStart(2, '0')}:00`;
    startGameButton.disabled = false;
    timerModal.classList.add('hidden');
  });
});

// Game Initialization
startGameButton.addEventListener('click', initializeGame);
restartButton.addEventListener('click', initializeGame);
document.getElementById('play-again').addEventListener('click', () => {
  document.getElementById('modal').classList.add('hidden');
  initializeGame();
});

// Initialize Game
function initializeGame() {
  flippedCards = [];
  matchedCards = 0;
  moves = 0;
  timeLeft = selectedTime * 60;
  movesCount.textContent = '0';
  timerDisplay.textContent = `${String(selectedTime).padStart(2, '0')}:00`;
  clearInterval(timer);
  timer = null;
  gameBoard.innerHTML = '';
  restartButton.style.display = 'block';

  const shuffledCards = shuffle([...cards]);
  shuffledCards.forEach(image => {
    const card = document.createElement('div');
    card.classList.add('card');
    card.innerHTML = `
      <div class="card-inner">
        <div class="card-front"></div>
        <div class="card-back">${image}</div>
      </div>`;
    card.addEventListener('click', flipCard);
    gameBoard.appendChild(card);
  });
}

// Shuffle Cards
function shuffle(array) {
  return array.sort(() => 0.5 - Math.random());
}

// Flip Card Logic
function flipCard() {
  if (!timer) startTimer();
  const cardInner = this.querySelector('.card-inner');
  if (cardInner.classList.contains('flipped') || flippedCards.length === 2) return;

  cardInner.classList.add('flipped');
  flippedCards.push(this);

  if (flippedCards.length === 2) checkMatch();
}

// Check for a Match
function checkMatch() {
  moves++;
  movesCount.textContent = moves;
  const [card1, card2] = flippedCards;
  const image1 = card1.querySelector('.card-back').textContent;
  const image2 = card2.querySelector('.card-back').textContent;

  if (image1 === image2) {
    matchedCards += 2;
    flippedCards = [];
    if (matchedCards === cards.length) endGame(true);
  } else {
    setTimeout(() => {
      card1.querySelector('.card-inner').classList.remove('flipped');
      card2.querySelector('.card-inner').classList.remove('flipped');
      flippedCards = [];
    }, 1000);
  }
}

// Start Timer
function startTimer() {
  timer = setInterval(() => {
    timeLeft--;
    const minutes = String(Math.floor(timeLeft / 60)).padStart(2, '0');
    const seconds = String(timeLeft % 60).padStart(2, '0');
    timerDisplay.textContent = `${minutes}:${seconds}`;
    if (timeLeft <= 0) endGame(false);
  }, 1000);
}

// End Game
function endGame(win) {
  clearInterval(timer);
  const modal = document.getElementById('modal');
  const modalTitle = document.getElementById('modal-title');
  const resultMessage = document.getElementById('result-message');
  modalTitle.textContent = win ? '🎉 You Win!' : '⏰ Time\'s Up!';
  resultMessage.textContent = win ? `You matched all cards in ${moves} moves.` : 'Better luck next time!';
  modal.classList.remove('hidden');
}

In short, HTML builds the calculator, CSS makes it look nice, and JavaScript makes it functional!

Save the files as index.html, styles.css, and script.js, and test in a browser.

The game is responsive and supports both desktop and mobile devices, ensuring a smooth and enjoyable experience.

— code with gp…

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Code With Gp
Code With Gp

Written by Code With Gp

4 Followers
0 Following

No responses yet

Write a response

What are your thoughts?

More from Code With Gp

See all from Code With Gp

Recommended from Medium

See more recommendations