Untitled

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>worst team at </title>
  <meta name="description" content="aaa">
  <meta name="author" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/skeleton.css">
  <link rel="stylesheet" href="css/index.css">
  <link rel="icon" type="image/jpg" href="images/favicon.png">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
    <script>
console.log("Welcome to piet.us!")


function ranrange(range,x) {
	x = typeof x !== 'undefined' ? x : 0;
	return Math.floor(range*Math.random())+1+x;
}

function battery() {
    this.x = 0
    this.y = 0
    this.image = document.getElementById("source")
    this.next = function next() {
        this.y += 1
    }
}

function animate() {
	this.canvas = document.getElementById("canvas")
	this.canvas_delta_top  = 10;
	this.canvas_delta_left = 10;
    this.x = 0;
    this.y = 0;
	this.ctx = this.canvas.getContext("2d");
    this.batteries = []
    this.b = new battery()

	this.refresh = function refresh() {
		this.ctx.fillStyle="#ffd";
		this.ctx.fillRect(0,0,this.canvas.width,this.canvas.height);
	}

	this.resize = function resize() {
	  this.canvas.width = window.innerWidth - 20;
	  this.canvas.height = window.innerHeight - 20;
	}

    this.create = function create() {
        y = -1
        b = new battery()
        b.y = -1 * (b.image.height + 10)
        b.x = (Math.random() * (this.canvas.width + 100)) - 50
        return b
    }

	this.draw = function draw() {
        this.clear()

        this.batteries.push(this.create()

        for (var i=0; i<this.batteries.length; i++) {
            b = this.batteries[i]
            this.ctx.drawImage(b.image, b.x, b.y)
            b.next()
        }

        this.batteries = this.batteries.filter(function(val, idx, arr) {
            return val.y < (this.canvas.height - 100);
        })
	}

    this.clear = function clear() {
        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }
}

$(document).ready(function() {
    animate = new animate();
    window.addEventListener('resize', function(){animate.resize()}, false);
    animate.resize();
	function loop() {
		animate.draw();
		setTimeout(loop, 1);
	};
    loop();
});
    </script>
</head>

<img id="source" hidden="true" src="battery.png"></img>
<canvas id="canvas"></canvas>
<body>
</body>
</html>