HTML interactive chessboard for use when presenting a roleplay chess match onstage Written by Alison Bird, Andrey Zholudok
Table of Contents
- User Guide
Cosplay Chess is a live-action roleplay performance where persons dress as characters and act as chess pieces on a board. The game is acted on stage in real-time with music and other visual components. The Cosplay Chess Board Program is designed to display the current state of the board to the audience and provide background visuals during the fights that occur when a piece is taken.
- CosplayChessboard.html – The main chess program. Contains all program logic.
- background.png (1920×1080) – shown behind the chessboard during the match.
- fightbackground.png (1920×1080) – shown when two pieces are called out for fighting
- attackvideo.mp4 (at least 2 min) – triggered during a fight for one video-based super attack
- participants (300×300) – pictures of the characters
Confirm with the Chess coordinator which team is on stage left (first) and stage right (second). There is an orientation variable that can be set to “left” or “right” to position A1. Default is left.
Design a background and fighting background. Simply copy-paste the images into the directory and rename to background.png or fightbackground.png as needed.
If there is going to a special attack video, copy-paste the MP4 video into the directory and rename to attackvideo.mp4. Any additional videos need to be played by Tech Ops in the room.
Collect images of all the participants. 300×300 or 400×400 work best. Follow the naming convention for the pieces:
TEAM 1 (STAGE LEFT, ENTERS FIRST) piece 1 = top rook piece 2 = top knight piece 3 = top bishop piece 4 = QUEEN piece 5 = KING (ENTERS LAST) piece 6 = bottom bishop piece 7 = bottom knight piece 8 = bottom rook piece 9 = pawn piece 10 = pawn piece 11 = pawn piece 12 = pawn piece 13 = pawn piece 14 = pawn piece 15 = pawn piece 16 = pawn TEAM 2 (STAGE RIGHT, ENTERS SECOND) piece 17 = pawn piece 18 = pawn piece 19 = pawn piece 20 = pawn piece 21 = pawn piece 22 = pawn piece 23 = pawn piece 24 = pawn piece 25 = top rook piece 26 = top knight piece 27 = top bishop piece 28 = QUEEN piece 29 = KING (ENTERS LAST) piece 30 = bottom bishop piece 31 = bottom knight piece 32 = bottom rook
- Open the HTML in Chrome. Hit F11 to expand to full screen. Hit CTRL+F5 to redraw the program
- As pieces are announced, click on the squares they stand on. They can be clicked in any order.
- If the coordinator uses a PowerPoint to introduce pieces, pre-click all the pieces in full screen before kicking off the PowerPoint.
- Make sure the AV technical operations team cuts the feed to the center screen before switching from PowerPoint to the Chessboard
- To select a piece: click the piece once. A green boarder will appear around the selected piece. To de-select, single click a selected piece. The green boarder will disappear.
- To move a piece: Select a piece and then click on a new square.
To attack a piece: select the attacking piece and click on the piece being attacked. This will trigger:
- Both pieces will be sent to the “Fight Screen”.
- Click anywhere on the Fight Screen to return to the chess board.
- The attacking piece will automatically replace the attacked piece on the board.
- The attacked piece will be sent to their assigned space in the graveyard.
To use the special video attack, set up a standard attack. Then:
- Click on the gold star in the middle of the screen
- This will launch a modular window with the video
- To exit the video, click the “X” in the top right corner
If you click any two pieces on screen that are on the same team, they will swap places, regardless of whether they are on the board or in the graveyard. This can be used for the following moves:
Castle: Select the piece moving and click on a piece that is on the same team. The two pieces will swap places.
Pawn Upgrade: click on the pawn on the board and click on the piece in the graveyard that they are being upgraded to (i.e. queen).
- Pawn will be sent to the graveyard
- Upgraded piece will return to the board
NOTE: Any piece can also be returned to the board WITHOUT a swap. Click the piece in the graveyard and click any empty space on the board.
To put the entire screen into shadow and display “Cosplay Chess” across the middle:
- Click anywhere on the background to enact the Cosplay Chess shadow (e.g. for pauses, beginning, or end)
- Click anywhere on the shadow to return to the main board