Pagoda Puzzle

Description

In the Pagoda, there are 7 Tiers containing 6 Balls each. There is also a Frame that has a position to hold 1 Ball. Initially, all the Tiers are full and the Frame position is empty.

The objective of the puzzle is to move the Balls from their initial positions such that each column contains Balls of the same color. In this way, there can be many different correct solutions to the puzzle.

The current state of the Pagoda is described using a matrix. The first row denotes the Frame and all subsequent rows are Tiers, with lower row numbers representing lower Tiers. The columns denote the positions of the Balls, with the integers 0 to 5 each representing a different color. Additionally, null represents an empty position and -1 represents a position that a ball can't be moved to.

The initial state of the Pagoda may look like this:

[
  [null, -1, -1, -1, -1, -1],
  [0, 5, 0, 1, 2, 5],
  [3, 2, 3, 3, 0, 2],
  [3, 4, 1, 4, 0, 5],
  [1, 5, 4, 1, 0, 0],
  [3, 4, 3, 2, 1, 5],
  [2, 1, 4, 5, 4, 0],
  [2, 4, 2, 5, 3, 1]
]

Once complete it may look like this:

[
  [null, -1, -1, -1, -1, -1],
  [0, 5, 4, 1, 2, 3],
  [0, 5, 4, 1, 2, 3],
  [0, 5, 4, 1, 2, 3],
  [0, 5, 4, 1, 2, 3],
  [0, 5, 4, 1, 2, 3],
  [0, 5, 4, 1, 2, 3],
  [0, 5, 4, 1, 2, 3]
]

Usage

Initialization

To show the puzzle within your webpage, you must create a canvas HTML element.

HTML

<canvas id="canvas"></canvas>

Then within your script, you must find the canvas element and pass it to the Pagoda.Puzzle constructor. You may optionally attach a Pagoda.KeyboardClient if you wish to allow the user to play via the keyboard.

JS

// Load canvas DOM element.
var canvas = document.getElementByID('canvas')

// Create the puzzle.
var puzzle = Pagoda.Puzzle(canvas)
puzzle.draw()

// Attach a keyboard client.
new Pagoda.KeyboardClient(puzzle)

API

There are a few methods on the Pagoda.Puzzle object that allow you to interact with the puzzle.

Commands sent to the puzzle via the API methods are queued as they take non-zero time to perform. Commands are pulled off the CommandQueue and performed in order. The time taken to perform a Command depends upon the animation length setting.

Methods

• Create Puzzle
• Rotate Level
• Move Ball
• Get State
• Completed
• Set Animation Time

Create Puzzle

new Pagoda.Puzzle(canvas, seed = null)

Creates a new puzzle.

• canvas (required), the HTML canvas element to draw the puzzle on.
• seed (optional), a seed for the StateGenerator that determines the initial positions of the Balls. For example, passing 0 each time will ensure that the same starting positions are used.

Example

var puzzle = new Pagoda.Puzzle(canvas, 0)

Assigns a new Pagoda.Puzzle which will draw to the canvas DOM element.

Rotate Level

Pagoda.Puzzle.rotate(numLevel, direction, callback = () => {})

Rotates a level of the tier, either clockwise or counter-clockwise, by 60 degrees.

• numLevel (required), the number of the level that you wish to rotate, from 0 (Frame) to 6 (highest Tier).
• direction (required), the direction of rotation. 1 is clockwise looking down from above the puzzle, -1 is counter-clockwise.
• callback (optional), a function to execute after the rotation has completed.

Example

let callback = () => { console.log('completed') }
puzzle.rotate(2, -1, callback)
...
'completed'

Rotates the third level in the counter-clockwise direction.

Move Ball

Pagoda.Puzzle.move(location, direction, callback = () => {})

Moves the Ball in the specified location up or down into an empty position.

• location (required), the location in the matrix of the Ball to move.
• direction (required), the direction to move. 1 is up, -1 is down.
• callback (optional), a function to execute after the move has completed.

Example

let callback = () => { console.log('completed') }
puzzle.move([3, 4], 1, callback)
...
'completed'

Moves the Ball in the 4th row and 5th column one place upwards.

Get State

Pagoda.Puzzle.state()

Returns the current position of all the Balls.

Example

puzzle.state() =>
[
  [null, -1, -1, -1, -1, -1],
  [0, 5, 0, 1, 2, 5],
  [3, 2, 3, 3, 0, 2],
  [3, 4, 1, 4, 0, 5],
  [1, 5, 4, 1, 0, 0],
  [3, 4, 3, 2, 1, 5],
  [2, 1, 4, 5, 4, 0],
  [2, 4, 2, 5, 3, 1]
]

Completed

Pagoda.Puzzle.completed()

Returns true if the puzzle is in a completed state, false if not.

Example

puzzle.completed() =>
true

Set Animation Time

Pagoda.Puzzle.setAnimationTime(seconds)

Sets the time taken to perform a RotationAnimation or TranslationAnimation.

• seconds (required), the time taken to perform the animation in seconds.

Example

puzzle.setAnimationTime(0.5)

Sets the animation time to half a second.