JSFiddle - React, Tailwind, and code Playground

by Drath

HTML

<canvas id="map" width="256" height="256" ></canvas>

JavaScript

var random = new RNG(3149660160);

function RNG(seed) {
    //Standard PRNG values
    var m = 0x100000000, a = 1103515245, c = 12345, state = seed;
    
    //This goes to the next value in the "seed"
    this.nextInt = function() {
        state = (a * state + c) % m;
        return state;
    }
        
    //This returns the value from each position, usually something like: 0.10751..., then calls the next value with nextInt
    this.nextFloat = function() { return this.nextInt() / (m - 1); }
    
}

tile = [];
map = document.getElementById('map').getContext('2d');

//Let's make a 256x256 map
for(var x=0; x < 256; x++) {
    tile[x] = tile[x] || {};
    for(var y =0; y < 256; y++) {
        //Assign the tile to the value recieved from RNG
        tile[x][y] = Math.round(random.nextFloat()*255);
        c = tile[x][y];
        
        if(c<90) { 
            cd = '#0a69c9'; // deep water
        } else if(c<120) { 
            cd = '#0c80f7'; // shallow water
        } else if(c<135) { 
            cd = '#ddcb75'; // sand
        } else if (c<140) {  
            cd = '#b58233'; // gravel
        } else if (c<150) { 
            cd = '#3d610a';     // grass (no trees)
        } else if (c<165) { 
            cd = '#0e541e'; // forest
        } else if (c<170) { 
            cd = '#3d610a'; // grass (no trees)
        } else if (c<185) { 
           cd = '#684b2e'; // dirt               
        } else if (c<186) { 
            cd = '#727064'; // rock
        } else if (c<220) { 
            cd = '#727064'; // rock
        } else if (c<240) { 
            cd = '#54524c'; // deep mountains
        } else { 
           cd = '#ffffff'; // snow
        }        
        
        map.fillStyle = cd;
        map.fillRect(x*2, y*2, 2, 2); 

    }
}