berak/gist:1397713

## gistfile1.html
<html><head>
        <!--link rel="icon" href='/favicon.ico'-->
        <title>random_walk_03p_01.map</title>
        <style>
    a{
        text-decoration: none;
        color:#666;
    }
    a:hover{
        color:#aaa;
    }
    body {
        font-family:Calibri,Helvetica,Arial;
        font-size:9pt;
        color:#111;
    }
    iframe,textarea,input,button,select,option,scrollbar,input[type="file"]{
        font-family: Arial, "MS Trebuchet", sans-serif;
        font-size: 8pt;
        border-color:#777;
        border-style:solid;
        border-width:1
    }
    hr {
        color:#111;
        background-color:#555;
    }
</style></head>
<body onLoad='resetMap()'>
	<form name='foo'> &nbsp;&nbsp;&nbsp;
		<textarea id='output' cols='60' rows='8' noscroll></textarea>
		<p>&nbsp;&nbsp;&nbsp;
		<input id='pix' title='pixel size' size=1 value='50'> &nbsp;&nbsp;&nbsp;
		<input id='rows' title='rows' size=3 value='4'>
		<input id='cols' title='cols' size=3 value='4'>
		<input type = 'button' value='reset' onClick='resetMap();'> &nbsp;&nbsp;&nbsp;
		<input type='radio' name='what' value='water' title='water' checked>
		<input type='radio' name='what' value='land' title='land'>
		<input type='radio' name='what' value='mine' title='mine'>
		<input type='radio' name='what' value='enemy' title='enemy'>
		<input type='radio' name='what' value='food' title='food'>
		<input type='radio' name='what' value='my_hill' title='my hill'>
		<input type='radio' name='what' value='enemy_hill' title='enemy hill'>
	</form>
    <br>
    &nbsp;&nbsp;&nbsp;<canvas width=800 height=800 id='C'><p>
<script>
	var jsmap=["...","...","..."]

	var square = 5
	var C = document.getElementById('C')
	var V = C.getContext('2d');
	C.onmousedown=function(ev)
	{
		var rows = parseInt(document.getElementById('rows').value)
		var cols = parseInt(document.getElementById('cols').value)
		//~ var what = document.getElementById('what').value
		var what = document.foo.what
		for ( z in what ) {
			it = what.item(z)
			if (it.checked) {
				what = it.value
				break
			}
		}

		var obj = C;
		var top = 0;
		var left = 0;
		while (obj.tagName != 'BODY') {
			top += obj.offsetTop;
			left += obj.offsetLeft;
			obj = obj.offsetParent;
		}
		var c = ev.clientX - left;
		var r = ev.clientY - top;
		c = 0|(c/square)
		r = 0|(r/square)
		//~ alert(what + " " + rows + " " + cols + " "  + r + " " + c);// + " : " + ev.clientY + " " + ev.clientX + " _ " + top + " " + left)
		if ( (c < cols) && (r < rows) ) {
			if ( what == 'water' ) 	jsmap[r][c] = '%'
			if ( what == 'land'  ) 	jsmap[r][c] = '.'
			if ( what == 'mine' ) 	jsmap[r][c] = 'a'
			if ( what == 'enemy' ) 	jsmap[r][c] = 'b'
			if ( what == 'food' ) 	jsmap[r][c] = '*'
		}
		redraw()
		redrawOutput()
	}


	function resetMap() {
		var P = document.getElementById('pix')
		square = parseInt( P.value )

		var W = document.getElementById('cols')
		var H = document.getElementById('rows')
		var h = parseInt(H.value)
		var w = parseInt(W.value)
		jsmap = []

		for (var r=0; r<h; r++) {
			var line = []
			for (var c=0; c<w; c++) {
				line[c] = '.'
			}
			jsmap[r] = line
		}
		redraw()
		redrawOutput()
	}

	function redrawOutput() {
		var o = document.getElementById('output')
		o.value = ""
		o.value += 'rows ' + jsmap.length + '\n'
		o.value += 'cols ' + jsmap[0].length + '\n'
		for (var r=0; r<jsmap.length; r++) {
			o.value += 'm '
			for (var c=0; c<jsmap[r].length; c++) {
				o.value += jsmap[r][c]
			}
			o.value += '\n'
		}
	}

	function redraw() {
		V.fillRect(0,0,800,800)
		var colors = { '%':'#1e3f5d', '.':'#553322', 'a':'#4ca9c8', 'b':'#6a9a2a', 'c':'#8a2b44', 'd':'#ff5d00', 'e':'#4ca9c8', 'f':'#6a9a2a', 'g':'#8a2b44', 'h':'#ff5d00', '0':'#4ca9c8', '1':'#6a9a2a', '2':'#8a2b44', '3':'#ff5d00', '4':'#4ca9c8', '5':'#6a9a2a', '6':'#8a2b44', '7':'#ff5d00' }
		for (var r=0; r<jsmap.length; r++) {
			var line = jsmap[r]
			for (var c=0; c<line.length; c++) {
				V.fillStyle = colors[line[c]]
				V.fillRect(c*square,r*square,square,square);
			}
		}
	}
	</script>
	</canvas>
	<p>
	<!--div id='output' width='60' height='40'></div-->
	<br> &nbsp;<a href=#top title='crawl back to the top'> ^^^</a>
