Exploring 2.8" Color TFT Touch LCD by Pacman Game attempt

ADDED 2021/10/04: ...great help for coding the underlaying ILI9341 display controller

The moment I did some basic setup, set some pixel and drew some lines, I knew that performance is a challenge... especially when driving the display over SPI... Therefore, graphics take a bit a back seat vs. simplification. ;-)

Here some basic code:

// Exploring 2.8" Color TFT Touch LCD by Pacman Game attempt 

// [0r0] - [1v67] release / version info

// basic setup: light on, SPI, graphics context
B2.set();
SPI1.setup({sck:B3, miso:B4, mosi:B5, baud: 1000000});
var g = require("ILI9341").connect(SPI1, B6, B8, B7, function() {});

var G = // Game
{ g: null  // Grapics
, c: function() { this.g.clear(); } // clear
, clrs:    // colors (6 bit color depth, 262K colors)
    [ 0    // black
    , 63 * (64*64) + 63 * (64) +  0 // yellow
    ,  0 * (64*64) +  0 * (64) + 63 // blue
    , 63 * (64*64) + 63 * (64) + 63 // white
    ]
, clr: null // color index
, sClr: function(cdx) {
    if (this.clr != this.clrs[cdx]) {
      this.clr = this.clrs[cdx];
      this.g.setColor(this.clr);
    }
  }
, ini: function(g) {
    this.g = g;
    this.c();
  }
};

var P = // Pacman
{ g: null // Graphics
, x: 0    // pos x
, y: 0    // pos y
, d: null // direction E, S, W, N phases start = 0, 4, 8, and 12) 
, s: 0    // next state 0..15, show and hide states for mouth closed and open
          // advancing halft a cell with before showing
          // (0,4,8,12 = on cell center, mouth closed, facing E,S,W,N)
, f: null // function for each state (0..15)
, w: 10   // with
, b:  6   // base
, o:  8   // open
, c:  3   // closed
, sp: function() {}
, se: function(i,m) {
  G.sClr(i);
  g.drawLine(this.x - this.b, this.y, this.x + this.b, this.y - m);
  g.drawLine(this.x - this.b, this.y, this.x + this.b, this.y + m);
 }
, ss: function(i,m) {
  G.sClr(i);
  g.drawLine(this.x, this.y - this.b, this.x - m, this.y + this.b);
  g.drawLine(this.x, this.y - this.b, this.x + m, this.y + this.b);
 }
, sw: function(i,m) {
  G.sClr(i);
  g.drawLine(this.x + this.b, this.y, this.x - this.b, this.y - m);
  g.drawLine(this.x + this.b, this.y, this.x - this.b, this.y + m);
 }
, sn: function(i,m) {
  G.sClr(i);
  g.drawLine(this.x, this.y + this.b, this.x + m, this.y - this.b);
  g.drawLine(this.x, this.y + this.b, this.x - m, this.y - this.b);
 }
, s0: function(s,x,y) {
  this.s = s;
  this.x = (s == 0) ? x - this.w : (s ==  8) ? x + this.w : x;
  this.y = (s == 4) ? y - this.w : (s == 12) ? y + this.w : y;
  this.f[this.s]();
}
, n: function() {
  this.f[this.s]();
  this.f[this.s]();
  }
, ini: function(g) {
  this.g = g;
  var _this = this;
  this.f =
    [ function() { _this.x = _this.x + _this.w; 
                   _this.se(1,_this.c); _this.s =  1; }
    , function() { _this.se(0,_this.c); _this.s =  2; } // 1/2
    , function() { _this.x = _this.x + _this.w; 
                   _this.se(1,_this.o); _this.s =  3; }
    , function() { _this.se(0,_this.o); _this.s =  0; } // 1/1 E
    , function() { _this.y = _this.y + _this.w; 
                   _this.ss(1,_this.c); _this.s =  5; }
    , function() { _this.ss(0,_this.c); _this.s =  6; } // 1/2
    , function() { _this.y = _this.y + _this.w; 
                   _this.ss(1,_this.o); _this.s =  7; }
    , function() { _this.ss(0,_this.o); _this.s =  4; } // 1/1 S
    , function() { _this.x = _this.x - _this.w; 
                   _this.sw(1,_this.c); _this.s =  9; }
    , function() { _this.sw(0,_this.c); _this.s = 10; } // 1/2
    , function() { _this.x = _this.x - _this.w; 
                   _this.sw(1,_this.o); _this.s = 11; }
    , function() { _this.sw(0,_this.o); _this.s =  8; } // 1/1 W
    , function() { _this.y = _this.y - _this.w; 
                   _this.sn(1,_this.c); _this.s = 13; }
    , function() { _this.sn(0,_this.c); _this.s = 14; } // 1/2
    , function() { _this.y = _this.y - _this.w; 
                   _this.sn(1,_this.o); _this.s = 15; }
    , function() { _this.sn(0,_this.o); _this.s = 12; } // 1/1 N
  ];
 }
};

setTimeout(function(){
    G.ini(g);
    P.ini(g);
  },1500);

var tt = 100;         // [ms] timout time for next phase, 4 phases per cell)
var x0 = 20, y0 = 70; // left, top (left top corner of square w/ nmx cells) 
var n, nmx = 10;      // n = cell, nmx = max cells (in x and y direction)

// pacman walking E, S, W, N:
function ne() { P.s0( 0,x0        ,y0        ); n0(); }
function ns() { P.s0( 4,x0+nmx*P.w,y0        ); n0(); }
function nw() { P.s0( 8,x0+nmx*P.w,y0+nmx*P.w); n0(); }
function nn() { P.s0(12,x0        ,y0+nmx*P.w); n0(); }

function n0() { n = 0; setTimeout("nx();",tt); }
function nx() { 
  if (n < nmx) { n++;
    P.n();
    setTimeout("nx();",tt);
  } else {
    P.f[P.s]();
  }
 }

To let Pacman walk E (x-axis), S (y-axis), W, or N, enter in IDE's command window (one at a time):

• ne();
  
• ns();
  
• nw();
  
• nn();
  
  

[1of2] to be continued... Exploring 2.8" Color TFT Touch LCD by Pacman Game attempt