Giter VIP home page Giter VIP logo

sliding-puzzles's Introduction

Sliding puzzle

A simple flexible UI for sliding puzzles.

In use on 404 pages on lishogi: https://lishogi.org/i/do/not/exist

Hakoiri musume

How to use

Simply include the script and css files in your document.

<link rel="stylesheet" href="assets/css/hakoirimusume.css" />
<script src="dist/sliding-puzzles.js"></script>

Then initiate SlidingPuzzles:

  ...
  // Think of setup as a map, works similarly to chess FEN notation.
  // Each piece has to have unique name,
  // same names mean it's the same piece occupying multiple squares.
  // '.' means empty square, '/' starts a new line.
  const setup = 'G1 K K G2/G1 K K G2/B S S R/B N L R/ P1 . . P2';

  // https://github.com/WandererXII/sliding-puzzles/blob/main/src/configuration.ts
  const cfg = {
    solution: sol,
    onVictory: win,
    onMove: move,
  };

  SlidingPuzzles(document.getElementById('game'), setup, cgf);
  ...

You can define your own conditions for victory, set callbacks after solving or after moving.

For a specific example look here: https://github.com/WandererXII/sliding-puzzles/blob/main/index.html

sliding-puzzles's People

Contributors

wandererxii avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

Forkers

m-dinhhoangviet

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.