JSFiddle - React, Tailwind, and code Playground

by Tgwizman

HTML

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

JavaScript

// MMORPG (Unnamed)
// By Tyler Keohane
//
// Some info about the land generator:
// max_x: 9007199254740992
// max_y: 9007199254740992
// length_x: 18014398509481985
// length_y: 18014398509481985
// total_blocks: 324518553658426762811953039540225
// THAT'S 324,518,553,658,426,762,811,953,039,540,225 BLOCKS!!!

var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');

tileWidth = 32;
currentZoom = 1;
maxZoom = 5;

canvas.width = window.innerWidth - 4;
canvas.height = window.innerHeight - 4;

var player = {
    pos: {
        x: 0,
        y: 0
    }
};

var N=[];function n(a,b){if(!N[a])N[a]=[];if(!N[a][b])N[a][b]=(Math.random()-.5)*2;return N[a][b];}function i(a,b,c){f=(1-Math.cos(c*Math.PI))*.5;return a*(1-f)+b*f}function sn(a,b){return((n(a-1,b-1)+n(a+1,b-1)+n(a-1,b+1)+n(a+1,b+1))/16)+((n(a-1,b)+n(a+1,b)+n(a,b-1)+n(a,b+1))/8)+(n(a,b)/4);}function PN(a,b){iX=Math.floor(a*0.1);iY=Math.floor(b*0.1);fX=(a*0.1)-iX;fY=(b*0.1)-iY;return 0+(i(i(sn(iX,iY),sn(iX+1,iY),fX),i(sn(iX,iY+1),sn(iX+1,iY+1),fX),fY))*7;}

function isCollision(x, y) {
    var collision = false;

    if (PN(x,y) < -1.5) {
        collision = true;
    }
    
    return collision;
}

function spawnOnLand() {
    player.pos.x = Math.floor(Math.random()*16-8);
    player.pos.y = Math.floor(Math.random()*16-8);
    if (isCollision(player.pos.x,player.pos.y)) {
        player.pos.x = Math.floor(Math.random()*16-8);
        player.pos.y = Math.floor(Math.random()*16-8);
        spawnOnLand();
    }
}
spawnOnLand();

function genScreen(a, b) {
    var x, y, pn;

    var blocks = [
        [2.5,'#FF0'], // desert
        [2.5,'#0F0'], // grass
        [0,'#FF0'], // beach
        [-0.5,'#00F'], // water
        [-1.5,'#00C'] // deep water
    ];

    ctx.fillStyle = '#FFF';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    for (x = -canvas.width/(tileWidth*2); x < canvas.width/(tileWidth*2); x++) {
        for (y = -canvas.height/(tileWidth*2); y < canvas.height/(tileWidth*2);...