███████╗████████╗ █████╗ ████████╗██╗ ██████╗ ██████╗██╗ ██╗███████╗███████╗███████╗ ██╔════╝╚══██╔══╝██╔══██╗╚══██╔══╝██║██╔════╝ ██╔════╝██║ ██║██╔════╝██╔════╝██╔════╝ ███████╗ ██║ ███████║ ██║ ██║██║ ██║ ███████║█████╗ ███████╗███████╗ ╚════██║ ██║ ██╔══██║ ██║ ██║██║ ██║ ██╔══██║██╔══╝ ╚════██║╚════██║ ███████║ ██║ ██║ ██║ ██║ ██║╚██████╗ ╚██████╗██║ ██║███████╗███████║███████║ ╚══════╝ ╚═╝ ╚═╝ ╚═╝ ╚═╝ ╚═╝ ╚═════╝ ╚═════╝╚═╝ ╚═╝╚══════╝╚══════╝╚══════╝
A lightweight chess game built with pure vanilla web technologies - no frameworks, no libraries, just clean code.
Play Now | View Source | Report Issue
- Overview
- Features
- Demo
- Setup and Installation
- How to Play
- Code Structure
- Documentation
- Deployment
- Future Enhancements
- Contributing
- License
Static Chess is a fully functional chess game playable in a web browser. It is built using pure vanilla JavaScript, HTML, and CSS, with no external frameworks or libraries. The game features standard chess rules, move validation, check/checkmate detection, move history, and game state persistence using localStorage.
It is designed to be simple, lightweight, and easily deployable on static hosting platforms like GitHub Pages.
Core Features
- Standard Chess Rules: Implements all standard piece movements (Pawn, Rook, Knight, Bishop, Queen, King)
- Special Moves: Supports castling (kingside and queenside), en passant, and pawn promotion
- Move Validation: Prevents illegal moves based on piece movement, obstacles, and check rules
- Check/Checkmate Detection: Identifies check situations and declares checkmate when appropriate
- Stalemate Detection: Detects stalemate conditions (no legal moves, but not in check)
- Local Multiplayer: Two players can play against each other on the same device
- Visual Feedback:
- Highlights the selected piece
- Shows possible legal moves for the selected piece
- Highlights the king when in check
- Highlights the last move made
- Move History: Displays moves in standard algebraic notation (SAN)
- Game Persistence: Automatically saves game state to
localStorage - Responsive Design: Adapts layout for both desktop and mobile devices
- Coordinate Toggle: Option to display board coordinates
- Professional UI: Clean, minimalist design with subtle animations and visual cues
- Customizable Settings: Toggle visibility of coordinates, move indicators, and highlights
UI Features
- Elegant Board Design: Professional-looking chess board with subtle texturing
- SVG Chess Pieces: High-quality vector graphics for consistent piece rendering across all browsers
- Responsive Layout: Adapts to different screen sizes while maintaining playability
- Visual Clarity: Clean, uncluttered interface that focuses on the gameplay
- Sophisticated Colors: Carefully selected color palette for optimal contrast and reduced eye strain
- Subtle Move Indicators: Non-intrusive indicators for possible moves and last move played
- Animated Pieces: Smooth animations enhance the playing experience
- Settings Panel: Customizable display options with toggle switches
- Mobile-Friendly Design: Works well on touchscreens with appropriate sizing
The game features an elegant, professional-looking interface with a dark theme and subtle visual cues:
Game interface without settings panel (left) and with settings panel (right)
-
Clone the repository:
git clone https://github.com/TMHSDigital/Static_Chess.git cd Static_Chess -
Open
index.html: Simply open the file in your web browser.
That's it! No build process or dependencies are required.
- Open
index.htmlin your browser - The game starts with White's turn
- Click on a piece to select it and see possible moves
- Click on a highlighted square to move the selected piece
- The board updates, move is added to the Move History, and turn switches
- If a move results in check, the opponent's king will be highlighted in red
- Game ends with checkmate or stalemate
- Click "New Game" to reset the board
- Toggle "Show coordinates" to display board coordinates
- Game state is saved automatically to localStorage
View Project Structure
Static_Chess/
├── index.html # Main HTML entry point
├── css/ # CSS styles
│ ├── style.css # General page styles
│ ├── board.css # Chessboard specific styles
│ └── pieces.css # Chess pieces styles
├── js/ # JavaScript logic
│ ├── config.js # Configuration and feature flags
│ ├── utils.js # Utility functions
│ ├── pieces.js # Piece definitions and movement rules
│ ├── board.js # Board rendering and interaction
│ ├── game.js # Core game logic
│ ├── main.js # Application entry point
│ ├── drag.js # Drag and drop functionality
│ ├── ai.js # AI opponent
│ └── promotion.js # Pawn promotion UI
├── assets/ # SVG files for chess pieces
│ ├── wp.svg, bp.svg # White and black pawns
│ ├── wr.svg, br.svg # White and black rooks
│ ├── wn.svg, bn.svg # White and black knights
│ ├── wb.svg, bb.svg # White and black bishops
│ ├── wq.svg, bq.svg # White and black queens
│ └── wk.svg, bk.svg # White and black kings
├── docs/ # Documentation
│ ├── ARCHITECTURE.md # Architecture and design documentation
│ └── ROADMAP.md # Development roadmap
└── LICENSE # Apache 2.0 License file
The project follows a clear separation of concerns:
index.html: Main structure and layout- CSS files: Visual presentation and animations
- JS files: Game logic and behavior
config.js: Feature flags and game settingsutils.js: Helper functions like coordinate conversionspieces.js: Piece objects and basic movement rulesboard.js: DOM manipulation for the board interfacegame.js: Core chess logic including special moves, check detection, etc.main.js: Bootstraps the application- Additional files for upcoming feature implementations
- SVG assets: Vector graphics for all chess pieces, ensuring consistent rendering across browsers
- Documentation: Architecture guides and development roadmap
The project includes comprehensive documentation to help developers understand the architecture and implement new features:
- Architecture Documentation: The
docs/ARCHITECTURE.mdfile explains the component interactions, data flow, and state management approach. - Development Roadmap: The
docs/ROADMAP.mdfile outlines planned features, priorities, and implementation timeline. - Code Comments: All files include thorough JSDoc comments explaining functionality and usage.
- Feature Implementation Guides: The architecture document includes detailed guides for implementing each planned feature.
To contribute to the project or implement new features, please review these documentation files first.
Since this is a purely static website, it can be easily deployed on any static hosting service.
GitHub Pages Deployment:
- Push your project to GitHub
- Go to repository settings
- Navigate to "Pages" section
- Set source to your preferred branch
- Set folder to
/ (root) - Your site will be available at
https://tmhsdigital.github.io/Static_Chess/
See the Development Roadmap for a detailed plan of upcoming features.
Planned Features
- Drag and Drop: Allow moving pieces by dragging
- AI Opponent: Implement basic chess AI using minimax algorithm
- Promotion Choice: UI for selecting which piece to promote a pawn to
- Game Timer: Optional chess clock functionality
- Sound Effects: Audio feedback for moves and events
- Undo Move: Ability to take back the last move
- Multiple Saved Games: Save and load multiple games
- Advanced Draw Detection: Implement threefold repetition and fifty-move rule
- Full SAN Implementation: Complete algebraic notation with disambiguation
Contributions are welcome! Please check the Development Roadmap for planned features and follow these steps:
- Fork the repository
- Create a feature branch
- Implement your changes following project coding standards
- Submit a pull request
For major changes, please open an issue first to discuss what you would like to change.
This project is licensed under the Apache License 2.0 - see the LICENSE file for details.
Made with ❤️ by TMHSDigital