♟️ Chess Game

A fully functional chess game built from scratch using vanilla HTML, CSS, and JavaScript. New to chess? Try learning basic openings and tactics to improve your skills!.

🎯 Live Demo

Play the Game Here (https://mohammadhamza96.github.io/Chess-/)

✨ Features

Core Gameplay

• 🏁 Complete Chess Board - Standard 8x8 grid with proper piece positioning
• ♔ All Chess Pieces - King, Queen, Rook, Bishop, Knight, and Pawn with unique movements
• 🎮 Interactive Gameplay - Click to select pieces and make moves
• ⚔️ Move Validation - Ensures only legal chess moves are allowed
• 👑 Check Detection - Alerts when kings are in check
• 🏆 Checkmate & Stalemate - Automatic game end detection

Special Chess Rules

• 🏰 Castling - Both kingside and queenside castling
• 👻 En Passant - Special pawn capture move
• 🎖️ Pawn Promotion - Pawns transform to other pieces upon reaching the end
• 📋 Move History - Track and display all moves made

User Experience

• 🎨 Beautiful Design - Modern, responsive interface with smooth animations
• 📱 Mobile Friendly - Works seamlessly on desktop and mobile devices
• 🔄 Game Controls - New game and undo functionality
• 📊 Game Status - Real-time display of current player and game state
• 🏴‍☠️ Captured Pieces - Visual display of captured pieces for both players

🛠️ Technologies Used

• HTML - Semantic structure and game layout
• CSS - Styling, animations, and responsive design
• JavaScript - Game logic, DOM manipulation, and user interactions
• Font Awesome - Icons for enhanced user interface

🚀 Getting Started

Prerequisites

• A modern web browser (Chrome, Firefox, Safari, Edge)
• Text editor (VS Code recommended)
• Basic understanding of HTML, CSS, and JavaScript

Installation

1. Clone the repository

   git clone https://github.com/your-username/chess-.git

2. Navigate to project directory

   cd chess-game-

3. Open with Live Server (VS Code Extension)

   • Right-click on index.html
   • Select "Open with Live Server"

4. Or simply open in browser

   • Double-click index.html
   • Game will load in your default browser

🎮 How to Play

1. Start the Game - White pieces move first
2. Select a Piece - Click on any piece to see available moves
3. Make a Move - Click on a highlighted square to move
4. Special Moves - The game automatically handles castling, en passant, and pawn promotion
5. Win the Game - Checkmate your opponent's king to win!

📁 Game Structure

chess-game
│
├── index.html          # Main HTML structure
├── styles.css          # All styling and animations
├── chess.js           # Game logic and functionality
└── README.md          # Project documentation

🧠 Key Learning Concepts

This project demonstrates understanding of:

JavaScript Concepts

• Object-Oriented Programming - Game state management with classes
• Event Handling - User interactions and game controls
• DOM Manipulation - Dynamic board updates and piece movements
• Algorithm Implementation - Move validation and game logic
• State Management - Tracking game progress and history

CSS Techniques

• CSS Grid - Chess board layout
• Flexbox - Responsive component arrangement
• Animations - Smooth transitions and hover effects
• Responsive Design - Mobile-first approach

Web Development

• Semantic HTML - Accessible and meaningful structure
• Modern CSS - Custom properties and advanced selectors
• Performance - Efficient DOM updates and event handling

🔧 Technical Implementation

Chess Logic Highlights

• Move Validation Engine - Validates moves according to official chess rules
• Check Detection Algorithm - Efficiently determines when kings are in check
• Game State Management - Tracks board position, player turns, and game status
• Special Move Handling - Implements complex rules like castling and en passant

Code Quality Features

• Modular Design - Well-organized, readable code structure
• Comprehensive Comments - Detailed explanations for learning purposes
• Error Handling - Graceful handling of invalid moves and edge cases
• Responsive Architecture - Adapts to different screen sizes seamlessly

🎓 Educational Value

This game serves as an excellent learning resource for:

• Web development fundamentals
• JavaScript programming concepts
• Game development principles
• User interface design
• Problem-solving and algorithm implementation

🤝 Contributing

While this is a university project, suggestions and feedback are welcome:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/improvement)
3. Commit your changes (git commit -am 'Add some improvement')
4. Push to the branch (git push origin feature/improvement)
5. Open a Pull Request

📝 License

This project is created for enhancing your chess skills . Feel free to use it as a reference for learning web development and game programming concepts.

🌟 If you found this game helpful, please give it a star!

Happy Coding! ♟️✨