# Mr.Toad's Fifteen puzzle with timer (modified by stannic)

#### stannic

##### Member
I've written a JavaScript-based Fifteen puzzle which integrates a timer and supports different puzzle sizes. I created it for my personal use but it might come in handy to some of you:

http://albertoonsoftware.com/fifteenpuzzle/
Here is my modification of Toad's timer. I've decided to create new thread here since I did not find existing dedicated thread on the forums (only this post about it).

Note: from v7.1, link to the online version will not change anymore (unless something strange happens). I'll replace old stable version with new stable instead of creating new page.

From now, use the link below for latest stable online version:

Simple viewer of the stored PBs: link

The code to view all stored PBs:
Timer:
v2.0
v3.0
v4.0
v5.0
v5.1
v5.2 (upd 2, upd 3, upd 4, upd 5, upd 6, upd 7, upd 8)
v6.0
v6.1 (upd 1)
v7.0
v7.1, v7.1.ie.01 (IE-compatible)
v1.0
- improved scrambling function (equal probability for all configurations)

v2.0
- support for non-square puzzles (any width and height up to 16x16)
- recording move counts
- displaying the number of solves

v3.0
- switching between "piece moves" and "blank moves" modes (piece moves mode is when Down = move tile above the gap downward; blank moves mode is when Down = move tile below the gap upward)
- TPS
- color schemes
- displaying time in format h:mm:ss.msms

v4.0
- fixed back notation (Mean instead of Avr)
- Avr, Curr/Best Ao5, Curr/Best Ao12
- resizing tiles

v5.0
- relay mode

v5.1
- Table of results

v5.2
- live timer (beta)
- various coloring schemes
- control schemes (Arrows, AWDS, HCNT, JL/I/FS/K) (update 5)
- new relay modes (w--, h--) (update 6)
- new scramble types (update 7)

v6.0
- new relay modes (3 in a row, 10 in a row)

v7.0
- saving PBs in localStorage (no relays for now)
- hand-picked rainbow palette
- one custom 4-color scheme

v7.1
- "official" solves, counter
- bug-fix: storing PBs from different scramble types separately
- buttons to delete/clear PBs
- support for IE 8.0+ (update 7.1.ie.01)

To-do (although not guaranteed)
- Export/import PBs in plain-text format / BB coded table / HTML table (probably in separate tab or in separate page)
- Scramble type: single swap (actually single swap + swap 14-15)
- AoX/MoX in relay mode
- Saving PBs in relay mode
- Saving the total number of solves (because there is now Official counter)
- Columns TPS and Sigma in the AoX/MoX table
- Reduction modes (First N rows, First M cols, Reduce to MxN...)
- The ability to select the averages/means you want to display
- AoX/MoX: displaying current, best session and PBs separately
To relay puzzles from 7x7 downto 2x2, set puzzle size 7x7, switch mode from "Standard" to "Relay" and scramble puzzle by pressing Space. There are no pauses between solves. Timer starts when you do the first move on the first puzzle in relay.

You can start relay from any MxN puzzle where M, N >= 3. Puzzles in relay will be MxN, (M-1)x(N-1), (M-2)x(N-2) etc.; after solving (2xN) or (Mx2) puzzle, the following puzzles will be 2x(N -1), 2x(N - 2) etc. For example, 5x4-4x3-3x2-2x2 relay or 7x4-6x3-5x2-4x2-3x2-2x2 relay.

Since v.5.2 upd 6, there are two more relay modes: Relay (w--) and Relay (h--). In the mode (w--), the height of the puzzle does not change (only width), so you can, for instance, relay puzzles from 10x4 downto 2x4. In the mode (h--), changes only the height, so you can relay puzzles from 5x10 downto 5x2.
- After setting width and height of the puzzle, left-mouse-click somewhere in the memo "Times" or "Moves". This prevents unintentional changing width and height of the puzzle when you press keys Up/Down.
This is my first experience in JavaScript, so please post any bugs you find

Also, if you have your own modification and want to share it then feel free to post it. I'll add links here.

- stannic

Last edited:

#### vcuber13

##### Member

edit: if anyones interested heres the version im using bitly.com/15puzzle

Last edited:

Awesome!

#### Chrisandstuff

##### Member
hmm controls seem a little confusing to me lmao (counter-intuitive to me) like its like you push the arrow in the direction of the piece you want to move instead of being in the direction the piece should be moving. Maybe you should add an option to invert the controls is what im saying lol.

