Pseudo Mode7

by DevWithCoffee

HTML

<canvas id="screen" width="480", height="240"></canvas>
<pre>Forward: W | Back: S | Rotate Left: A | Rotate Right: D
WheelUp: Further (Scale) | WheelDown : Closer (Scale)
ArrowUP/ArrowDow : Further (ScaleY)
ArrowLeft/ArrowRight : Further (ScaleX)</pre>

JavaScript

var pal = ["880015","5E000E","B7001C"];
var pTexture = [
0,0,0,0,1,0,0,0,
0,0,0,0,1,0,0,0,
2,2,2,2,1,2,2,2,
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,2,2,2,2,2,2,2,
1,1,1,1,1,1,1,1
];
var textureW = 8;
var textureH = 8;
var ctx, canvasW, canvasH, centerH;

var qPI = 0.7853981633974483; // 45 degrees
var p_angle = qPI*7; // FaceUP in Game

var scaleX, scaleY, scaleLmt, camX, camY;

var control = {};

function Main() {
	// Var Scale
	scaleX = 1;
	scaleY = 1;
	scaleLmt = scaleX*300;
	
	// Center Tile 0x0 + loop map
	camX = 15; //(textureW*2)+8;
	camY = 15; //((textureH*2)+8) * -1;
	
	var canvas = document.getElementById("screen");
	canvasW = canvas.width;
	canvasH = canvas.height;
	centerH = canvasH/2;
    ctx = canvas.getContext("2d");
	ctx.fillStyle = "yellow"; //Background color
	ctx.fillRect(0, 0, canvasW, canvasH); // Draw background	

	document.body.addEventListener("keydown", function (e) {
		control[e.keyCode] = 1;
	});

	document.body.addEventListener("keyup", function (e) {
		control[e.keyCode] = 0;
	});
	
	document.body.addEventListener('wheel', function(e){
		if (e.deltaY < 0) {
			scaleX += 0.2;
			scaleY += 0.2;
		}
		if (e.deltaY > 0) {
			scaleX -= 0.2;
			scaleY -= 0.2;
		}
	});
	
	setInterval(Render,60);
}

function Render() {
	var d, y2, x2;
	var cos = Math.cos(p_angle);
	var sin = Math.sin(p_angle);
	var z = 1;
	
	if (scaleX < 1) {
		scaleX = 1;
	}
	if (scaleY < 1) {
		scaleY = 1;
	}
	if (scaleX > scaleLmt) {
		scaleX = scaleLmt;
	}
	if (scaleY > scaleLmt) {
		scaleY = scaleLmt;
	}
	for (y = centerH; y < canvasH; y++) {
		for (x = 0;x < canvasW;x++) {
			y2 = ((canvasW - x) * cos - x * sin) / z;
			x2 = ((canvasW - x) * sin + x * cos) / z;
			if (z < 0) {
				x2 -= (camX/scaleX);
				y2 -= (camY/scaleY);
			} else {
				x2 += (camX/scaleX);
				y2 += (camY/scaleY);
			}
			if (y2 < 0) {
				y2 *= -1;
			}
			if (x2 < 0) {
				x2 *= -1;
			}
			y2 *= scaleY;
			x2 *= scaleX;

			x2 %= textureW;
			y2 %= textureH;
			
			d =...