project-90a0a215

byMerington BTor

Create a fully self-contained HTML game **"Bashni (Tower Checkers)"** for two players. Everything must work in a **single HTML file** (HTML + CSS + JavaScript), with **no external libraries** and **no Internet connection** required. # Core Requirements * 8×8 board. * 12 white and 12 black pieces. * Play only on dark squares. * White moves first. * Highlight all legal moves. * Highlight all possible captures. * Prevent any illegal moves. * Fully support multiple captures in a single turn. * Display the winner when the game ends. * "New Game" button. * "Undo Last Move" button. # Rules Use the rules of **Russian Draughts**, but with the mechanics of **Bashni (Tower Checkers)**. ### Movement * A regular man moves one square diagonally forward. * A king moves any distance diagonally. * Capturing is mandatory. * If multiple capture sequences exist, the player may choose any of them. * Men capture both forward and backward. * Kings capture over any distance diagonally. * After a capture, if another capture is available with the same tower, the turn must continue. * If, during a capture sequence, a man reaches the last rank, it is **immediately promoted to a king** and must continue capturing as a king during the same turn. # Bashni (Tower Checkers) Rules This is the most important part. * A captured piece is **NOT removed from the board**. * Instead, it is placed **under the capturing piece**, forming a tower. * A tower moves as a single piece. * The movement type of a tower is determined **only by its top piece**. * If the top piece is a man, the tower moves as a man. * If the top piece is a king, the tower moves as a king. * When a tower is captured, **only its top piece is removed**. * The remainder of the tower stays on the same square. * If removing the top piece reveals a piece of the opposite color, control of the tower immediately changes to that player. * If a king becomes exposed inside the tower, it regains its king status and determines the movement of the tower. # Capture Sequence Rules During a capture sequence: * Tower ownership changes are **not applied until the entire capture sequence is finished**. * Towers that have been captured become **gray (inactive)** until the end of the capture sequence. * A tower **cannot be captured more than once during the same turn**, even if it changes ownership after the sequence. * At the end of the capture sequence: * Remove the top piece from every captured tower. * Update tower ownership if the newly exposed top piece belongs to the opposite player. * Restore the normal colors of all affected towers. # Internal Data Structure Every occupied square must store an array: ```javascript [ { color: "white", king: false }, { color: "black", king: true }, ... ] ``` The **last element of the array is always the top of the tower**. All game logic must operate directly on this structure. # User Interface * Attractive wooden/checkered board. * Towers displayed as stacked pieces. * Show the height of every tower. * Kings display a crown icon. * Highlight the selected tower. * Animate movement. * Animate captures. * Display whose turn it is. * Responsive layout that works well on desktop and mobile. # Algorithms Implement: * `getLegalMoves()` * `getCaptures()` * `makeMove()` * `undoMove()` * `promoteIfNeeded()` * `checkGameOver()` Implement classes: * `Board` * `Game` * `Renderer` Requirements: * No duplicated code. * Clean object-oriented architecture. * Efficient move generation. * Correct recursive search for all possible capture sequences. # Game Over Detection Detect: * One player has no controllable towers. * One player has no legal moves. * Opponent is completely blocked. Display the winner and prevent further moves until a new game starts. # Final Validation Before generating the code, verify that all Bashni rules are implemented correctly, especially: * placing captured pieces underneath the capturing tower; * removing **only the top piece** when a tower is captured; * immediate promotion during a capture sequence; * multiple captures in a single turn; * mandatory captures; * correct tower ownership switching after the capture sequence ends; * deferred tower updates until the end of the capture sequence; * preventing the same tower from being captured twice during one move; * proper undo functionality restoring the complete previous game state. The final result must be a **fully functional, production-quality, bug-free single HTML file** containing all HTML, CSS, and JavaScript, ready to open locally in any modern browser without any external dependencies.

LandingGame
Landing

Comments (0)

No comments yet. Be the first!

System Requirements

System Requirement Document
Page 1 of 5

project-90a0a215

Introduction

The purpose of this document is to outline the system requirements for the project-90a0a215, which involves creating a fully self-contained HTML game called "Bashni (Tower Checkers)" for two players. This game must be implemented in a single HTML file, incorporating all necessary HTML, CSS, and JavaScript, and must function without any external libraries or internet connection.

System Overview

The "Bashni (Tower Checkers)" game is a digital adaptation of the traditional board game, designed to be played by two players on a single device. The game will feature an 8×8 board with 12 white and 12 black pieces, adhering to the rules of Russian Draughts with the unique mechanics of Bashni (Tower Checkers).

