JSFiddle - React, Tailwind, and code Playground

by Johan Preynat

HTML

<table id="badgame"></table>
<table id="game"></table>

JavaScript

var str = "........####.............##..##...............#.......&&&&&&......&&&&&&.........&..&&&....%..##.&&&&&......##......&&&......................#..................";

function makeWrongTableFrom(str) {
    
    var k = 1,
        result = "";
    
    for (var i = 1; i <= 8; i++) {
        result += '<tr>';
        
        for (var j = 1; j <= 20; j++) {
            
            if (str[k] === '#') {
                result += '<td id="' + k + '">#</td>';
            }
            else if (str[k] === '&') {
                result += '<td class="click" val="water" id="' + k + '">&</td>';
            }
            else {
                result += '<td class="click" id="' + k + '"><a href="#"></a></td>';
            }
            
            k++;
        }
        
        result += '</tr>';
    }
    
    return result;
}

function makeTableFrom(str) {
    
    var k = 1,
        result = "";
    
    for (var i = 1; i <= 8; i++) {
        result += '<tr>';
        
        for (var j = 1; j <= 20; j++) {
            
            if (str[k-1] === '#') {
                result += '<td id="' + k + '">#</td>';
            }
            else if (str[k-1] === '&') {
                result += '<td class="click" val="water" id="' + k + '">&</td>';
            }
            else {
                result += '<td class="click" id="' + k + '"><a href="#"></a></td>';
            }
            
            k++;
        }
        
        result += '</tr>';
    }
    
    return result;
}

$('#badgame').html(makeWrongTableFrom(str));
$('#game').html(makeTableFrom(str));