Scribd
Upload
18 views3 pages

Lappy Game

The document outlines a Memory Card Game project where users match pairs of cards by flipping them, with the game ending when all pairs are matched or time runs out. It details the file structure using HTML for layout, CSS for styling, and JavaScript for game logic, including card shuffling and matching. Key features include animated card flips, a timer countdown, and the ability to reset and replay the game.

Uploaded by

shivajiiitan1224
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
18 views3 pages

Lappy Game

The document outlines a Memory Card Game project where users match pairs of cards by flipping them, with the game ending when all pairs are matched or time runs out. It details the file structure using HTML for layout, CSS for styling, and JavaScript for game logic, including card shuffling and matching. Key features include animated card flips, a timer countdown, and the ability to reset and replay the game.

Uploaded by

shivajiiitan1224
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Slide 1: Title Slide

Memory Card Game Project


Explained in Simple Words

Slide 2: What is This Project?

• A simple memory card game.

• Users match pairs of cards by flipping them.

• Game ends if all cards are matched or time runs out.

Slide 3: File Structure

• HTML: Builds the structure.

• CSS: Styles the game (colors, layout).

• JavaScript: Adds game logic (timer, card flip, matching).

Slide 4: HTML Overview

• <!DOCTYPE html> – Declares HTML5.

• <head> – Contains the title, fonts, and styles.

• <body> – Displays the game:

o Timer

o Game board (.cards list)

Slide 5: CSS Styling Highlights

• Uses Poppins font.

• Centered layout with background color.

• Cards arranged in a 4x4 grid.

• Flip animation using rotateY for smooth flipping.


Slide 6: JavaScript: Card Data

• List of image names (each appears twice).

• Used to create the cards.

Slide 7: JavaScript: Game Logic

• shuffleCards(): Randomizes card order and places them.

• flipCard(): Handles flipping cards on click.

• checkMatch(): Checks if 2 flipped cards match.

Slide 8: Timer Function

js

CopyEdit

startTimer();

• 60-second countdown.

• If timer ends before all matches, game ends.

Slide 9: Win or Lose Logic

• Win: All 8 pairs matched.

• Lose: Timer runs out.

• Both show an alert message.

Slide 10: Key Features

Animated card flips


Timer countdown
Matching logic
Game reset & replay

You might also like