https://github.com/ptpt/slidingpuzzle
A sliding puzzle game written in CoffeeScript https://taopeng.me/SlidingPuzzle/
https://github.com/ptpt/slidingpuzzle
coffeescript game puzzle
Last synced: 5 months ago
JSON representation
A sliding puzzle game written in CoffeeScript https://taopeng.me/SlidingPuzzle/
- Host: GitHub
- URL: https://github.com/ptpt/slidingpuzzle
- Owner: ptpt
- License: mit
- Created: 2011-06-03T02:05:02.000Z (about 15 years ago)
- Default Branch: main
- Last Pushed: 2022-10-16T21:16:18.000Z (almost 4 years ago)
- Last Synced: 2025-07-01T22:35:59.495Z (about 1 year ago)
- Topics: coffeescript, game, puzzle
- Language: CoffeeScript
- Homepage:
- Size: 349 KB
- Stars: 5
- Watchers: 4
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Sliding Puzzle
A [sliding puzzle](http://en.wikipedia.org/wiki/Sliding_puzzle) game
written in CoffeeScript. View the demo [here](https://taopeng.me/SlidingPuzzle/).
## How to use
1. Copy [puzzle.js](https://taopeng.me/SlidingPuzzle//js/puzzle.js) to your site folder.
2. HTML setup.
Add a container element to your HTML file. For example:
````html
puzzle shows here
````
Include `puzzle.js` in your HTML file:
````html
````
3. Initialize the game.
````javascript
var sliding = new SimpleSliding(3, 3),
container = document.getElementbyid('puzzle');
sliding.render(container, 2);
sliding.shuffle();
````
4. Show the number on each square.
```javascript
$(sliding.squares).each(function () {
var id = $(this).data('id');
$(this).text(id + 1);
});
```
Or specify the background image, which looks better than numbers:
```javascript
$(sliding.squares).css({'background-image': 'url(PATH/TO/GAME-BACKGROUND.jpg)'});
```
5. Let the game know how to move, and how to react when you win.
````javascript
$(sliding.squares).click(function () {
var id = $(this).data('id');
sliding.slide(id);
if (sliding.completed()) {
alert('Well done!');
sliding.shuffle(); // Restart again
}
});
````
## API
```coffeescript
class SimpleSliding
# initialize a game with the number of rows and cols
constructor(rows, cols)
# render the game on the element with specified spacing between squares
render(element, spacing)
# rerender the game on current element
render()
# test if current game state is solvable
solvable()
# test if current game state is completed
completed()
# test if the square is slidable (movable)
slidable(squareID) or slidable([row, col])
# shuffle all squares (solvability is guaranteed after shuffling)
shuffle(callback)
# slide a square
slide(squareID) or slide([row, col])
# swap arbitrary two squares (after swap you have to check solvability yourself)
swap(squareID1, squareID2) or swap([row1, col1], [row2, col2])
```
## History
This was originally part of our
[final project](http://gavleslidingpuzzle.appspot.com/) of the
Software Development course in 2011.
In March 2013, it was rewritten in CoffeeScript.
In December 2014, it was rewritten with following improvements:
1. simplification: shorter code, easier usage
2. split game logic and UI logic
3. remove jQuery dependency
## License
puzzle.js is under the MIT License. See LICENSE file for full license
text.