react-super-slide-me
"Super Slide Me" puzzle game as React component
###How to use
In order to embed the full game onto your site simply add <SuperSlideMe /> component in the desired place in code.
You can customise the game to your liking using props.
<SuperSlideMe /> accepts props:
| id | Mostly optional id. It is passed to the game component. Can be used to find the game in the DOM, for css styles etc. It is required only if you embed two games, with the same level config at once. |
| width | Component's width (in pixels) - if you don't provide this prop component will use its parent's width |
| onLastLevelReached | Callback function fired when player finishes the game. (Last level is just an end screen.) |
| levelConfig | Level configuration object (see below) |
| customLevels | Custom levels array (see below) |
Level Config
levelConfig prop accepts object in form:
{
levelSets: string[]
levelFilter: string
}
All the levels in game are divided into sets: "A", "B", "C", "D", "E", "F", "X". Each set has 16 levels and introduces new mechanic. You can specify which sets should your game use by declaring them in an array. By Default all sets are used.
levelFilter can have one of the following values:
all - all levels are used
onlyEasy - only first 8 levels of each set are used
onlyHard - only last 8 levels of each set are used
short - only 1st, 2nd, 9th and 10th levels of each set are used (it's a shorter version of the full game)
onlyCustom - none of the levels from any sets are used.
Custom Levels
You can create your own levels and provide them in customLevels props. This prop requires an array of strings. Each string should represent a level.
Example string level representation:
'x..x.bx' +
'.xbx.x.' +
'.......' +
'x..e...' +
's.g.g..' +
'x......' +
'.x.x.x.'Each character represents one block/field. Level needs to be square.
Available characters:
| . | empty field |
| x | wall |
| s | blue start |
| S | pink start |
| e | blue end |
| E | pink end |
| b | moving box |
| g | green field |
| r | red field |
| o | orange wall |
| c | orange crushing ball |
| B | blue moving box |
| p | blue empty field |