Pexeso Documentation

Live game

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.0, 9.8.2014

Author: Aleš Trunda


  • jQuery


  • pexeso.css

Most of custom changes should be made in this file.



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

options: integer
default: 10


Number of players

options: integer
default: 1


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

options: integer
default: 1


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: []


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


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


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


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"


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



Fired when player on turn changes.

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


Fired when game is created.

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


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

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


Fired when player turned two pieces.

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


Fired when game is finished.

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


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

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


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

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


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*/ }
	status: new game status



Removes game timer and all game structure.

pexeso = $('#pexeso-game').pexeso();


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.

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


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.

pexeso = $('#pexeso-game').pexeso();


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

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


Returns number of total points of all players.

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


Returns actual timer value.

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


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

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


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

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


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

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


//run 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';
   onPlayerChange:		function(player_number) {
      //print actual player and pictures to go
      //pictures left = number of pieces minus total points of all players
      var points = $('#pexeso').pexeso.getTotalPoints();