Key Features

  • 8×8 board with 12 pieces per player.
  • Play on dark squares only.
  • White moves first.
  • Highlight legal moves and possible captures.
  • Prevent illegal moves.
  • Support for multiple captures in a single turn.
  • Display the winner when the game ends.
  • "New Game" and "Undo Last Move" buttons.
Page 2 of 5

Functional Requirements

  • As a Player, I should be able to move pieces diagonally forward.
  • As a Player, I should be able to move kings any distance diagonally.
  • As a Player, I should be able to capture opponent pieces, which are then placed under my capturing piece.
  • As a Player, I should be able to continue capturing if another capture is available.
  • As a Player, I should be able to promote a man to a king if it reaches the last rank during a capture sequence.
  • As a Player, I should be able to see all legal moves highlighted.
  • As a Player, I should be able to see all possible captures highlighted.
  • As a Player, I should be able to undo the last move.
  • As a Player, I should be able to start a new game.
  • As a Player, I should be able to see whose turn it is.
  • As a Player, I should be able to see the height of each tower.
  • As a Player, I should be able to see kings displayed with a crown icon.
  • As a Player, I should be able to see animated movements and captures.
  • As a Player, I should be able to see the game end when one player has no controllable towers or legal moves.

User Personas

  • Player 1: A person who initiates the game and plays with the white pieces.
  • Player 2: A person who joins the game and plays with the black pieces.
Page 3 of 5

Core User Flows

  1. Player 1 starts the game and makes the first move.
  2. Player 2 makes a move.
  3. Players alternate turns, capturing pieces and forming towers.
  4. A player wins when the opponent has no legal moves or controllable towers.
  5. Players can start a new game or undo the last move at any time.

Visuals Colors and Theme

  • primary: #8B4513 (Saddle Brown)
  • primary_light: #CD853F (Peru)
  • secondary: #FFD700 (Gold)
  • accent: #FF4500 (Orange Red)
  • highlight: #FFA500 (Orange)
  • bg: #F5F5DC (Beige)
  • surface: rgba(139, 69, 19, 0.8) (Saddle Brown with transparency)
  • text: #000000 (Black)
  • text_muted: #696969 (Dim Gray)
  • border: rgba(0, 0, 0, 0.2) (Black with transparency)
Page 4 of 5

Signature Design Concept

The homepage will feature an interactive animated board that mimics a real wooden checkerboard. The pieces will appear to stack dynamically, with each move and capture animated to show the formation of towers. The board will have a responsive design, adjusting to different screen sizes while maintaining the aesthetic of a classic board game. The animation will be implemented using CSS transitions and JavaScript for smooth movement and capture sequences.

Landing Hero Motion Brief

The landing page will feature a continuously looping animation of a game in progress, showcasing the unique mechanics of Bashni. Pieces will move and stack, demonstrating captures and tower formations. The animation will be created using CSS and JavaScript, ensuring compatibility across all modern browsers without external dependencies.

Interaction Model & Motion Direction

  • Interaction Model: Animated
  • The game will feature moderate scroll-triggered reveals and hover transitions. Interactive elements will have spring physics for a polished feel.

Non-Functional Requirements

  • The game must operate entirely offline.
  • The game must be responsive and work on both desktop and mobile devices.
  • The game must be efficient, with no duplicated code and clean object-oriented architecture.
Page 5 of 5

Tech Stack

  • Frontend: HTML, CSS, JavaScript (no external libraries)

Assumptions and Constraints

  • The game will be played on a single device by two players.
  • The game must not rely on any external libraries or internet connection.
  • The game must be fully contained within a single HTML file.

Glossary

  • Bashni (Tower Checkers): A variant of checkers where captured pieces are placed under the capturing piece, forming a tower.
  • King: A piece that can move any distance diagonally.
  • Man: A regular piece that moves one square diagonally forward.
  • Tower: A stack of pieces formed when one piece captures another.
Landing design preview
Landing: View Board
Game: View Turn Indicator
Game: Select Tower
Game: View Legal Moves
Game: View Captures
Game: Move Piece
Game: Capture Piece
Game: Continue Capture Sequence
Game: Promote To King
Game: View Tower Height
Game: Undo Last Move
Game: Start New Game
Game: View Winner
Landing design preview
Landing: View Board
Game: View Turn Indicator
Game: Select Tower
Game: View Legal Moves
Game: View Captures
Game: Move Piece
Game: Capture Piece
Game: Continue Capture Sequence
Game: Promote To King
Game: View Tower Height
Game: Undo Last Move
Game: Start New Game
Game: View Winner