Untitled

<!DOCTYPE html>
<body>
<canvas id="myCanvas" width='750' height='500' style='border: 1px solid black'> </canvas>
</body>
<script>
window.onload = function() {

	var c = document.getElementById("myCanvas");

	var ctx = c.getContext("2d");


	function Ballon(rX, rY) {
		this.id = 0,
		this.x = rX,
		this.y = rY,
		this.speed = {
			x: 10,
			y: 5
		}
		console.log(this);
	}


	//var test = Ballon;

	//alert(test_ts.speed.x);
	var test_ts = [];
	var randX = Math.floor(Math.random() * c.width);
	var randY = Math.floor(Math.random() * c.height);

	test_ts[0] = new Ballon(randX, randY);


	for(var x=0;x<10;x++) {

		randX = Math.floor(Math.random() * c.width);
		randY = Math.floor(Math.random() * c.height);

		test_ts[test_ts.length] = new Ballon(randX, randY);
	}


	function render() {

		ctx.clearRect(0, 0, c.width, c.height);
		ctx.beginPath();

		for(var z=0;z<test_ts.length;z++) {
			//console.log('test');
			ctx.arc(test_ts[z].x, test_ts[z].y, 5, 0, 2 * Math.PI, false);
			test_ts[z].x += test_ts[z].speed.x;

			test_ts[z].y += test_ts[z].speed.y;

			if(test_ts[z].x < 0 || test_ts[z].x > c.width) {
				test_ts[z].speed.x = -test_ts[z].speed.x;
			}
			if(test_ts[z].y < 0 || test_ts[z].y > c.height) {
				test_ts[z].speed.y = -test_ts[z].speed.y;
			}
		}
		ctx.fillStyle = "#000000";
		ctx.fill();
	}

	setInterval(render, 1000/60);

}

</script>