JSFiddle - React, Tailwind, and code Playground

by Brondem Brondem

HTML

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

JavaScript

var DIRECCION={arriba:0, derecha:1, abajo:2, izquierda:3 };

function crearGuia( jugador, mapa ) {
    fils = mapa.length - 2;
    cols = mapa[0].length - 2;
    rectangulos = [];
    var limites, k;
    var guia = {};
    matriz = [
        [jugador[0],jugador[1]],
        [      fils,      cols],
        [     [1,0],     [0,1]],
        [     [0,2],     [3,1]]
    ];
    var k;
    if       ( fils % 2 == 0 ) {
        guia.horizontal = 1;
        k = [1,0];
    } else if( cols % 2 == 0 ) {
        guia.horizontal = 0;
        k = [0,1];
    } else {
        // ??
    }
    guia.avance = matriz[3][k[1]];

    var pos = matriz[0][k[0]];
    var top = matriz[1][k[0]];

    var z = matriz[1][k[1]];
    var x = matriz[0][k[1]];
    if( matriz[0][k[1]] % 2 == 0 ) {
        guia.hacia         = [1,z,x+1];
        guia.sentidoAvance = 0;
    } else {
        guia.hacia         = [z,1,x-1];
        guia.sentidoAvance = 1;
    }

    var W = matriz[3][k[0]][0];
    var E = matriz[3][k[0]][1];
    if( pos <= top/2 ) {
        guia.limites = [[  1, pos], [pos+1,top]];
        guia.pasos   = [W,E];
    } else {
        guia.limites = [[top, pos], [pos-1,  1]];
        guia.pasos   = [E,W]
    }
    guia.sentidoPasos = 0;
    guia.count        = 0;

    return guia;
}

function nuevaDireccion( posicion, guia ) {
    var i = guia.sentidoAvance;
    var j = guia.sentidoPasos;
    var k = guia.horizontal;
    if( posicion[k] == guia.limites[guia.count%2][j] ) {
        if( posicion[k?0:1] == guia.hacia[guia.count] ) {

            ++guia.count;
            guia.sentidoAvance = i ? 0 : 1;
            return guia.pasos[j];
        } else {
            guia.sentidoPasos = j ? 0 : 1;
            return guia.avance[i];
        }
        
    } else {
        return guia.pasos[j];
    }

}

var guia;

function TRON(canvas){
    this.timer=100;
    
    this.canvas=canvas;
    this.ctx=this.canvas.getContext("2d");
    
    this.ladoCelda=10;
    
   ...