🎮 GameZone

GameZone Where Every Click Sparks Power...

           

📝 Project Introduction

GameZone is a browser-based gaming platform built using HTML5, CSS3, and JavaScript. It brings together multiple classic mini-games in a single responsive web application.

Players can create a local player profile and enjoy games such as Tic Tac Toe, Memory Match, Snake, and 2048. Scores are stored using HTML5 Local Storage, allowing users to track their progress across sessions.

The application features a modern dark-themed interface, an interactive game library, embedded tutorial videos, and smooth animations, creating an engaging gaming experience.

📸 Screenshots

A glimpse into the GameZone web application interface.

Home Page	Games Page

Memory Match	2048 Tutorial

📽️ Demo

Watch the complete GameZone walkthrough, including gameplay, score tracking, and the responsive user interface.

🎥 Watch the GameZone Demo

✨ Features

🎮 Gameplay

• Player Authentication: Register and log in using a local profile.
• Score Tracking: Save and update game scores automatically.
• Game Tutorials: Learn each game through embedded video guides.
• Multiple Mini-Games: Play Tic Tac Toe, Memory Match, Snake, and 2048.

🎨 User Interface

• Interactive Game Library: Browse games through animated cards.
• Modern Theme: Dark interface with smooth animations and hover effects.
• Responsive Layout: Optimized for all screen sizes.
• Simple Navigation: Dedicated Home, Games, About, and Contact pages.

🛠️ Tech Stack

• Frontend: HTML5, CSS3, JavaScript.
• Storage: HTML5 Local Storage.
• Embedded Media: YouTube Videos.

📐 Architecture

The application follows a client-side architecture, where gameplay, navigation, and score management are handled within the browser.

flowchart TD
A[Player] --> B[Web Browser]

B --> C[Home Page]

C --> D[Authentication]
C --> E[Games]
C --> F[About Us]
C --> G[Contact Us]

E --> H[Tic Tac Toe]
E --> I[Memory Match]
E --> J[Snake]
E --> K[2048]

H --> L[Score Manager]
I --> L
J --> L
K --> L

L --> M[(Local Storage)]

Loading

Client-Side Components

Component	Description
User Interface	HTML pages with CSS styling and responsive layouts.
Game Engine	script1.js manages gameplay, scoring, and Local Storage for game scores.
Application Logic	app.js handles navigation, interactive UI effects, and footer loading.
Player Authentication	login.html manages player registration, login, and PIN validation using Local Storage.

📂 Project Structure

GameZone/
├── index.html              # Home page
├── login.html              # Authentication
├── games.html              # Games page
├── about.html              # About page
├── contact.html            # Contact page
├── footer.html             # Shared footer
│
├── css/
│   ├── style.css           # Main styles
│   └── responsive.css      # Responsive styles
│
├── js/
│   ├── app.js              # UI logic
│   └── script1.js          # Game logic
│
└── images/                 # Project assets

🚀 Installation

Since GameZone is a client-side web application, no additional dependencies are required.

1. Clone the Repository

git clone https://github.com/Rdeepthiacharya/GameZone.git
cd GameZone

2. Launch the Project

1. Open the project folder in your preferred code editor.
2. Run the project using a local web server (for example, Live Server).
3. Open the generated local URL in your browser.

Note: Running the project through a local web server is recommended because it uses fetch() to load the shared footer.html component.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🎮 GameZone · Built with HTML, CSS & JavaScript