#### stannic

##### Member
hmm controls seem a little confusing to me lmao (counter-intuitive to me) like its like you push the arrow in the direction of the piece you want to move instead of being in the direction the piece should be moving. Maybe you should add an option to invert the controls is what im saying lol.
Press Page Up or Page Down to do this. Didn't I wrote about this in the New Features?

(Edit: interface changed, there is a drop-down list "Moves" where you can select "piece" or "blank")

Last edited:

#### Chrisandstuff

##### Member
O wow sorry I really should of read a bit more I just jumped into the puzzle and didnt read that thank you. Sorry again.

#### stannic

##### Member
New version:
- interface improved
- several color schemes
- displaying time in format h:mm:ss.msms (thanks to qqwref for permission to use his code )

If you want, you can use this function from qqtimer to display a time (in an integer number of milliseconds) as hours:minutes:seconds.milliseconds (only using as many parts as needed, of course):

Code:
function pretty(time) {
var bits = time % 1000;
time = (time - bits) / 1000;
var secs = time % 60;
var mins = ((time - secs) / 60) % 60;
var hours = (time - secs - 60 * mins) / 3600;
var s = "" + bits;
if (bits < 10) {s = "0" + s;}
if (bits < 100) {s = "0" + s;}
s = secs + "." + s;
if (secs < 10 && (mins > 0 || hours > 0)) {s = "0" + s;}
if (mins > 0 || hours > 0) {s = mins + ":" + s;}
if (mins < 10 && hours > 0) {s = "0" + s;}
if (hours > 0) {s = hours + ":" + s;}
return s;
}
- stannic

Last edited:

#### ThomasJE

Nice! Some things I'd like to see:
- Have times displayed in a table, rather than in boxes (Example in spoiler)
 Solve No. Time Moves TPS 1 16.469 61 3.704 2 11.817 54 4.570 3 19.377 90 4.645
- Have an option to zoom the tiles. They seem so small to me.
- Have Ao5, Ao12 etc.

#### stannic

##### Member
Nice! Some things I'd like to see:
- Have times displayed in a table, rather than in boxes (Example in spoiler)
- Have an option to zoom the tiles. They seem so small to me.
- Have Ao5, Ao12 etc.
Zooming the tiles and AoX seem to be doable. (BTW, should I remove the best and worst times / display rolling averages? Or simply display the mean of X solves?)

I feel the need to change page layout but I'm afraid to do it :/

Is there anyway to have it time a relay, e.g. 2x2-7x7?
Not yet, but planned as well.

Edit: I've added link to vcuber13's modification allowing to relay puzzles from 7x7 down to 2x2. See first post of this thread.

- stannic

Last edited:

#### ThomasJE

Zooming the tiles and AoX seem to be doable. (BTW, should I remove the best and worst times / display rolling averages? Or simply display the mean of X solves?)
I think we should have the same stats as qqtimer (std, aox etc.). The average of x removes the best and worst times, and averages the rest.

#### stannic

##### Member
New version. Added possibility to resize tiles and Avr/AoX. Still no relay and table of results.

#### qqwref

##### Member
Resizing the tiles is nice. I tried the 16x16 ._.

Time: 38:32.840
Moves: 10930
Mean TPS: 4.726

#### stannic

##### Member
Resizing the tiles is nice. I tried the 16x16 ._.

Time: 38:32.840
Moves: 10930
Mean TPS: 4.726
Finally, I'm sub 1.
/58:59.124, 12932, 3.654/
Was forced to resize tiles during solve because of sharp pain in the eye.

Last edited:

#### qqwref

##### Member
That's a lot of moves. Are you trying to bring a few pieces up to the top at once, or just one at a time?

#### vcuber13

##### Member
its only 18% more than you

#### stannic

##### Member
That's a lot of moves. Are you trying to bring a few pieces up to the top at once, or just one at a time?
I'm trying to move 'snakes' but on this size it is too hard for me. 3 tiles together sometimes.
And not consecutive tiles, just some tiles from that row that occur in the path.

Last edited:

#### qqwref

##### Member
its only 18% more than you
18% is a lot when we all use basically the same method Especially considering I wasted a ton of moves trying to make the first left-hand column (I kept adding 16 wrong...). If you were watching you would facepalm.

#### Jaycee

##### Member
About to do the 16x16. I've never tried anything above a 7x7 lol.