A fully interactive, browser-based Chess Game built completely from scratch. This project was developed to master complex application logic, 2D grid/matrix manipulation, and object-oriented programming principles using Vanilla JavaScript.
🚀 Live Demo: View the live game on Vercel
- Classic Chess Board: A properly rendered 8x8 grid utilizing CSS Grid, complete with alternating dark and light squares.
- Piece Movement Logic: Interactive drag-and-drop or click-to-move functionality for the chess pieces.
- Turn-Based System: Built-in state management that alternates turns between White and Black players.
- Dynamic DOM Manipulation: Pieces are dynamically rendered and updated on the board based on the underlying JavaScript array state.
- Clean UI: A minimalistic and responsive design that focuses on the gameplay experience.
- Markup: HTML5
- Styling: Vanilla CSS3
- Logic: Vanilla JavaScript (ES6+)
- Deployment: Vercel
.
├── index.html # The main game board structure
├── style.css # Board styling, piece styling, and responsiveness
├── script.js # Core game logic, matrix state, and move validation
└── assets/ # (Optional) SVG or PNG files for the chess pieces
💻 Getting Started (Local Development) Because this project is built with vanilla web technologies, you can easily run it locally without installing any complex package managers.
Clone the repository:
git clone [https://github.com/malaikaahsan/JavaScript-Chess-Game-HTML-CSS-JS.git](https://github.com/malaikaahsan/JavaScript-Chess-Game-HTML-CSS-JS.git)
Navigate to the folder:
cd JavaScript-Chess-Game-HTML-CSS-JS
Play the game:
If you are using ES6 Modules, right-click index.html and open it with the Live Server extension in VS Code.
Otherwise, simply double-click the index.html file to open it directly in your web browser.
👨💻 Author Malaika Ahsan
GitHub: @malaikaahsan