Chess Game App in Web
- 10 Devlogs
- 65 Total hours
A chess game inside the web
A chess game inside the web
I am currently working on building a bot you can play against. It is very tough to find another person to play with especially on the same screen/device so this could fix that issue very easily. The bot will be stockfish and make moves for either black or white. For now, I will code it just for black and make it for white later. This devlog is for me to log my hours, but the bot is nearly finished and will take me a little more time. This also introduces the need to switch from white to black, so in the future I will be adding that feature as well.
Today I added the insufficient material feature. It took me a while to figure out because I was trying to use formulas and math to make the code analyze if a certain set of pieces can lead to a checkmate, but I realized that instead of calculating, I can just find which combinations of pieces cannot lead to checkmate, and then list those pieces in the code for the game to constantly check, and then determine if its a stalemate/draw.
Below is the combinations of pieces that cannot lead to a checkmate that my code checks and accounts for:
So far, I worked on fixing the bug in my code which made my pieces disappear as mentioned last time. I am also currently working on trying to add sound effects to make the game more interesting to play and use. This devlog so that I log my hours and I will be posting another one soon.
Today, I made some decent functionality changes. It took very long because I couldn’t figure it out for a while because I had to do research on how to, but I figured out how to do the en passant, threefold repetition, and 50 move rule by updating the JS. I also fixed the previous issue where when the player is in check by another, they can’t block it with another piece, even if they should be able to. I was also able to fix this issue as well. Unfortunately, the logic of JS I made for the en passant, threefold repetition and 50 move rule introduced a new problem of erasing any piece that can be taken. For example, if a pawn is able to take another and I click on that pawn to see its possible moves, and then click on another piece, the opposing pawn disappears. I didn’t have enough time to fix the issue and will be working on it another time.
I did a lot of work today in my chess engine. I had a lot of time and I was able to do a decent bit of research and use AI to find resources on making an old video game/arcade style design to the game board. Because of this, I spent a lot of time on CSS and JS, coding to fix the prior issues in my code as well as making changes so that it looks as good as it can. Firstly, the pieces can finally be moved only where they should. Before, any piece could move anywhere by clicking the square, unless it was already occupied. Now I fixed the javascript code so that the code checks if that piece can legally move there and stops it otherwise. I also added the ability to castle for both black and white for more functionality. In addition, I also made the resign feature work for both black and white, as it changes who has the ability to resign based on if the current turn is White’s or Black’s. If it is white, for example, the resign button will say Resign (White) so white loses and black wins, and vice versa. Because the game already has so much code on checking pieces and their positions, I figured I could also add a list on the side that says which pieces have been moved so far. I didn’t exactly how to put it in algebric notation so after researching, I had the idea of basically taking the position of the piece’s sqaure, then use javascript to convert into the grid number, and then add the letters in front if the piece moved is any piece other than a pawn. The list also shows castling, checks and checkmates. The board was looking really bland so I did research on ways to make it an arcade/old style like I said before. I first starting to make a scanline on the screen by using CSS and duplicating gradients on the screen. It is very hard to see but it is there. Next, I made the game boxes better by making them seamless when placed next to each other. I also made the hover highlight the boxes instead of making them bigger like before. I also added more diagonal scanlines in them as well. Next, I made as many elements neon to make it bright. As I was making this I also research online that the scroll bar in webpages can be edited. So when the move list is truncated, it shows custom white scroll bars as well. I also found that you can make really cool effects when hovering over buttons, so using CSS I also made the buttons have a horizontal box that goes over to show the animation of the color changing, and I added angled boxes in the back of it that animate and lift, making the button look like its coming up. I will probably add more functionality next time.
This is my third update for the chess game. I wanted to add some more functionality to the game with features in more popular chess game engines like Chess.com where it has draw and resign features. I also added a restart game feature since it is single player, but currently there is an issue where the pieces persist at their prior position even though according to the game, they are not there. They button CSS is also not aligned and good compared to the gradient style with the rest of the page, so for the future, I plan on making it one single theme and keeping the page more organized.
Today, I worked on making the app better by making it figure out checks, checkmates, and stalemates. I used AI to understand how to do this, and by using resources online, I also figured out how to input gradients and better CSS functionality for the app to look better. The code for checks and checkmates mainly relies on the JS where it looks at and detects if any legal moves are left for the king to continue in play. I still haven’t added functionality for it to stop pieces from going into positions they shouldn’t be able to.
Overall that is the main things I did today.
today I made my first chess game board using this tutorial: https://www.youtube.com/watch?v=SS5amIbX0Mo&list=LL&index=3&t=56s
using it I was able to follow along and run the code and use google to understand what each piece of code does to the overall project. Some limits to the project are that the game is able to move the pieces but does not recognize checks or checkmates. I will do more research and try to improve it as much as I can.