Check out my
new book!
HTML5 Games book
3D Javascript Chess (WIP)

Here is a work-in-progress 3D Javascript chess game, utilizing the 3D Canvas/Javascript renderer I've posted about before.

Since there are just too many polygons to render everything from scratch every time something changes, each piece is rendered unto its own canvas element. This means that we can move and manipulate any piece without having to redraw the entire scene. Unfortunately this has broken excanvas support for Internet Explorer, so until I get that fixed it's only for browsers with real canvas support (FF, Opera, Webkit)

In the future, I want to add some texturing to the pieces and maybe the board as well to make it look nicer. Also animated movement and perhaps even make use of some particle effects or something for when pieces are captured.

Click and drag the mouse to rotate the board. Note that when rotating the board all the pieces are hidden to allow smooth rotation. Mouse support for selecting/moving pieces will also be added in the near future, but for now you have to use the keyboard: Use 2,4,6,8 on the numeric keypad to move the selector square and 5 to select a piece and move it (press 5 again on the selected piece to deselect it).

There is no CPU opponent (yet). I'll probably see if I can find another suitable chess engine and borrow from that. Until then, the player controls both black and white.

It also needs a bit of GUI work. Key things like showing which side is up and a moves list are missing.

On the chess part, it also needs some work. Movement and capturing of enemy pieces should work alright, but none of the special moves (castling, en passant, promotion) are implemented and the game doesn't know about check/checkmate (to "end" the game, just capture a king).

Check it out here
⇓ 6 comments mud

Very cool, you've certainly been productive lately.

April 20, 2008 at 1:08 PM
Anonymous

Renders just fine, but I cant figure how to move pieces (5 just selects/deselects).

btw, I'm using ff2.0

April 27, 2008 at 11:28 AM
Jacob Seidelin

When you have selected a piece, move to the target square and press 5 again.

April 27, 2008 at 12:58 PM
Jacob Seidelin

Oh, haha. Seems I left in a couple of calls to the Firebug console.log function, causing it to throw errors when moving pieces (unless you have FB, of course). Fixed.

April 29, 2008 at 2:12 AM
Anonymous

AOK Mobile PhoneAOK Mobile Phone
Watch Mobile Phonewatch mobile phone
detox foot bathdetox foot bath

June 5, 2008 at 7:27 PM
Anonymous

Any chance of implementing castling?

July 8, 2009 at 8:01 PM
Post a Comment