Landscape generator Tanks

http://stackoverflow.com/questions/17071412/algorithm-for-random-land-in-a-tank-wars-game

by Gustavo Carvalho

HTML

<canvas width="500" height="250" id="canvas">Sorry, no canvas available</canvas>
<a id="download" download="AbdiasCanvasDemo.png">Download as image</a>
<input type="button" value="New landscape" id="new" />

CSS

body {
	    background-color:#555557;
	    padding:0;
	    margin:0;
	    overflow:hidden;
	    font-family:sans-serif;
	    -webkit-user-select: none;
	    -khtml-user-select: none;
	    -moz-user-select: none;
	    -ms-user-select: none;
	    user-select: none;
	}
	canvas {
	    border:1px solid #000;
	    float:left;
	    clear:both;
        background:url(http://i41.tinypic.com/qxmfjs.jpg) no-repeat 0 -50px;
        background-size:100%;
	}
	#download {
	    clear:both;
        float:left;
	    cursor:pointer;
	    color:#ccc;
	    padding:3px;
	}
	#download:hover {
	    color:#fff;
	}
	/*
	div, input {
	    font-size:16px;
	    font-family:sans-serif;
	    border:1px solid #000;
	    border-radius: 5px;
	    float:left;
	    padding:5px;
	    width:50px;
	    margin:1px 1px;
	    background-color:#bbb;
	}
	input[type='text'] {
	    font-size:16px;
	    font-weight:bold;
	    width:70px;
	    text-align:center;
	    background-color:#fff;
	    padding-bottom:4px;
	}
	input[type='button'] {
	    font-size:16px;
	    font-weight:bold;
	    width:110px;
	    text-align:center;
	    background-color:#333;
	    color:#eee;
	    padding-bottom:4px;
	}
	input[type='button']:hover {
	    background-color:#fff463;
	    color:#000;
	}
	input[type='range'] {
	    width:100px;
	    margin:0 0 0 10px;
	}
*/

JavaScript

/**
 *    Ken Fyrstenberg Nilsen
 *    Abidas Software
*/
var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d');

document.getElementById('new').addEventListener('click', doCanvas, false);

/**
 * Functions for demo
 */
function doCanvas() {

    ctx.clearRect(0,0,canvas.width, canvas.height * 0.7);
    
    var numOfSegments = 9;
    var segment = canvas.width / numOfSegments;
    var i;
    var points = [];
    var variations = 0.22;
    
    //produce some random heights across the canvas
    for(i=0; i < numOfSegments + 1; i++) {
        points.push(segment * i);
        points.push(canvas.height / 2.8 + canvas.height * variations * Math.random());
    }
    ctx.beginPath();
    ctx.moveTo(canvas.width, canvas.height);
    ctx.lineTo(0, canvas.height);
    
    ctx.curve(points); //modfied curve overrides tension
    
    ctx.closePath();
    ctx.fillStyle = 'green';
    ctx.fill();
    
}

/**
 * Init generals
 */

function download() {
    var dt = canvas.toDataURL();
    this.href = dt; //this may not work in the future..
}
document.getElementById('download').addEventListener('click', download, false);

/*!
 *		curve (cardinal spline) extension for canvas version 1.0
 *
 *		This is the optimized version of drawCurve()
 *
 *		By Ken Fyrstenberg / Abdias Software (abdiassoftware.com) 2013
 *		Source code may be used for any kind of project.
*/
CanvasRenderingContext2D.prototype.curve = function(pts, tension, numOfSegments) {
		
	// use input value if provided, or use a default value	 
	tension = (tension != 'undefined') ? tension : 0.5;
	numOfSegments = numOfSegments ? numOfSegments : 16;

	var _pts = [], res = [],		// clone array
		x, y,						// our x,y coords
		t1x, t2x, t1y, t2y,			// tension vectors
		c1, c2, c3, c4,				// cardinal points
		st, st2, st3, st23, st32,	// steps
		t, i, l, r = 0;

	// clone array so we don't change the original
	_pts = pts.concat();

	_pts.unshift(pts[1]);			//copy 1. point and insert at...