Tag: Memory Game

  • Crafting Interactive HTML-Based Websites: A Guide to Building a Simple Interactive Memory Game

    Ever wanted to build your own game? Something fun, engaging, and that you could show off to your friends? This tutorial will guide you through creating a simple, yet addictive, memory game using HTML. We’ll cover the basics, from setting up the HTML structure to adding interactivity with JavaScript. By the end, you’ll have a working memory game and a solid understanding of how HTML, CSS, and a little bit of JavaScript can bring your ideas to life. Let’s get started!

    Understanding the Memory Game Concept

    The memory game, also known as Pairs or Concentration, is a classic. The objective is simple: match pairs of identical cards by flipping them over. It’s a great way to test your memory and have a bit of fun. In this tutorial, we will focus on the front-end, meaning the visual presentation and user interaction, using HTML, CSS, and JavaScript.

    Setting Up the HTML Structure

    First, let’s create the basic HTML structure for our game. This will involve setting up the game board, the cards, and any other elements needed for the game’s layout. We’ll use semantic HTML tags to make the code more readable and maintainable.

    HTML Code Breakdown

    Here’s the initial HTML structure:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Memory Game</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="game-container">
        <div class="game-board">
            <!-- Cards will go here -->
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

    Let’s break down this code:

    • <!DOCTYPE html>: Declares the document as HTML5.
    • <html lang="en">: The root element, specifying the language as English.
    • <head>: Contains meta-information about the HTML document.
    • <meta charset="UTF-8">: Specifies character encoding.
    • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Sets the viewport for responsive design.
    • <title>Memory Game</title>: Sets the title of the page.
    • <link rel="stylesheet" href="style.css">: Links to an external CSS stylesheet. We’ll create this later.
    • <body>: Contains the visible page content.
    • <div class="game-container">: A container for the entire game.
    • <div class="game-board">: The area where the cards will be placed.
    • <script src="script.js"></script>: Links to an external JavaScript file. We’ll write the game logic here.

    Save this code as index.html. Now, let’s move on to the next step, which is creating the cards.

    Creating the Cards

    Inside the <div class="game-board">, we’ll create the individual card elements. Each card will have a unique identifier and a corresponding image. For this example, we’ll use simple numbered images.

    <div class="game-board">
    <div class="card" data-card-id="1">
        <img src="card1.png" alt="Card 1">
    </div>
    <div class="card" data-card-id="1">
        <img src="card1.png" alt="Card 1">
    </div>
    <div class="card" data-card-id="2">
        <img src="card2.png" alt="Card 2">
    </div>
    <div class="card" data-card-id="2">
        <img src="card2.png" alt="Card 2">
    </div>
    <div class="card" data-card-id="3">
        <img src="card3.png" alt="Card 3">
    </div>
    <div class="card" data-card-id="3">
        <img src="card3.png" alt="Card 3">
    </div>
    <div class="card" data-card-id="4">
        <img src="card4.png" alt="Card 4">
    </div>
    <div class="card" data-card-id="4">
        <img src="card4.png" alt="Card 4">
    </div>
</div>

    Each card is represented by a <div class="card"> element. The data-card-id attribute is crucial; it links the two cards that should match. The <img> tag displays the card’s image. Make sure you have image files named card1.png, card2.png, card3.png, and card4.png in the same directory as your index.html.

    Styling the Game with CSS

    Next, let’s add some style to our game using CSS. We’ll style the game container, the game board, and the cards themselves. This will determine how the game looks and feels.

    CSS Code Breakdown

    Create a file named style.css and add the following code:

    .game-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
}

.game-board {
    display: grid;
    grid-template-columns: repeat(4, 100px);
    grid-gap: 20px;
    perspective: 1000px;
}

.card {
    position: relative;
    width: 100px;
    height: 100px;
    cursor: pointer;
}

