Skip to main content

Learn JavaScript: The Essential Guide for Web Development

Post a Comment

Create a Memory Matching Game with HTML, CSS, and JavaScript - Step-by-Step Guide

Creating a Memory Game using HTML, CSS, and JavaScript is a fun project that allows you to practice both your front-end and logic skills. Here's a step-by-step guide to building the game:

Step 1: HTML Structure

We need to create a grid of cards, each of which has hidden content. Let's create the basic structure for our memory game:

html
<!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" id="game-board">

            <!-- Cards will be generated here -->

        </div>
        <div class="info"> 
<p>Moves: <span id="move-count">0</span></p> 
<p>Time: <span id="timer">00:00</span></p>

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

Step 2: CSS Styling (style.css)

Now, we'll style the cards and the board. The cards should flip when clicked, and we'll also make the board responsive.

css
* { 
margin: 0;
    padding: 0;
    box-sizing: border-box; 
}

body {
font-family: Arial, sans-serif;
    background-color: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
} 
.game-container {
    text-align: center;
} 
.game-board {
    display: grid;
    grid-template-columns: repeat(4, 100px); /* Adjust for more cards */
    gap: 10px;
    margin-bottom: 20px;
} 
.card {
    width: 100px;
height: 100px;
background-color: #3498db;
border-radius: 8px;
    display: flex;
justify-content: center; 
align-items: center;
font-size: 20px; 
color: white;
cursor: pointer;
position: relative; 
transform-style: preserve-3d;
transition: transform 0.5s;
 } 
.card.flipped {
    transform: rotateY(180deg);
 } 
.card .card-content {
    position: absolute;
backface-visibility: hidden;
 } 
.card .card-back {
    transform: rotateY(180deg);
background-color: #2980b9;
} 
.info p {
    font-size: 18px;
margin: 10px 0;
 }

@media (max-width: 600px) { 
.game-board {
        grid-template-columns: repeat(3, 100px);
 }
}

Step 3: JavaScript Game Logic (script.js)

Now comes the fun part — implementing the game logic! The following JavaScript will handle card flipping, checking for matches, updating the number of moves, and tracking the time.

javascript
const cardValues = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'];
let cards = [...cardValues, ...cardValues]; 
// Duplicate to create pairs 
let flippedCards = []; 
let matchedCards = []; 
let moveCount = 0; 
let timerInterval; 
let seconds = 0;
function shuffleCards(cards) {
    return cards.sort(() => Math.random() - 0.5);
}
function startTimer() {
    timerInterval = setInterval(() => {
        seconds++;
        document.getElementById('timer').textContent = formatTime(seconds);
    }, 1000);
}
function formatTime(seconds) {
    const minutes = Math.floor(seconds / 60);
const remainingSeconds = seconds % 60; 
return `${String(minutes).padStart(2, '0')}:${String(remainingSeconds).padStart(2, '0')}`;
} 
function createCardElements() { 
const gameBoard = document.getElementById('game-board'); 
const shuffledCards = shuffleCards(cards);
    
    shuffledCards.forEach(value => { 
const card = document.createElement('div');
        card.classList.add('card'); 
const front = document.createElement('div');
        front.classList.add('card-content');
        front.textContent = ''; 
// Hidden content on the front 
const back = document.createElement('div');
        back.classList.add('card-content', 'card-back');
 back.textContent = value;

        card.append(front, back);
        gameBoard.appendChild(card); 
 card.addEventListener('click', () => flipCard(card));
    });
} 
function flipCard(card) { 
if (flippedCards.length === 2 || card.classList.contains('flipped')) return;

    card.classList.add('flipped');
 flippedCards.push(card); 
if (flippedCards.length === 2) {
        checkForMatch();
    }
}

function checkForMatch() {
const [card1, card2] = flippedCards; 
const value1 = card1.querySelector('.card-back').textContent; 
const value2 = card2.querySelector('.card-back').textContent; 
if (value1 === value2) {
        matchedCards.push(card1, card2);
        flippedCards = [];
        updateMoveCount(); 
if (matchedCards.length === cards.length) {
            endGame();
        }
    } 
else {
        setTimeout(() => {
            card1.classList.remove('flipped');
            card2.classList.remove('flipped');
            flippedCards = [];
            updateMoveCount();
        }, 1000);
    }
} 
function updateMoveCount() {
    moveCount++;
    document.getElementById('move-count').textContent = moveCount;
} 
function endGame() {
    clearInterval(timerInterval); 
alert('Congratulations! You won the game.');
} 
function initializeGame() {
    createCardElements();
    startTimer();
}

