- About
- User Experience
- Design
- Features
- Technologies Used
- Deployment & Local Development
- Testing
- Credits
Chess Online is a variant of the classic game chess. In this game, 2 players use different pieces to move around the chessboard and try to capture all of their opponent's pieces.
Each piece has a different set of moves and a different point value if they are captured. The player that captures all of their opponent's pieces (and gets all 52 points) wins!
The game is aimed at people interested in playing chess, that do not have to worry about complex chess rules such as 'En Passant' or 'castling'. The game was created to allow first-time players of chess to understand the basic movement and rules, and also to have fun at the same time.
- I want to know how to control the pieces in the game.
- I do not want to have to learn complex moves in order to play.
- I want to be able to move pieces in the same way that they move in chess.
- I want the game to look like a classic chess game.
- I want to be able to capture my friend's pieces.
- I want the game to have a win condition.
The project uses a very simple colour scheme to match the pieces on a chessboard. The text is black on a white background, to create a strong contrast, the chess pieces are also either fully black or white with a black outline, making it very clear which piece is for a specific player.
The chessboard is alternating white and grey squares, to allow both white and black pieces to contrast well off of the background. The only other colour is the red for highlighting a square to be captured, this is a strong colour to make it clear when a piece is able to be captured, as this is part of the win condition for the game.
The fonts used in this project are taken from Google Fonts.
- The font Acme was used for the headings.
- Exo was used for the remaining text on the project.
- If the fonts from Google Fonts could not be displayed, then 'Sans-serif' was used as a backup font.
The only image files used in the project were for the favicon, which is displayed on all HTML pages.
Chessboard at Game Start - Wireframes:
Chessboard when Capturing a Piece - Wireframes:
A favicon was created to create a consistent brand image between the HTML pages of the site. Also allows the site to be easily recognised in the tabs of the browser.
The favicon uses the same colour scheme and Unicode icon as the pieces on the chessboard.
The navbar is included on all pages of the project. The design is consistent on all pages to provide a consistent user experience. Contains the website title and links to the index.html and the help.html pages.
The links of the navbar are also underlined on hover, to show that they can be clicked.
This page will display when the requested page is not able to be displayed. The link on the error page will navigate to the index.html page. The error page also uses the same header as the other HTML pages to allow further navigation.
The help.html page tells the user what the project is and how to play the game. The page explains the controls such as how to move and how to capture pieces. The page also shows the points value of each piece.
The reset game button will refresh the page when click, this will reset all the pieces to their starting location and will reset the scores. This allows players to restart the game if they have won or would like to retry the game.
The player turn indicator shows which player can currently move their pieces. This will update when the next player can move.
Both players points are displayed underneath the chessboard. The points values are updated after a piece is captured.
The winning player is displayed in a message above the chessboard. This message is hidden until a player wins the game.
When a player clicks one of their pieces on their turn, they will be shown the available squares that the piece can move to, these squares will be highlighted with an 'X'. If no available squares are present, no squares are shown. If anywhere else is clicked except for a player piece, then the highlighted squares are cleared.
The reason that players are not informed when they click an opposing piece with a message such as "It is not your turn", is that it is distracting to the player and will interrupt the flow of the game.
If a highlighted square is clicked on, then the piece will move from its previously occupied square to the new square on the board.
If a square that would be highlighted by a piece, is occupied by an opposing player's piece, then the opposing player's piece is highlighted with an 'X' and the square is changed to red.
If the highlighted capture square is moved to, then the opposing player's piece is removed from the chessboard and the value of the piece is added to the moving player's score.
- HTML5
- CSS3
- JavaScript
- Git:
- Git commands were used for version control.
- GitHub:
- Project was hosted on GitHub and GitHub Pages hosted the live site.
- Gitpod:
- The project was developed using Gitpod development environment.
- CodePen:
- Features were tested on CodePen, to test functions in isolation of the main project.
- Coolers:
- Coolers was used to generate the colour palette for the project.
- Favicon:
- A favicon was generated from this website and applied to the HTML pages.
- Balsamiq:
- Balsamiq was used to create the wireframes for the project.
- Font Awesome:
- The 'Reset Game' icon was taken from the Font Awesome Icons.
- Google Fonts:
- The fonts used in the project were imported from Google Fonts.
- TinyPNG:
- All images in the README and project have been compressed using TinyPNG.
- Am I Responsive?:
- The title image of the README was taken from this site. The image shows the site on multiple devices.
- WAVE:
- The WAVE tool was used to test the accessibility of all pages.
- W3C Validator
- All HTML used in the project was validated using the W3C HTML Validator.
- W3C Jigsaw Validator
- All of the CSS file used in the project was validated with the W3C CSS validator.
- JSHint
- The JavaScript code was validated using the JSHint website tool.
- Chrome Developer Tool - Lighthouse
- Performance, Accessibility, Best Practices and SEO across the project was tested using Lighthouse.
The Chess Online project was deployed using GitHub Pages.
You can view the live site through this link.
Steps to deploy this project using GitHub Pages:
- Navigate to the GitHub repository for this project: CallumDennisIE/chess-online.
- Click on the 'Settings' tab: CallumDennisIE/chess-online/settings.
- Click on the 'Pages' section: CallumDennisIE/chess-online/settings/pages
- Select the 'Main' source from the dropdown.
- Wait a few minutes for the site to deploy.
- The project will be published and a link will be provided to the live site: Example link.
For more information on how to deploy a site with GitHub pages, please click here
Steps to fork this project using GitHub:
- Navigate to the GitHub repository for this project: CallumDennisIE/chess-online.
- Click the 'Fork' button (top right-hand side of the repository page).
For more information on how to fork a GitHub repository please click here
Steps to clone this project using GitHub:
- Navigate to the GitHub repository for this project: CallumDennisIE/chess-online.
- Click on the 'Code' button, located above the project files.
- Select 'HTTPS' as the method to clone the repository.
- Copy the link provided, located under 'HTTPS': https://github.com/CallumDennisIE/chess-online.git
- Open the Terminal in the location you would like the repository to be cloned to.
- Type
git clone
and then the link provided in step 4:
$ git clone https://github.com/CallumDennisIE/chess-online.git
For more information on how to clone a GitHub repository please click here
View the project testing document here.
All code used in the project was created by me for this project.
- Chess.com
- The project is inspired by the chess player on chess.com, Chess Online is an attempt to emulate this website, while aiming at newer players.
- The point values and piece movement rules were taken from the chess.com rules section.