Pexeso Documentation

Pexeso game

About: before game starts, game pieces are picked and shuffled. Game pieces are pairs of same pieces (every piece has its completely identical twin). Game starts with all pieces turned off, so players do not know which pieces are identical. Game goal is to find these identical pairs. Player on turn can turn on two pieces, if these pieces are the identical twins, he gets one point and continue (this can be set), these twin pieces get out of the game. If the selected two pieces are not the twins, they are turned off again and next player gets on turn. Game finishes when all the pairs were found, player with most of the points wins. When piece is turned off/on it stays on its position, no one moves it. When piece it turned on all players can see what piece was turned.

Players: min 1, max not limited

Version: 1.1, 9.8.2014

Author: Aleš Trunda

Requirements:

jQuery

Stylesheets:

pexeso.css

Most of custom changes should be made in this file.

Settings

pieces

Number of unique pieces - game will have pieces*2 squares

options: integer
default: 10

players

Number of players

options: integer
default: 1

startPlayer

Number of starting player - first player has number 1 (not 0)!

options: integer
default: 1

pictures

Array of picture sources
For this you can use function from file get_images.php - like this: "pictures = <?php echo get_images_for_pexeso('images/pexeso/browsers'); ?>;" - creates array from all files (make sure you have there only images) in selected folder.

options: array of strings
default: []

switchOnPoint

True for switching player always after 1 step, false for switching player only if his step was wrong (if his step was correct he will continue).

options: boolean (true/false)
default: false

waitForLoad

True - game will start after all pictures are loaded (I recommend to add some loader, that will cover the game area and check onGameLoaded callback).
False - game starts immediately - you risk problems when player turns empty (not loaded) picture.

options: boolean (true/false)
default: true

waitTime

Time to wait before the quares are turned off. In milliseconds. This is important when css transitions are not used, because there will be no delay and the square will be turned off immediately, so the player will not notice what picture was there.

options: integer
default: 1500

squareDone

When standard game is played the pictures that are solved stay in the game area, they are just covered so the players know they are solved (this is when the default 'cover' option is used). But when we want to play game where we reveal big background-picture in the back, then the pictures cannot be just covered, they have to disappear, that means different animation than 'cover' must be used, I call it 'square' animation. So 'cover' option for animating cover over the square, 'square' option for animating directly the square.

In case no animations used (turned off or not supported) this setting has no effect.

options: string ("cover" | "square")
default: "cover"

useCss

If used web browser do not support 3D transforms, no transforms or animations will be used. If 3D transforms are supported they are used, but they can be turned off by setting this option to false.

options: boolean (true/false)
default: true

Callbacks

onPlayerChange

Fired when player on turn changes.

default: function(){}
options: function(playerOnTurn, playerPoints) { /*your code*/ }
arguments:
	playerOnTurn: number of player that gets on turn
	playerPoints: number of points of that player

onGameInit

Fired when game is created.

default: function(){}
options: function(startPlayer) { /*your code*/ }
arguments:
	startPlayer: number of player that starts the game

onGameLoaded

Fired when game (all the images) is loaded - invoked only when setting waitForLoad is true.

default: function(){}
options: function() { /*your code*/ }

onStep

Fired when player turned two pieces.

default: function(){}
options: function(correctStep, totalSteps, playerPoints) { /*your code*/ }
arguments:
	correctStep: boolean value that indicates if the step was correct
	totalSteps: number of steps in the game
	playerPoints: number of points of active player

onSolved

Fired when game is finished.

default: function(){}
options: function(points) { /*your code*/ }
arguments:
	points: array of points of all players, note that the first player is on index 1 (not 0)

onTimerChange

Fired when timer value changes - every second, smaller value is not considered.

default: function(){}
options: function(timerValue) { /*your code*/ }
arguments:
	timerValue: game timer value

onImgLoaded

Fired when image is loaded - only when setting waitForLoad is true

default: function(){}
options: function(numberOfImages) { /*your code*/ }
arguments:
	numberOfImages: number of loaded images - for progress bar

onStatusChange

Fired when game status is changed. Game uses 4 statuses: "running" (timer is running, player interface is active - pieces can be clicked), "processing" (game is processing player action - waiting for functions and animations to finish, timer running, player interface inactive - pieces cannot be clicked), "paused" (game paused, timer not running, player interface inactive) and "finished" (game solved, timer stopped, player interface inactive)

default: function(){}
options: function(status) { /*your code*/ }
arguments:
	status: new game status

Methods

destroy

Removes game timer and all game structure.

example:
pexeso = $('#pexeso-game').pexeso();
pexeso.destroy();

pause

Pauses the game - timer stopped, player interface inactive. Game can be paused only when game status is "running", in other cases game cannot be paused (testing return value of this function will determine if game was/wasn't paused). It was made this way because pausing followed by resuming the game while it's still processing player action made game unstable.
Viz "resume" to reactivate the game.

example:
pexeso = $('#pexeso-game').pexeso();
if(pexeso.pause() === false)
	//game was not paused - it's still processing player action or it's already paused
else
	//game paused

resume

Resumes the game - timer and player interface reactivated. Game can be resumed only when game status is "paused", in other cases game cannot be resumed (testing return value of this function will determine if game was/wasn't resumed).
Viz "pause" to pause the game.

example:
pexeso = $('#pexeso-game').pexeso();
pexeso.resume();

getPoints

Returns points of all players as an array, note that the first player is on index 1 (not 0).

example:
pexeso = $('#pexeso-game').pexeso();
var points = pexeso.getPoints();
var points_player1 = points[1];

getTotalPoints

Returns number of total points of all players.

example:
pexeso = $('#pexeso-game').pexeso();
var points = pexeso.getTotalPoints();

getTimerValue

Returns actual timer value.

example:
pexeso = $('#pexeso-game').pexeso();
var sec = pexeso.getTimerValue();

getSteps

Returns steps of all players as an array, note that the first player is on index 1 (not 0).

example:
pexeso = $('#pexeso-game').pexeso();
var steps = pexeso.getSteps();
var steps_player1 = steps[1];

getTotalSteps

Returns count of steps in the game (steps of all players).

example:
pexeso = $('#pexeso-game').pexeso();
var steps = pexeso.getTotalSteps();

getCurrentPlayer

returns number of current player, note that the first player has number 1 (not 0)

example:
pexeso = $('#pexeso-game').pexeso();
var player_on_turn = pexeso.getCurrentPlayer();

Example

//run pexeso
$('#pexeso').pexeso({
   pieces:			5,
   players:			2,
   pictures:			['images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg','images/5.jpg'],
   onSolved:			function(points) {
      //print results
      var out = "Solved!\n\n";
      for(var i=1;i<=players;i++) {
         out += 'Player '+i+': '+points[i]+' points\n';
      }
      alert(out);
   },
   onPlayerChange:		function(player_number) {
      //print actual player and pictures to go
      $('#player-on-turn').html(player_number);
      
      //pictures left = number of pieces minus total points of all players
      var points = $('#pexeso').pexeso.getTotalPoints();
      $('#pictures-left').html(5-points);
   },
});