initializeGame();

Explanation of Key Parts:

  • HTML: We set up the structure for the game container, game board, and a section to display the number of moves and the timer.
  • CSS: The cards are styled with a flip effect using CSS transformations. The flipped class rotates the card 180 degrees to show the back. The layout is responsive using grid layout, and we adjust the number of columns based on the screen size.
  • JavaScript:
    • Game Logic: Cards are shuffled and displayed. When clicked, cards flip and reveal the value. If two cards match, they remain flipped; if not, they flip back after a short delay.
    • Timer: The timer runs from the moment the game starts and tracks time.
    • Moves Counter: Every time a pair is revealed (whether they match or not), the move count increments.
    • End Game: When all cards are matched, the game ends and an alert is shown with the victory message.

Output




Optional Enhancements:

  • Add a "Restart" button to start a new game.
  • Include more levels with varying grid sizes (e.g., 4x4, 6x6).
  • Add sound effects when cards are flipped or when a match is made.
  • Add difficulty levels where you can change the number of cards.
Labels:

Comments

Post a Comment

Popular posts from this blog

Winscoder: Characteristics of DBMS

 A database management system (DBMS) is a software suite that facilitates the creation, organization, retrieval, and management of data. Some of its key characteristics include: 1. Data Integrity :  DBMS ensures the accuracy, consistency, and reliability of data through various mechanisms like constraints, validations, and data types. 2. Data Security :  It provides mechanisms to control access to data, ensuring that only authorized users can view or modify it. This includes user authentication, authorization, and encryption. 3. Data Independence : DBMS separates the data from the applications that use it, allowing changes to the database structure without affecting the applications. This includes both logical and physical data independence. 4. Concurrent Access and Transaction Management :  DBMS allows multiple users to access the database simultaneously while ensuring data integrity through concurrency control mechanisms. It also supports transactions, which are...
Post a Comment
Read more

Html Tutorial For Beginners Html Basic Tags

HTML ( Hypertext Markup Language ) is the standard markup language for creating web pages and web applications. It provides a way to structure content on the internet, allowing developers to define the elements and attributes that make up a webpage. In this extensive exploration, we'll delve into various HTML elements, their uses, and how they contribute to the overall structure and functionality of a webpage. Introduction to HTML HTML is composed of elements, each represented by a tag that surrounds content and provides information about that content. Tags are enclosed in angle brackets, and most come in pairs, with an opening tag and a closing tag. EXAMPLE <! DOCTYPE html >     < html >     < head >           < title > Page Title </ title >         </ head >           < body >                 < h1 ...
Post a Comment
Read more

Introduction to DBMS

A Database Management System (DBMS ) is like a digital librarian for information. It helps organize, store, and retrieve data efficiently in a computer system.   Definition of DBMS A Database Management System (DBMS) is a software application that provides an organized and efficient method for creating, storing, retrieving, and managing data in a database . It acts as an intermediary between users and the database, ensuring data integrity, security, and ease of access. Importance of DBMS 1. Data Organization:    - DBMS structures data, preventing redundancy and ensuring a systematic organization. 2. Data Retrieval:    - Enables quick and efficient retrieval of specific information, reducing time and effort. 3. Data Integrity:    - Implements measures like constraints and validation rules to maintain accurate and consistent data. 4. Concurrency Control:    - Manages multiple users accessing the database simultaneously, preventing conflicts a...
Post a Comment
Read more

Html And CSS Project

CSS, or Cascading Style Sheets, is a stylesheet language used to describe the presentation of a document written in HTML or XML. It allows you to  control the layout, formatting, and appearance of multiple web pages all at once. FORM AND TABLE Code step by step: 1 . Document Type Declaration:    <!DOCTYPE html>    - Declares that the document is an HTML5 document. 2. HTML Opening Tag:    <html lang="en">    - The root element of the HTML document.    - lang="en" specifies that the content is in English. 3. Head Section: < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > Table and Form Project </ title > </ head >     - Contains metadata about the HTML document.    - <meta charset="UTF-8">: Sets the character set to UTF-8.    - <meta name="viewport" content="widt...
Post a Comment
Read more

