https://github.com/wandererxii/sliding-puzzles
Simple flexible UI for sliding puzzles.
https://github.com/wandererxii/sliding-puzzles
15-puzzle hakoirimusume klotski puzzle puzzle-game sliding-puzzle sliding-puzzle-game typescript
Last synced: about 1 month ago
JSON representation
Simple flexible UI for sliding puzzles.
- Host: GitHub
- URL: https://github.com/wandererxii/sliding-puzzles
- Owner: WandererXII
- Created: 2021-08-21T22:45:22.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-12-11T16:46:29.000Z (4 months ago)
- Last Synced: 2025-02-28T06:03:36.850Z (about 2 months ago)
- Topics: 15-puzzle, hakoirimusume, klotski, puzzle, puzzle-game, sliding-puzzle, sliding-puzzle-game, typescript
- Language: TypeScript
- Homepage:
- Size: 6.4 MB
- Stars: 6
- Watchers: 0
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Sliding puzzles
[](https://www.npmjs.com/package/@liskadan/sliding-puzzles)
A simple flexible UI for sliding puzzles.
Demo on lishogi 404 pages: https://lishogi.org/i/do/not/exist
## How to use
`npm install @liskadan/sliding-puzzles`
Either include the script in your HTML header:
``
Or import it if you are using modules:
`import { SlidingPuzzles } from '@liskadan/sliding-puzzles';`
You will also want to include the css probably, but you might want to copy that asset and make your own changes:
``
Puzzle setup for the example above is a string like this:
```
G1 K K G2
G1 K K G2
B S S R
B N L R
P1 . . P2
```
Separate all pieces and empty squares with a space
Each row ends with a newline or a '/'
Same as above: `G1 K K G2/G1 K K G2/B S S R/B N L R/ P1 . . P2`
We start at top left corner, we say what piece is at each square
The name needs to be UNIQUE, dot represents empty square
All pieces must be rectangular no L or T shapes
The name will be used as class for styling.
To initiate the actual puzzle you do this:
```typescript
const api = SlidingPuzzles(
document.getElementById('game'),
'G1 K K G2/G1 K K G2/B S S R/B N L R/ P1 . . P2',
config,
);
```
`config` object looks like this:
```typescript
interface Configuration {
solution: (sit: Situation) => boolean; // checks after every move if solution was reached
onMove: (sit: Situation) => void; // called after each move
specialEffect: (p: Piece, h: HTMLElement) => void; // called for each piece during rendering, you can highlight a piece when correctly placed for example
onVictory: (sit: Situation) => void; // called after solution was reached
movable?: boolean;
showDests?: boolean;
}
```
Returned `api` object is just situation:
```typescript
interface Api {
situation: Situation;
}
interface Situation {
pieces: Pieces;
occupied: Square[];
moves: number;
width: number;
height: number;
elements: Elements;
config: Configuration;
selected?: Square;
pos?: [number, number];
}
```