berak · November 27, 2011 15:41
diff --git a/gistfile1.html b/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>