This game was my first js program and was made as part of my full stack course. Off course I decided to make something complicated for my experience and despite it was working in the end, the code is messy and spagetti, I can see it now, but I was really proud of finishing it at the time. Now, I can use some of my experience to redo the game and add some features.
Recently I started to experiment with lichess (lichess.org) chess bot and decided to create my own bot. However, I think I decided to start creating a better bot for my own checkers game. Because the messy code, I decided to make a plan:
- First need to redo the messy code, so I can thing about new features
- Create a easy protocol to comunicate with the board
- Create a better bot to play against users (the one I created was just a random player)
- I have being trying to find an excuse to create multiplayer using sockets, so this can be a great opportunity.
-
To be able to add a bot, I need the board to communicate with the bot by receiving and sending board information and moves.
-
Board: the board will be a interface between engine and user, it will receive coordinates to update the pieces for the UI
-
Game: Game will control the turns, winner and time
-
Engine: Will receive a board state and will return a move
-
The Checker's Game is a game that consists of a board with 64 squares, 32 of which are occupied by 16 black and 16 white pieces. The pieces are placed in the 12 squares closest to each player. The objective of the game is to capture all the opponent's pieces or to block them so that they cannot move. There are many variations of the game. The rules implemented in this project are based on the international rules but using a 8x8 board. The game code was developed in javascript and the interface was developed in HTML and CSS.
Visit and play the live version of the game here
The game can be played on any device, including small mobile phones as smaller as (250 x 300 px).
-
Site goals
- The main goal of the site is to provide a fun and interactive game for the user to play.
- To have a pleasant wood theme that is easy to use and navigate.
- To have a responsive design that is easy to use on any device.
- With a intuituve menu that is easy to use and navigate.
-
User goals
- The user goals are to have a fun and interactive game to play.
- The user can play the game on any device.
The technologies used in this project were HTML, CSS and JavaScript. The HTML was used to create the structure of the page, the CSS was used to style the page and the JavaScript was used to make the entire game work.
* HTML
* CSS
* JavaScript
* GitHub
* GIMP
The main page is the first page that the user sees when they visit the site. It has four buttons, one to start the game, one to see the rules, one to see the options and one to see the results.
Once the player has started the game, the the Start Game button will be replaced by a button to restart the game. All menus pages have a button to return to the main page and a button to close the menu.
The options menu allows the user to change the game settings. The user can change the sound On/Off and the higlight On/Off. The highlight is the highlight of the possible moves of the selected piece. The sound is the sound of the pieces moving and the sound of the pieces being captured.
The rules menu shows the rules of the game. The rules are based on the international rules but using a 8x8 board. The text can be scrolled up and down.
The results menu shows the results of the game. The results are the number of games won by the player and the number of games won by the computer. The results are saved in the local storage of the browser.
The game page is where the game will be played, it has a board with 64 squares, 32 of which are occupied by 16 black and 16 white pieces. The pieces are placed in the 12 squares closest to each player. The objective of the game is to capture all the opponent's pieces or to block them so that they cannot move. Once in the Game, the user can go back to the menu using the small cog icon in the top right corner of the screen.
The website was tested on a desktop computer and a mobile phone. Also, W3C and Jigsaw validation was used to validate the website HTML and CSS.
W3C Validation:
W3C -->
Jigsaw Validation:
Jshint validator was used to validate the JavaScript code.
One warning here but was part of the implementation of the game. Functions declared within loops referencing an outer scoped variable may lead to confusing semantics.
Lighhouse mobile and desktop testing:
-
Based on the checkers rules, the player needs to capture as many pieces as possible. The game is not programmed to do that neither to check if the player is taking the best possible move. The game is programmed to force a take.
-
The computer is not programmed to take the best possible move. The computer is programmed to take a random piece.
-
It was reported to crash in Android, but I was not able to reproduce the error.
- Implement a better AI for the computer.
- A timer to limit the time of each player.
- A smoother animation for the pieces moving.
- In the future, a multiplayer mode.
- The game was deployed on GitHub pages.
- Stack Overflow
- Guido, my mentor
- w3Schools
- This channel that teaches cheker's https://www.youtube.com/watch?v=WD3NTNQElew
- developer.mozilla.org (where I passed most of my time)
- My mentor for saving me from starting in a wrong way, which would make the project impossible to finish.
- My colleagues for the slack channel.
- The tutors for the help.
- My last hackathon team which tested the game and gave great feedbacks