Example Description
This example demonstrates how to use page elements and interactions to create a user interface for prepackaged 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
Open this example in the Editor to work with the template.
Publish the site.
Learn how to work with examples in Velo.
Related Examples
Did this help?
|
Thanks for your feedback!
Hide & Show Elements
Hide and show elements in response to user interactions.
Intermediate
Hide and Show an Image
Show and hide an image according to the clicked button.
Beginner
Image and Text Animation
Use wix-animations API to animate images and text.
Intermediate