Mode 7 – Convert Java to Javascript

var pal = ["1fa046ff","0f4d21ff","22b14cff","3dda6bff","86e8a4ff"];
var pTexture = [
0,0,0,0,1,0,0,0,0,0,0,0,1,0,0,0,
0,0,0,0,1,0,0,0,0,0,0,0,1,0,0,0,
2,3,3,3,1,4,2,2,3,3,3,3,1,4,2,4,
1,1,1,3,1,1,1,1,1,1,3,1,1,1,1,1,
1,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,
1,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,
1,3,3,3,2,3,3,3,1,4,2,2,2,3,3,3,
1,1,3,1,1,1,1,1,1,1,1,1,1,1,3,1,
0,0,0,0,1,0,0,0,0,0,0,0,1,0,0,0,
0,0,0,0,1,0,0,0,0,0,0,0,1,0,0,0,
4,2,2,4,1,3,3,3,3,3,2,4,1,3,3,3,
1,1,1,1,1,1,1,3,1,1,1,1,1,1,1,1,
1,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,
1,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,
1,4,4,2,3,3,3,3,1,4,2,2,2,4,2,4,
1,1,3,1,1,1,1,1,1,1,1,1,1,3,1,1
];

var textureL = pTexture.size;
var textureW = Math.sqrt(textureL);
var textureH = textureW;

var canvas, ctx, canvasW, canvasH, centerW, centerH, camX, camY;
var scaleX = 1;
var scaleY = scaleY;

var CnvAng = Math.PI/180;
var a_lmt = 360*CnvAng;
var p_angle = -Math.PI/2;

var scaleX = 100;
var scaleY = 100;

var management = {};


// ??? mode7.digital camera.set(431, 345 + 16, 16);
var camX = 431;
var camY = 345+16;
var camZ = 16;

sprites = [
{"x":431,"y":345,"w":18,"h":12,"c":"Red"},
{"x":431,"y":321,"w":18,"h":12,"c":"Blue"},
{"x":431,"y":297,"w":18,"h":12,"c":"Fuchsia"},
{"x":431,"y":273,"w":18,"h":12,"c":"Orange"},
{"x":447,"y":333,"w":18,"h":12,"c":"Brown"},
{"x":447,"y":310,"w":18,"h":12,"c":"Orchid"},
{"x":447,"y":285,"w":18,"h":12,"c":"Aqua"},
{"x":447,"y":261,"w":18,"h":12,"c":"Teal"},
];

operate Most important() {
canvas = doc.getElementById("sport");
canvasW = canvas.width;
canvasH = canvas.peak;
centerW = canvasW/2;
centerH = canvasH/2;
ctx = canvas.getContext("second");
ctx.imageSmoothingEnabled = false;

doc.onkeydown = operate(e){
    management[e.keyCode] = 1;
}

doc.onkeyup = operate(e){
    management[e.keyCode] = 0;
}

doc.onwheel = operate(e){
    camZ += e.deltaY * 0.01;
    if (camZ < 1) {
        camZ = 1;
    }
}
Render()
}

operate Render() {
ctx.fillStyle = "Yellow"; //Background shade
ctx.fillRect(0, 0, canvasW, canvasH); // Draw background

var cos = Math.cos(p_angle);
var sin = Math.sin(p_angle);
var distance, ratio, shade, dx, dy, sx, sy, cx, cy;
for (y = centerH; y < canvasH; y++) {
    distance = (camZ * scaleY) / (y - centerH);
    ratio = distance / scaleX;

    dx = -sin * ratio;
    dy = cos * ratio;
    
    sx = camX + distance * cos - centerW * dx;
    sy = camY + distance * sin - centerH * dy;

    for (x = 0; x < canvasW; x++) {
        cx = Math.ground(Math.abs(sx % textureW));
        cy = Math.ground(Math.abs(sy % textureH));
        
        shade = pal[pTexture[cx+cy]];
        if (shade != undefined) {
            ctx.fillStyle = "#"+shade;
            ctx.fillRect(x,y, 1,1);
        }
        sx += dx;
        sy += dy;
    }
}

var seen = [];
var spr;
var objX = 0.1;
var objY = 0.1;

for (s in sprites) {
    spr = sprites[s];
    
    dx = spr.x - camX;
    dy = spr.y - camY;

    sx = dx * cos + dy * sin;
    sy = dy * cos - dx * sin;

    sw = spr.w;
    sh = spr.h;
    w = Math.ground(sw * scaleX / sx * objX);
    h = Math.ground(sh * scaleY / sx * objY);

    // Adverse peak, spr is behind digital camera
    if (h < 0 || w < 0) {
        proceed;
    }

    x = Math.ground(scaleX / sx * sy) + centerW;
    y = Math.ground((camZ * scaleY) / sx + centerH);

    // Align spr center-bottom
    o = {
        "kind":y,
        "sw":sw,
        "sh":sh,
        "x":(x - centerW),
        "y":(y - h),
        "w":w,
        "h":h,
        "c":spr.c,
        "id":s
    }

    seen.push(o);
}

seen = seen.kind((a, b) => a.kind - b.kind);

ctx.font = "18px Tahoma";
for (v in seen) {
    ctx.fillStyle = seen[v].c;
    ctx.fillRect(x,y,w,h);
    ctx.strokeRect(x,y,w,h);
}

ctx.font = "11px Tahoma";
ctx.fillStyle = "#000000cc";
ctx.fillRect(0, 0, 120, 42);
ctx.fillStyle = "Black";
ctx.fillText("CAM ANGLE: " + Math.ground(p_angle/CnvAng), 6, 12);
ctx.fillText("CAM X: " + Math.ground(camX) +" | Y: "+Math.ground(camY), 6, 24);
ctx.fillText("SCALE X: " + Math.ground(scaleX) +" | Y: "+Math.ground(scaleY), 6, 36);
ctx.fillStyle = "White";
ctx.fillText("CAM ANGLE: " + Math.ground(p_angle/CnvAng), 7, 13);
ctx.fillText("CAM X: " + Math.ground(camX) +" | Y: "+Math.ground(camY), 7, 25);
ctx.fillText("SCALE X: " + Math.ground(scaleX) +" | Y: "+Math.ground(scaleY), 7, 37);

if (management["87"]) {
    /*W*/
    camX += Math.cos(p_angle);
    camY += Math.sin(p_angle);
}
if (management["83"]) {
    /*S*/
    camX -= Math.cos(p_angle);
    camY -= Math.sin(p_angle);
}
if (management["65"]) {
    /*A*/
    p_angle -= 4*Math.PI/180;
}
if (management["68"]) {
    /*D*/
    p_angle += 4*Math.PI/180;
}
if (management["38"]) {
    /*ArrowUp*/
    scaleY += 1;
    scaleX += 1;
}
if (management["40"]) {
    /*ArrowDown*/
    scaleY -= 1;
    scaleX -= 1;
}

if (p_angle > 359*CnvAng) { //0.5
    p_angle -= Math.PI*2;
}
if (p_angle < 0*CnvAng) {
    p_angle += Math.PI*2;
}
setTimeout(Render, 1000/30);
}

window.onload = operate(e){
Most important();
}

canvas {
    float: left;
}

<canvas id="sport" width="256" peak="256"></canvas>
<pre>
W: Transfer ahead
S: Transfer again
A: Flip left
D: Flip proper
Wheel: Top' cam
ArrowUp: Scale Up
ArrowDown: Scale Down
</pre>