Winscoder: Difference between DBMS and File storage system

 DBMS ( Database Management System ) and traditional file storage systems differ in several key aspects: 1. Data Structure :     - DBMS : Organizes data in a structured manner using tables, with each table consisting of rows (records) and columns (fields), allowing for efficient retrieval, insertion, and manipulation of data.    - File Storage System : Stores data in unstructured or semi-structured files, without any inherent organization, making it less efficient for retrieval and manipulation. 2. Data Integrity and Constraints :    - DBMS : Enforces data integrity through constraints such as unique keys, foreign keys, and data types, ensuring that data remains consistent and accurate.    - File Storage System : Lacks built-in mechanisms for enforcing data integrity, making it more prone to inconsistencies and errors. 3. Data Independence :     DBMS : Provides data independence, allowing changes to the database structure (sc...
Post a Comment
Read more

Database Architecture DBMS Data Base Management System

  Database architecture involves organizing data storage, retrieval, and management . It includes components like data models, schemas, indexing, and query optimization techniques. Database Architecture Database architecture refers to the structure and organization of a database system, outlining how data is stored, accessed, and managed. It typically follows a three-tier model comprising external, conceptual, and internal levels. 1. External Level This is the user interface layer where individuals interact with the database. Users at this level see a simplified view tailored to their specific needs. Applications and queries from this level translate into requests that the database system understands. 2. Conceptual Level The conceptual or logical level defines the overall structure of the database. It includes the data model, which outlines entities, attributes, and relationships. Ensures data independence, allowing changes in the database structure without affecting user intera...
Post a Comment
Read more

Evolution of Database Systems

  Databases evolved from simple flat files to structured relational databases , improving data organization. Later, NoSQL databases emerged, offering flexibility for diverse data types and large volumes. This evolution caters to the increasing complexity and diversity of data storage needs. Evolution of Database Systems: 1. File Systems:    Early systems used file-based approaches to store and manage data.    Data redundancy and inconsistency were common issues.    Lack of data integrity and centralized control. 2. Hierarchical Databases:    Introduced a hierarchical structure to organize data.    Relationships represented as parent-child links.    Improved data organization but still lacked flexibility. 3 . Network Databases:     Enhanced flexibility with a network model.     Introduced the concept of records and sets.     Complex relationships were possible, but navigation was challenging....
Post a Comment
Read more

Aggregate Functions and Grouping in SQL

  Aggregate Functions and Grouping in SQL Aggregate functions in SQL are used to perform calculations on multiple rows of a table's column and return a single value. These are often combined with the GROUP BY clause to group rows that have the same values, and the HAVING clause to filter groups. 1. COUNT : Counting Rows The COUNT() function returns the number of rows that match a specified condition. Syntax: SELECT COUNT (column_name) FROM table_name WHERE condition ; Example: Let’s say you have a table called sales : id product amount 1 Laptop 1000 2 Phone 600 3 Jacket 150 4 T-shirt 50 5 Phone 800 To count the number of sales made: SELECT COUNT ( * ) AS total_sales FROM sales; Result : total_sales ------------ 5 2. SUM : Summing Values The SUM() function calculates the total sum of a numeric column. Syntax: SELECT SUM (column_name) FROM table_name WHERE condition ; Example: To calculate the total sales amount: SELECT SUM (amount) AS total_revenue FROM sales; Res...
Post a Comment
Read more

Html Form tag HTML input

 HTML element like the <input> tag would be excessive. I can give you a comprehensive overview of the <input> tag , its attributes, and various use cases in a more concise manner. If you have specific aspects or questions you'd like me to cover in more detail, feel free to let me know.  HTML <input> Tag Overview The <input> tag is a fundamental HTML element used to create various types of interactive fields or controls within a web form. It allows users to input data, make selections, and interact with the webpage. Below is a breakdown of the <input> tag and its key attributes. Basic Syntax: < input type = "text" name = "username" id = "username" value = "Default Value" >    Output  Attributes: 1. Type Attribute:    - Specifies the type of input control. Common values include:      - text: Single-line text input.      - password: Password input with obscured characters.   ...
Post a Comment
Read more

Html Basic Attributes HTML Element with Attributes

HTML ( Hypertext Markup Language ) attributes enhance the functionality and appearance of elements on a webpage. Attributes provide additional information about HTML elements and are always included in the opening tag. In this comprehensive guide, we'll delve into various HTML attributes, exploring their purposes and providing examples to illustrate how they can be effectively used. Basic Structure of HTML Element with Attributes HTML elements are typically structured with a tag name and attributes contained within the opening tag. Here's a basic example:     < tagname attribute = "value" > Content </ tagname >     Output     Let's explore some common HTML attributes and their applications. 1. Global Attributes Global attributes can be used with nearly all HTML elements and provide common functionalities.  Class Attribute   The class attribute is used to define one or more class names for an element. It is often used for s...
Post a Comment
Read more