Puzzle16+ Game on ILI9341 2.8" 262K Color TFT LCD w/ Resistive Touch Screen

Dropped comments and related code are the subjects of this post.

Comment/code sketching the implementation design.

p16 = // puzzle16 game (x=4,y=4) - x,y variable (screen size too)
      // - x*y-1 = m pieces with values 0..x*y-2 (regular piece) 
      // - empty slot is virtual piece w/ value -1 (empty piece)
      // - ps = y*x pieces arr of arrays [row=y][col=x] = [value]
      // - ls = x*y locations by value array [value] = [y,x]
{ h: "Puzzle 16"
, t: 0
, .....

Comment/code sketching the main line tpd(x,y) method:

// tapped on screen at pixel xp,yp
//  ? i = inside of game board
//    update time display
//    x = piece x coord 0..x-1
//    y = piece y coord 0..y-1
//    ? top porch / banner menu (above pieces)
//      handle top menu
//    :? pieces reg y (above bottom porch / footer menu)
//      ? pieces reg x
//        p = piece @ x y, n = value of piece
//        ? piece (not empty 'piece')
//          ex ey = x y of empty piece
//          ? ey of empty piece == y of piece
//            move vertically +-y
//          : (ex of empty piece == x of piece)
//            move horizontally +-x
//    : (bottom porch / footer menu (below pieces))
//      handle bottom menu -+x, -+y, scramble, and 'orderly'
//  return i (=true when inside game board and handled)   
, tpd: function(xt,yt) { var i,xr,yr,xo,yo,dp=this.d;
    if ((i =    (xt>=this.x0) && (xt<this.x0+this.xp)
             && (yt>=this.y0) && (yt<this.y0+this.yp) )) {
      this.upd(Math.floor(getTime() - this.t),this.ts);
      var x = Math.floor((xr=(xt-(xo=this.x0+this.bl-1)))/dp);
      var y = Math.floor((yr=(yt-(yo=this.y0+this.bt-1)))/dp);
      if (y < 0) {
      } else if (y < this.y) {
        if ((x >=0) && (x < this.x)) {
          var p = this.ps[y][x], n = p[0];
          if ( n >= 0) {
            var ey = this.ls[this.m][0], ex = this.ls[this.m][1];
            var e = this.ps[ey][ex];
            if (ey == y) { this.c++;
              this.mvx(y,x,e,ex,(ex<x) ? +1 : -1,yo,xo,dp);
            } else if (ex == x) {
              this.mvy(y,x,e,ey,(ey<y) ? +1 : -1,yo,xo,dp);
            }
          }
        }
      } else { x = Math.floor(xr/((this.xp-2*2)/8));
              console.log(x);
        if        ((x ===  0) && (this.xn>3)) {
          this.xn--; this.upd(this.xn,this.xns);
        } else if ((x ==   1) && (this.xn<7)) { 
          this.xn++; this.upd(this.xn,this.xns);
        } else if ((x ==   2) && (this.yn>3)) { 
          this.yn--; this.upd(this.yn,this.yns);
        } else if ((x ==   3) && (this.yn<7)) { 
          this.yn++; this.upd(this.yn,this.yns);
        } else if (x>3&&x<6) { 
          this.scr(this.xn,this.yn);
        } else if (x>5&&x<8) { 
          this.lup(this.xn,this.yn);
        }
      }    
    } return i;
  }

Comments added to code only available in this post:

// .....
p16 = // .....
      // ....
{ h: "Puzzle 16" // not used yet / anymore - default values:
, t: 0     // getTime() of game begin
, ts: []   // time [fontsize,x,y] display specs for upd(v,s) 
, c: 0     // count of moves set to 0 at game begin
, cs: []   // count [fontsize,x,y] display specs for upd(v,s) 
, X: 240   // display size x - not used yet / anymore
, Y: 320   // display size y- not used yet / anymore
, x0: 0    // x / left in display of board top/left corner
, y0: 0    // y / top in display of board top/left corner
, xp: 240  // x board size in pixels
, yp: 320  // y board size in pixels
, x: 4     // x - horizontal - number of pieces (columns)
, y: 4     // y - vertical - number of pieces (rows)
, xn: 4    // x next for the next scramble or orderly setup
, yn: 4    // y next for the next scramble or orderly setup
, xns: []  // x next [fontsize,x,y] display specs for upd(v,s) 
, yns: []  // y next [fontsize,x,y] display specs for upd(v,s)
, m: 15    // max internal piece val 0..x*y-1, m = 'empty' piece 
, bl: 2    // border left in pixels
, bt: 40   // border top in px for time and moves display
, br: 2    // border right
, bb: 40   // border bottom for menu (+-x, +-y, SCR, ORD)
, xe: 0    // x (column 0..x-1) position of empty slot (piece) 
, ye: 0    // y (column 0..y-1) position of empty slot (piece)
, d: 60    // piece with and height (is always calc'd on scr / ord
, clrs: [[0,0,0],[1,1,1],[1,1,0],[0,0,1]] // rgb colors 0..3 used
, ps: []   // pieces (piece itself if array with value as 1st elt)
, ls: []   // locations of pieces by value (empty slot is last)
// tapped on screen at pixel xp,yp
//  .....

So much so far...