Untitled

<!DOCTYPE html>

<html>
<head>

<style>
</style>
</head>

<body>
<script>
class Ball {
  constructor (xx, yy,dir) {
  	  var self = this;
    this.x = (Math.random() * ((window.innerHeight-50)-100) + 100);
    this.y = (Math.random() * ((window.innerWidth-59)-100) + 100);
    this.dir =  Math.random() * (360 - 0) + 0;
    this.pocet = 0;

    this.rootElement = document.createElement('div');

    this.pocitadlo = document.createElement('span');
    this.pocitadlo.innerHTML = "0";

	this.rootElement.style.position = 'absolute';
	document.body.appendChild (this.rootElement);

	this.img = document.createElement('img');
	this.img.src = 'ball.png';
	this.rootElement.style.left = self.y + 'px';
	this.rootElement.style.top = self.x + 'px';


	this.rootElement.style.transform = 'rotate(' + self.dir + 'deg)';
	this.rootElement.appendChild (this.img);
	this.rootElement.appendChild (this.pocitadlo);
	setInterval(function(){
		self.forward(5)},30
		);

  }


}

Ball.prototype.changePos = function(x,y){
	this.x = x;
	this.y = y;
	this.rootElement.style.left = this.y + 'px';
	this.rootElement.style.top = this.x + 'px';
}
Ball.prototype.changeDir = function(dir){
	this.dir = dir;
	this.rootElement.style.transform = 'rotate(' + this.dir + 'deg)';
}

Ball.prototype.forward = function(d){
	this.d = d;
	if(this.x < 0){
		this.changeDir(180 - this.dir);
	}
	else if(this.x +100 > window.innerHeight){
		this.changeDir(180 -this.dir);
	}

	else if(this.y < 0){
		this.changeDir((-this.dir));
	}
	else if(this.y +100 > window.innerHeight){
		this.changeDir((-this.dir));
	}
	var xx = 1 * Math.cos( (this.dir *  Math.PI/180))*this.d;
    var yy = 1 * Math.sin( (this.dir *  Math.PI/180))*this.d;
	this.changePos(this.x +xx, this.y + yy);

}


function Bar () {
  var self = this;

  this.x = 0;
  this.y = window.innerHeight - 100;
  this.w = 200;
  this.h = 20;

  this.rootElem = document.createElement ('div');
  this.rootElem.style.backgroundColor = 'black';
  this.rootElem.style.position = 'absolute';
  this.rootElem.style.width = this.w + 'px';
  this.rootElem.style.height = this.h + 'px';
  this.changePos (this.x, this.y);
  document.body.appendChild (this.rootElem);

  window.addEventListener ('keydown', function (e) {
    switch (e.keyCode) {
      case 37:
        if (self.x >= 20) self.changePos (self.x - 20, self.y);
        break;
      case 39:
        if (self.x + 20 + self.w <= window.innerWidth) self.changePos (self.x + 20, self.y);
        break;
    }
  });
}
Bar.prototype.changePos = function (x, y) {
  this.x = x;
  this.y = y;
  this.rootElem.style.left = Math.round (this.x)+'px';
  this.rootElem.style.top = Math.round (this.y)+'px';
}


document.body.style.overflow = 'hidden';

var bar = new Bar ();
var a = new Ball()


</script>
</body>
</html>