</body></html>
	<html><head>
	<!--link rel="icon" href='/favicon.ico'-->
	<title>random_walk_03p_01.map</title>
	<style>
	a{
	text-decoration: none;
	color:#666;
	}
	a:hover{
	color:#aaa;
	}
	body {
	font-family:Calibri,Helvetica,Arial;
	font-size:9pt;
	color:#111;
	}
	iframe,textarea,input,button,select,option,scrollbar,input[type="file"]{
	font-family: Arial, "MS Trebuchet", sans-serif;
	font-size: 8pt;
	border-color:#777;
	border-style:solid;
	border-width:1
	}
	hr {
	color:#111;
	background-color:#555;
	}
	</style></head>
	<body onLoad='resetMap()'>
	<form name='foo'>
	<textarea id='output' cols='60' rows='8' noscroll></textarea>
	<p>
	<input id='pix' title='pixel size' size=1 value='50'>
	<input id='rows' title='rows' size=3 value='4'>
	<input id='cols' title='cols' size=3 value='4'>
	<input type = 'button' value='reset' onClick='resetMap();'>
	<input type='radio' name='what' value='water' title='water' checked>
	<input type='radio' name='what' value='land' title='land'>
	<input type='radio' name='what' value='mine' title='mine'>
	<input type='radio' name='what' value='enemy' title='enemy'>
	<input type='radio' name='what' value='food' title='food'>
	<input type='radio' name='what' value='my_hill' title='my hill'>
	<input type='radio' name='what' value='enemy_hill' title='enemy hill'>
	</form>
	<br>
	<canvas width=800 height=800 id='C'><p>
	<script>
	var jsmap=["...","...","..."]

	var square = 5
	var C = document.getElementById('C')
	var V = C.getContext('2d');
	C.onmousedown=function(ev)
	{
	var rows = parseInt(document.getElementById('rows').value)
	var cols = parseInt(document.getElementById('cols').value)
	//~ var what = document.getElementById('what').value
	var what = document.foo.what
	for ( z in what ) {
	it = what.item(z)
	if (it.checked) {
	what = it.value
	break
	}
	}

	var obj = C;
	var top = 0;
	var left = 0;
	while (obj.tagName != 'BODY') {
	top += obj.offsetTop;
	left += obj.offsetLeft;
	obj = obj.offsetParent;
	}
	var c = ev.clientX - left;
	var r = ev.clientY - top;
	c = 0\|(c/square)
	r = 0\|(r/square)
	//~ alert(what + " " + rows + " " + cols + " " + r + " " + c);// + " : " + ev.clientY + " " + ev.clientX + " _ " + top + " " + left)
	if ( (c < cols) && (r < rows) ) {
	if ( what == 'water' ) jsmap[r][c] = '%'
	if ( what == 'land' ) jsmap[r][c] = '.'
	if ( what == 'mine' ) jsmap[r][c] = 'a'
	if ( what == 'enemy' ) jsmap[r][c] = 'b'
	if ( what == 'food' ) jsmap[r][c] = '*'
	}
	redraw()
	redrawOutput()
	}


	function resetMap() {
	var P = document.getElementById('pix')
	square = parseInt( P.value )

	var W = document.getElementById('cols')
	var H = document.getElementById('rows')
	var h = parseInt(H.value)
	var w = parseInt(W.value)
	jsmap = []

	for (var r=0; r<h; r++) {
	var line = []
	for (var c=0; c<w; c++) {
	line[c] = '.'
	}
	jsmap[r] = line
	}
	redraw()
	redrawOutput()
	}

	function redrawOutput() {
	var o = document.getElementById('output')
	o.value = ""
	o.value += 'rows ' + jsmap.length + '\n'
	o.value += 'cols ' + jsmap[0].length + '\n'
	for (var r=0; r<jsmap.length; r++) {
	o.value += 'm '
	for (var c=0; c<jsmap[r].length; c++) {
	o.value += jsmap[r][c]
	}
	o.value += '\n'
	}
	}

	function redraw() {
	V.fillRect(0,0,800,800)
	var colors = { '%':'#1e3f5d', '.':'#553322', 'a':'#4ca9c8', 'b':'#6a9a2a', 'c':'#8a2b44', 'd':'#ff5d00', 'e':'#4ca9c8', 'f':'#6a9a2a', 'g':'#8a2b44', 'h':'#ff5d00', '0':'#4ca9c8', '1':'#6a9a2a', '2':'#8a2b44', '3':'#ff5d00', '4':'#4ca9c8', '5':'#6a9a2a', '6':'#8a2b44', '7':'#ff5d00' }
	for (var r=0; r<jsmap.length; r++) {
	var line = jsmap[r]
	for (var c=0; c<line.length; c++) {
	V.fillStyle = colors[line[c]]
	V.fillRect(csquare,rsquare,square,square);
	}
	}
	}
	</script>
	</canvas>
	<p>
	<!--div id='output' width='60' height='40'></div-->
	<br>  <a href=#top title='crawl back to the top'> ^^^</a>
	</body></html>