Chess

More Examples

Use page elements and interactions to create a user interface for prepackaged code.

Play with the example below to see what you can do:

Open this example as a template so you can see how everything works in the Editor. 

This example demonstrates how to use page elements and interactions to create a user interface for prepackaged code.

 

We create a chess game using interactions based on the Garbochess-JS chess engine, an open source chess game implemented in JavaScript. The chess engine resides in the engine.js file, which can be found in the site’s Public code section.

 

The chess board is built from image and box elements that are wired to show which piece is selected and to allow a user to move the pieces when clicked. There are three layers to each square on the board: An alternating color background box, a partially transparent blue selection for the indicator box and an image. When a piece is selected, we toggle the visibility of the selection indicator. When a piece is moved, we change the image URL to an image of the correct piece and show it using the FadeIn animation.


You can find the Garbochess-JS repository and license on GitHub.

Next Steps

  1. Open this example in the Editor to work with the template.

  2. Publish the site.

  3. Learn how to work with examples in Corvid.

Example Code

arrow&v

Example Demonstrates

Public Files

Editor Element APIs

To start using Corvid:  Go to the Wix Editor > Dev Mode > Turn on Dev Mode