- Utilizes Stockfish Chess AI (in the form of stockfish-js) to generate chess moves for both players client-side
- Before you ask
😄: no, you can't move the pieces yourself! This level of interactivity was beyond the scope of this class project. This is next on my to-do list if I get bored or inspired.
- Before you ask
- Full camera navigation using mouse (click + drag and scroll wheel), keyboard (arrow keys and
+), and mobile gestures (drag to pan, pinch to zoom, two-finger rotate)
- Supports standard chess play - castling, substitution, check, etc.
- Written in vanilla WebGL - no wrapping or abstraction libraries used.
Based on the grading rubric provided in class, this project is worth the full 15 points from the following categories:
- Modeling: 3 points for complex objects
- Light: 4 points for combined, colored light on all surfaces
- The colored lights are subtle, but if you zoom in closely on a piece, you should be able to see a slight red and blue glare reflecting off the pieces and the board.
- Appearance: 2 points for basic texturing
- Navigation/Interaction: 3 points for navigation with the keyboard and mouse (and mobile gestures!)
- Keyframe Animation: 3 points for triggered animations
- Animations are triggered in response to the chess engine's decisions
Total: 15 points
The following options are configurable through URL parameters (i.e.,
msBetweenTurns=1000sets the number of milliseconds to wait between turns. The default is 2000.
moveHistory=...allows the game to start part-way through a game by providing the history of previous moves. The value of this parameter should be a URL-encoded array of move strings.
- Here's an example of starting a game shortly before a substitution
stockfishLog=trueturns on verbose console loging for all interactions with the Stockfish engine
showMetrics=trueadds a framerate graph overlay to the corner of the screen
This project is built with the following technologies:
- Vanilla WebGL for scene rendering
- stockfish-js for chess AI, which utilizes Web Workers
- chess-js for move validation/piece placement and movement/check detection/etc.
- Hammer.js for mobile gesture support
- Sylvester for vector/matrix utilities
- Robert Penner's Easing Functions for animation easing
- Angular 1 and Angular Material for UI interaction
- TypeScript, SASS, Gulp, Webpack, Yarn
- Modernizr for browser feature detection
- Install node.js and yarn
yarnat the root of this repository
- Set up a local webserver to serve the
gulp build:watchto watch for file changes and rebuild automatically
gulp test:watchto run unit tests
- Use the included Yoeman generator to scaffold out new Angular components for this application. Instructions on how to use this generator can be found in the generator's README.
- IE 11
Note that this project has not been thoroughly tested in browsers other than Chrome. For best results, use Chrome.
ChessJS was built with a lot of help. A big thanks to following sources:
- Chess piece
.obj's from http://blender.freemovies.co.uk/modelling-making-a-chess-set/
- Table model from http://www.turbosquid.com/FullPreview/Index.cfm/ID/167072
- Wood textures from http://www.myfreetextures.com/ and http://bgfons.com/download/1582
- Green background from http://www.zingerbug.com/background.php?MyFile=green_parchment_paper_wallpaper_texture_seamless.php&ID=C732.php
- "Chess" font for chess icons in 2D mode from http://www.dafont.com/chess.font
Here's what I used to make