Databases
StackOverflow2013
Postsdbo
POHow can I use an algorithm to randomly generate a "map" using preset images?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow can I use an algorithm to randomly generate a "map" using preset images?
    text
    copied!<p>I am working with some javascript to create a nice little image "map". I do not mean an image map like mapping out parts of an image, but I mean to have preset images form an array shown according a set pattern produced by an algorithm.</p> <p>How can I make it so that the images have some sort of a basic pattern to them?</p> <p>[edit 1]</p> <p>I do understand that I would need to make the images form by columns at first, then by rows.</p> <p>***I am now rewriting the format to do the above line.</p> <p>If it helps, I would like the grass to be on top, then the dirt for three blocks under that, and then stone and cobble under those. The grass is always one layer deep, and I want air on the very top to give the blocks the sense of height. The air can be any height, but it needs to be one higher or lower then the ones next to it.</p> <p>[/edit 1]</p> <p>[edit 2]</p> <p>Here is a link to what it does so far: <a href="http://cl.ly/2s1h213E332r3i3v2a01" rel="nofollow">http://cl.ly/2s1h213E332r3i3v2a01</a></p> <p>Here is a zip of the site so far: <a href="http://cl.ly/1T0f2P1G333T1N1u0c31" rel="nofollow">http://cl.ly/1T0f2P1G333T1N1u0c31</a></p> <p>I'm trying to make it look more organized like I discribed in [edit 1].</p> <p>[/edit 2]</p> <pre><code>&lt;html&gt; &lt;body&gt; &lt;script type="text/javascript"&gt; var blockList = 'air,stone,grass,dirt,cobble,plank'; function blockGetId(ID) { var blockGet = blockList.split(",")[ID]; return '&lt;img src="images/' + blockGet + '.png" /&gt;'; } function blockRandom() { var blockCount = blockList.split(",").length; var blockId = Math.round(Math.random()*(blockCount-1)); document.write(blockGetId(blockId)); } function rowTable(width) { var w = 0; while ( w &lt; width ) { document.write('&lt;td class="cell"&gt;'); blockRandom(); document.write(' &lt;/td&gt;'); w++; } } function blockTable(width, height) { var h = 0; document.write('&lt;table class="cell"&gt;&lt;style&gt;.cell{width:16px;height:16px;colspacing:0px;margin:0px;padding:0px;}.cell hover{border: 5px;}&lt;/style&gt;'); while ( h &lt; height ) { document.write('&lt;tr class="cell"&gt;'); rowTable(width); document.write('&lt;/tr&gt;'); h++; } document.write('&lt;/table&gt;'); } blockTable(25,25); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload