Pavel’s Chess corner

My final project of the WDDM program is a chess application. It allows two players to compete with each over the chess board.

I kept the design very simple and was more focused on the functionality. Application prompts user to start the game immediately after page loads. My idea was allow user to start to play without creating an account, subscribing to the service etc.

As soon as there are pair of players waiting for the game, it starts.

I found an interesting technique to use several layers of canvases positioned absolute one on top another. It allows to redraw moves without redrawing the chess board. I used 4 layers: chess board, pieces, legal moves highlight and field highlight.

Screen Shot 2016-02-08 at 7.35.03 PM.png

To code the logic behind the movement of the pieces was not really hard, however it was not easy to code an exceptional moves such as castling, promotion and en passant capture. Also, I found very challenging to account for the draw by threefold repetition and draw by 50 moves rule.

In order to minimize the number of trips to the database I used stored procedures on the database side. It is very convenient, from performance point of view, to encapsulate all the database related logic from my PHP code and keep on MySQL side.

Another challenge was to guarantee sequential execution of AJAX requests. It was not an option to use timer and call the server every several seconds due to inconsistency of execution time of the request. I came up with a nice solution to call AJAX request recursively in it is own callback. That technique guarantees sequential execution of requests and minimizes the delay between them. For example:

Screen Shot 2016-02-08 at 8.26.45 PM

I tried to keep my code as efficient as possible by reusing classes and methods but even though it took my approximately 3000 lines of javascript to finish my project, which I very proud of.

I used YUIdocs to generate my documentation. It helped me to organize my code and even find couple of bugs. Also, I used bower, SASS and gulp during the development, and of course Adobe Illustrator to create wireframe and mockup.

I have some plans how to improve my project: first of all, I would like to practice with web sockets and use it instead of AJAX requests, secondly I would like to to remaster server side of the application. I believe ASP.NET server side is more appropriate for the needs of the application and lastly, I would like to change the design. I hope I will fulfill my plans if I have time and inspiration.

My project is available here.

Overall, I really enjoyed working on the project, as well as to study in WDDM program in general.

And lastly, I would like to thank Humber College faculty for such a wonderful program. Especially big thanks to Thomas for his commitment, brilliant lectures and deep knowledge of HTML5, CSS3 and PHP, which he shared with me and my classmates, also big thanks to Mark for his awesome and inspiring Illustrator classes, and of course to Ben for his CSS3, jQuery lessons and sense of humour.

Sincerely, Pavel

 

 

Advertisements
Pavel’s Chess corner