ChessProject: web-based chess game

Chess Game Demo Project

Overview: This demo project demonstrates my proficiency in HTML5, CSS3, and JavaScript by creating a fully functional, interactive chess game. It highlights my ability to integrate core web technologies to develop a user-friendly and visually appealing application.

HTML5: The structure of the chessboard and interface is crafted using semantic HTML5 elements, ensuring a clean and accessible markup. The board is represented as a grid of <div> elements, each representing a square, with specific attributes for identification and functionality. Additional elements such as buttons and informational sections are added to enhance user interaction and provide game controls.

CSS3: The visual presentation of the chessboard and pieces is achieved through CSS3. I utilized a combination of flexbox and grid layouts to ensure a responsive and consistent design across different devices. Each piece is styled with custom SVG icons or background images, with transitions and hover effects enhancing the user experience. The board alternates between light and dark squares, following traditional chess aesthetics. Additional animations are applied to piece movements to simulate a real game environment.

JavaScript: The game logic is implemented in JavaScript, handling everything from piece movement to game rules and state management. I used an object-oriented approach to model the chess pieces, their positions, and interactions. Event listeners detect user actions, validating legal moves and updating the board accordingly. Special rules like castling, en passant, and pawn promotion are also included to ensure a complete gameplay experience. Additionally, JavaScript manages the UI updates, such as highlighting possible moves and providing feedback for illegal moves.

Features:

Drag and Drop Interface: Intuitive piece movement using drag-and-drop functionality.

Move Validation: Real-time validation of moves according to chess rules.

Game Status: Dynamic display of game status, including turn indication and check/checkmate alerts.

Responsive Design: The layout adapts seamlessly to various screen sizes and devices.

Custom Styling and Animation: Smooth transitions and visual feedback for piece movements and captures.

Conclusion: This chess game project is a comprehensive demonstration of my ability to integrate HTML5, CSS3, and JavaScript to build a complex, interactive web application. It showcases my technical expertise in frontend development, as well as my attention to detail in creating a polished and user-friendly experience.

Repo: https://github.com/NicolasKoriakos/ChessProject