.card img {
    width: 100%;
    height: 100%;
    border-radius: 5px;
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

.card:hover {
    transform: scale(1.05);
}

.card:active {
    transform: scale(0.95);
}

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

.card .back {
    background-color: #ccc;
    border-radius: 5px;
}

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

    Let’s break down the CSS:

    • .game-container: Centers the game on the page.
    • .game-board: Uses a grid layout to arrange the cards. The perspective property adds a 3D effect for the card flipping.
    • .card: Sets the size, position, and cursor for the cards.
    • .card img: Styles the images within the cards. backface-visibility: hidden; prevents the back of the card from being visible when it’s flipped.
    • .card:hover & .card:active: Adds subtle visual feedback on hover and click.
    • .card.flipped: This is where the magic happens. When a card has the class flipped (added by JavaScript), it rotates 180 degrees, revealing the image.
    • .card .back: Styles the back of the card (the part that’s initially visible).
    • .card .front: Positions the card’s front image.

    Adding Interactivity with JavaScript

    Now, let’s bring the game to life with JavaScript. We’ll add the logic to handle card clicks, match checking, and game state.

    JavaScript Code Breakdown

    Create a file named script.js and add the following code:

    const cards = document.querySelectorAll('.card');
let flippedCards = [];
let lockBoard = false;

function flipCard() {
    if (lockBoard) return;
    if (this === flippedCards[0]) return;

    this.classList.add('flipped');

    if (!flippedCards[0]) {
        flippedCards[0] = this;
        return;
    } 

    flippedCards[1] = this;

    checkForMatch();
}

function checkForMatch() {
    let isMatch = flippedCards[0].dataset.cardId === flippedCards[1].dataset.cardId;

    isMatch ? disableCards() : unflipCards();
}

function disableCards() {
    flippedCards.forEach(card => card.removeEventListener('click', flipCard));
    resetBoard();
}

function unflipCards() {
    lockBoard = true;
    setTimeout(() => {
        flippedCards.forEach(card => card.classList.remove('flipped'));
        resetBoard();
    }, 1000);
}

function resetBoard() {
    [flippedCards, lockBoard] = [[], false];
}

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

// Shuffle cards on load
(function shuffle() {
    cards.forEach(card => {
        let randomPos = Math.floor(Math.random() * 12);
        card.style.order = randomPos;
    });
})();

    Let’s break down this JavaScript code:

    • const cards = document.querySelectorAll('.card');: Selects all elements with the class “card” and stores them in the cards variable.
    • let flippedCards = [];: An array to store the currently flipped cards.
    • let lockBoard = false;: A flag to prevent the user from clicking more cards while the game is processing a match or un-flipping cards.
    • flipCard(): This function is triggered when a card is clicked. It adds the “flipped” class to the card, revealing its image, and manages the logic for flipping cards. It also prevents double clicks.
    • checkForMatch(): Checks if the two flipped cards match by comparing their data-card-id attributes.
    • disableCards(): If the cards match, this function removes the click event listener from the matched cards so they can’t be flipped again. It then calls resetBoard().
    • unflipCards(): If the cards don’t match, this function flips the cards back over after a short delay (1 second) using setTimeout(). It also sets lockBoard to prevent further clicks during the animation.
    • resetBoard(): Resets the flippedCards array and sets lockBoard back to false, allowing the player to continue playing.
    • cards.forEach(card => card.addEventListener('click', flipCard));: Adds a click event listener to each card, calling the flipCard function when a card is clicked.
    • The IIFE (Immediately Invoked Function Expression) with the shuffle() function: Shuffles the cards at the beginning of the game. This uses the CSS order property to reorder the cards randomly.

    Step-by-Step Instructions

    Here’s a step-by-step guide to creating your memory game:

    1. Set up the HTML structure: Create an index.html file with the basic structure, including a container, a game board, and the card elements. Make sure to include the links to your CSS and JavaScript files.
    2. Style the game with CSS: Create a style.css file and add the CSS rules to style the game container, the game board, and the cards. This includes setting up the layout, card dimensions, and the 3D flip effect.
    3. Add interactivity with JavaScript: Create a script.js file and add the JavaScript code to handle card clicks, match checking, and game state. This involves selecting the cards, adding event listeners, and implementing the game logic.
    4. Add Images: Ensure that you have the image files (card1.png, card2.png, etc.) in the same directory as your HTML file.
    5. Test and Refine: Open index.html in your browser and test the game. Make sure the cards flip correctly, matches are detected, and unmatched cards flip back over. Refine the CSS and JavaScript as needed to improve the game’s appearance and functionality.
    6. Shuffle Cards: Implement the shuffling of cards for a better gaming experience.

    Common Mistakes and How to Fix Them

    Here are some common mistakes and how to fix them:

    • Incorrect file paths: Make sure the paths to your CSS and JavaScript files in your HTML are correct. Double-check the file names and relative paths (e.g., if your CSS is in a “css” folder, the link would be <link rel="stylesheet" href="css/style.css">).
    • Image paths: Similarly, ensure that the image paths in your HTML are correct. If your images are in an “images” folder, the src attribute in the <img> tag should reflect that (e.g., <img src="images/card1.png" alt="Card 1">).
    • Incorrect data-card-id values: The data-card-id values must match for cards that should be paired. A common mistake is assigning the wrong IDs.
    • Typographical errors: Typos in your HTML, CSS, or JavaScript can cause unexpected behavior. Use a code editor with syntax highlighting to catch these errors.
    • Incorrect CSS selectors: Make sure your CSS selectors (e.g., .card, .game-board) match the class names in your HTML.
    • Logic errors in JavaScript: Debugging JavaScript can be tricky. Use console.log() statements to track the values of variables and the flow of your code. Use your browser’s developer tools to inspect the elements and check for errors.
    • Shuffling not working: Ensure the shuffling function is called, and that the cards are being shuffled using the order CSS property.

    Key Takeaways

    • HTML for Structure: Use HTML to define the structure of your game, including the game board and the cards. Use semantic HTML5 elements for better code readability.
    • CSS for Styling: Use CSS to style your game, including its layout, appearance, and the card flip animation.
    • JavaScript for Interactivity: Use JavaScript to add interactivity, such as handling card clicks, checking for matches, and managing the game state.
    • Data Attributes: Use data- attributes to store information related to the cards, such as their unique IDs.
    • Event Listeners: Use event listeners to respond to user interactions, such as clicking on a card.
    • Arrays for State Management: Use arrays to keep track of flipped cards and the game state.

    FAQ

    1. How can I add more card pairs to the game? Simply add more <div class="card"> elements to your HTML, making sure each card has a matching data-card-id and a corresponding image. You’ll also need to add more images. Remember to update the shuffling logic if necessary.
    2. How can I add a timer to the game? You can add a timer using JavaScript’s setInterval() function. Create a variable to store the remaining time, and update the display every second. You’ll need to stop the timer when the game is won or when time runs out.
    3. How can I add a score counter? Create a variable to store the score and increment it each time a match is found. Display the score in the HTML, and update it whenever the score changes.
    4. How can I make the game responsive? Use CSS media queries to adjust the layout and card sizes based on the screen size. Consider using a responsive grid system.
    5. How can I add different card backs? You could add another class to the `.card` element (e.g. `back-image`) and style it differently in CSS.

    Creating this memory game is a fantastic way to learn the fundamentals of web development. You’ve learned how to structure a webpage with HTML, style it with CSS, and add interactivity with JavaScript. This simple game provides a solid foundation for building more complex and interactive web applications. As you continue to practice and experiment, you’ll discover new ways to enhance your skills and build even more impressive projects. The possibilities are endless, so keep coding, keep learning, and most importantly, have fun!