Landscape generator Tanks + slope

by neosoyn

HTML

<canvas width="500" height="300" 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://i.imgur.com/Sge6mc6.png) repeat-x 0 -30px;
	    background-size:cover;
	}
	#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'),
    tim,
    bgx = 0,
    isPlaying;

//canvas.width = window.innerWidth;
//canvas.height = window.innerHeight - 30;

if (window.innerWidth > 800) {
  canvas.width = 800;
  canvas.height = 500;
}

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

function newLandscape() {
    isPlaying = false;
    doCanvas();
}
/**
 * Functions for demo
 */
function doCanvas() {

    cancelAnimationFrame(tim);

    ctx.clearRect(0, 0, canvas.width, canvas.height * 0.8);

    var numOfSegments = 9,
        dlt = 40,  //no odd-number
        w = canvas.width + dlt,
        segment = w / numOfSegments,
        i,
        points = [],
        cPoints,
        variations = 0.21,

        x1, x2, y1, y2, dx = 0,
        sz = 7,
        bu,
        me = this;

    //distant landscape 1
    for (i = 0; i < numOfSegments + 1; i++) {
        points.push(segment * i);
        points.push(canvas.height / 2.2 + canvas.height * (variations / 2) * Math.random());
    }
    ctx.beginPath();
    ctx.moveTo(canvas.width, canvas.height*0.6);
    ctx.lineTo(0, canvas.height*0.6);
    ctx.curve(points);
    ctx.closePath();
    ctx.fillStyle = 'rgba(0,150,180,0.5)';
    ctx.fill();

    points = [];
   
    //distant landscape 2
    for (i = 0; i < numOfSegments + 1; i++) {
        points.push(segment * i);
        points.push(canvas.height / 2 + canvas.height * (variations / 1.5 ) * Math.random());
    }
    ctx.beginPath();
    ctx.moveTo(canvas.width, canvas.height*0.8);
    ctx.lineTo(0, canvas.height*0.8);
    ctx.curve(points);
    ctx.closePath();
    ctx.fillStyle = 'rgba(0,180,80,0.75)';
    ctx.fill();

    points = [];

    //produce some random heights across the canvas
    for (i = 0; i < numOfSegments + 1; i++) {
        points.push(segment * i);
        points.push(canvas.height / 1.8 + canvas.height * variations *...