Chess

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

Code Level

Advanced

Published

 

Example Description

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

Example Code

How We Built It

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.

APIs We Used

Related Articles

Related Examples

Add to Cart Gallery

Let customers to add products to their cart

INTERMEDIATE

Hide and Show Elements

Hide and show elements in response to user interactions

BEGGINER

Hide and Show Elements

Hide and show elements in response to user interactions

BEGGINER

 

This website was designed with Corvid by Wix.