arbitrary_playfield_05.html

 <html>
 <head>
 <title> arbitrary playfield table </title>

 <script>
 var c = 8, r = 16, w = c * 8, ra = 0, cn = 0, clt, fl = "", out = "";
 var p2 = ""; for(i=1; i<=128; i*=2){p2=String.fromCharCode(i)+p2;};
 clt ="0000004040406c6c6c909090b0b0b0c8c8c8dcdcdcffffff444400646410848424a0a034b8b840d0d050e8"
 clt+="e85cfcfc68702800844414985c28ac783cbc8c4ccca05cdcb468ecc878841800983418ac5030c06848d080"
 clt+="5ce09470eca880fcbc948800009c2020b03c3cc05858d07070e08888eca0a0fcb4b478005c8c2074a03c88"
 clt+="b0589cc070b0d084c0dc9cd0ecb0e0480078602090783ca48c58b8a070ccb484dcc49cecd4b0fc14008430"
 clt+="20984c3cac6858c07c70d09488e0a8a0ecbcb4fc0000881c209c3840b0505cc06874d07c8ce090a4eca4b8"
 clt+="fc00187c1c38903854a85070bc6888cc7c9cdc90b4eca4c8fc002c5c1c4c783868905084ac689cc07cb4d4"
 clt+="90cce8a4e0fc003c2c1c5c48387c64509c8068b4947cd0ac90e4c0a4fcd4003c00205c20407c405c9c5c74"
 clt+="b4748cd08ca4e4a4b8fcb8143800345c1c507c386c985084b4689ccc7cb4e490c8fca42c30004c501c6870"
 clt+="34848c4c9ca864b4c078ccd488e0ec9c442800644818846830a08444b89c58d0b46ce8cc7cfce08c"

 document.write("<div id=\"btns\"></div><br><div id=\"world\"></div><div id=\"tbl\"></div>");
 nin("columns","col",4,8,4,32,"chcl");
 nin("rows","row",4,11,11,32,"chrw");
 nin("BG","bg",3,84,0,255,"chbgc");
 nin("PF","pf",3,44,0,255,"chpfc");
 out+="<input type=\"text\" id=\"wnm\" size=\"16\" value=\"world_data\">";
 btns.innerHTML=out;

 function nin(txt,id,size,val,min,max,onch){
  out += txt + " <input type=\"number\" id=\"" + id + "\" size=\"" + size + "\"";
  out += " value=\"" + val + "\" min=\"" + min + "\" max=\"" + max + "\"";
  out += " onchange = \"" + onch + "(this.value)\">    ";}

 function getc(p){return clt.substr((p&126)*3,6)}

 var pfc = getc(pf.value), bgc = getc(bg.value); c = col.value; r = row.value
 var ci, bm

 function gcfl(p){ci = Math.floor(p/8); bm = p2.charCodeAt(p&7); return fl.charCodeAt(ci);}

 function settcc(p){document.getElementById("c"+p).style.backgroundColor=p}

 function flip(p){
   var cc = gcfl(p)
   fl = fl.substr(0,ci)+String.fromCharCode(cc^bm)+fl.substring(ci+1,fl.length);
   document.getElementById("c"+p).className=cc&bm?"tbclbg":"tbclpf";
   wtbl();}


 function chrw(p){r=p; wwld(); wtbl();}
 function chcl(p){c=p; wwld(); wtbl();}
 function chbgc(p){
 bgc = getc(p)
 document.getElementById("bgs").innerHTML = " .tbclbg {border:1px solid grey; background-color:#"+ bgc +";}";}

 function chpfc(p){
 pfc = getc(p)
 document.getElementById("pfs").innerHTML = " .tbclpf {border:1px solid grey; background-color:#"+ pfc +";}";}


 var cont = "";

 function write(p){world.innerHTML=p}

 function wtbl(){
 function hxd(p){return "0123456789ABCDEF".charAt(p & 15);}
 function hxn(q){return " $" + hxd(q/16) + hxd(q);}
  cont = "<pre><br>  data " + wnm.value + "\n "
  for (i=0, j=0; i<fl.length; i++){j++; cont+= hxn(fl.charCodeAt(i)) + (j&15?"":"\n ");}
  cont += (j&15?"\n ":"") + "end\n";
  cont = cont.replace(/\n/g,"<br>"); cont =  cont.replace(/ /g,"&nbsp;");
  tbl.innerHTML=cont + "<br></pre><br>";
 }

 function wwld(){
 var z = String.fromCharCode(0); while (z.length<c){z = z+z}; z = z.substr(0,c);
 for (i=0, fl=""; i<r; i++){fl+=z};
 var w = c * 8, ra, cn, tw = w * 8;
 cont = "<table style=\"border-collapse:collapse; width:" + tw + "px; height:12px;\">"

 for (ri = 0; ri<r; ri++){
   ra = ri*w; cont += "<tr>";
   for (ci = 0; ci<w; ci++){
     cn=ra+ci;
     cont += "<td ID=\"c" + cn + "\" class=\"tbclbg\" onclick=\"flip(" + cn + ")\">&nbsp;</td>";
   }
   cont += "</tr>";
 }
 cont += "</table><br>"
 world.innerHTML = cont;}

  wwld(); wtbl();

 </script>

 <style id="bgs"> .tbclbg {border:1px solid grey; background-color:#0000FF;}</style>
 <style id="pfs"> .tbclpf {border:1px solid grey; background-color:#FF0000;}</style>
 </head>

 <body>
 </body>
 </html>