JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

map chunk navigating.<br>Y: <input type='number' class='input_y' min='1' max='5' value='1'> X <input type='number' class='input_x' min='1' max='5' value='1'> <button class='chunk'>Chunk</button>
<br>

<br><span class='current_chunk'></span><br>
<div id='mapdiv'></div>

JavaScript

// Full map. Generated randomly for testing.
var full_map = [[]];

// 10x10 chunk of full map, currently active.
var current_chunk = [[]];

// or...
// full map, split into chunks at the beginning?
var chunk_map = [[[]]];

// Full 50x50 map is split into 25 chunks.
// So, 5 across and 5 high. Which chunk is active?
var chunk_x = 1;
var chunk_y = 1;

// Player co-ords, for movement across tiles.
var current_x = 0;
var current_y = 0;

fillRandomMap(50, 50);

$('.chunk').click(function(){
    var x = Number( $('.input_x').val() );
    var y = Number( $('.input_y').val() );
    calculateChunk(y, x);
});


function randomArray(array) {
    return array[Math.floor(Math.random() * array.length)];
  }

// Generate gibberish for testing.
function fillRandomMap(y, x){
    //full_map = [[]];
    /*
    for(i = 0; i < y; i++){
        for(j = 0; j < x; j++){
            full_map[i][j] = randomArray(['a','b','c','d','e','f']);
        }
    }
    */
    // Create array with 50 parts.
    full_map = new Array(y);
    // Go through each one, add another array.
    for (var i = 0; i < full_map.length; i++) {
        full_map[i] = new Array(x);
        
        // Fill with random letters.
        for(var j = 0; j < full_map[i].length; j++){
            full_map[i][j] = randomArray(['a','b','c','d','e','f']);
        }
        
    }
    
}

// Moving off the current chunk?
function calculateChunk(x, y){
    var cx = 5;
    var cy = 5;
    if(x < 11){cx = 1;}
    else if(x < 21){cx = 2;}
    else if(x < 31){cx = 3;}
    else if(x < 41){cx = 4;}
    if(y < 11){cy = 1;}
    else if(y < 21){cy = 2;}
    else if(y < 31){cy = 3;}
    else if(y < 41){cy = 4;}
    
    // Now, do we need to load new chunk?
    if(chunk_y != y || chunk_x != x){
        loadChunk(y, x);
    }
}

// Slice a 10x10 chunk out of the full map.
// Then update display etc.
function loadChunk(y, x){
    // Default, if both are 1.
    var start_x = 0; var start_y = 0;
    if(y == 2){ start_y = 10; }
    if(y ==...