<canvas id="canvas" width="500" height="500"></canvas>

(function (){

  let canvas, ctx, width, height;

  const Game = function(){

    canvas = document.getElementById('canvas');
    ctx = canvas.getContext('2d');

    this.body = [new Player(this, GameSize)];
    

    var GameSize = {
      x : canvas.width,
      y : canvas.height
    }

    this.app();
  }

  let caterpillar_img = new Image();

  caterpillar_img.src = 'http://www.picshare.ru/uploads/191004/793xpX9oMl.jpg';

  Game.prototype.app = function(){
    this.update();
    this.draw();

    requestAnimationFrame(()=>{
      this.app();
    })
  }

  Game.prototype.update = function(){
    for(i in this.body){
      this.body[i].update();
    }
  }

  Game.prototype.draw = function(){
    for(i in this.body){
      render(ctx, this.body[i]);
    }
  }


  var Player = function(game){
    this.game = game;
    this.position = {x : 250, y : 0};
    this.vel = {x : 0, y : 0};
    this.gravity = 0.5;
    this.JumpStop = false;
    this.plat = [];
    this.plat[0] = {x : 250, y : 550, w:550, h:50};
    this.keyboarder = new Keyboarder();
    this.positionDown = false;
    this.downUp = false;
    this.caterpillar = [];
    this.caterpillar[0] = {x : 350, y : 1, sz:100};
  }

  Player.prototype = {
    update: function(){
      //Физика

      this.position.x += this.vel.x;
      this.position.y += this.vel.y;
        if(this.JumpStop){
          this.vel.x *= 0.4
        }else{
          this.vel.y += this.gravity;
        }

      this.JumpStop = false;

      for(i in this.plat){
        if(this.position.x >= this.plat[i].x && 
          this.position.x <= this.plat[i].x + this.plat[i].w &&
          this.position.y >= this.plat[i].y-50 && 
          this.position.y <= this.plat[i].y-50 + this.plat[i].h){
          
          this.position.y = this.plat[i].y-50;
          this.JumpStop = true; 
        }
      }

      if(this.position.y >= 840){
        this.position.y = 840;
        this.JumpStop = true;
      }

      //Управление

      if(this.keyboarder.isDown(this.keyboarder.KEYS.UP)){
        this.jump();
      }

      if(this.keyboarder.isDown(this.keyboarder.KEYS.LEFT)){
        if(this.JumpStop){
          this.vel.x =- 10;
        }
      }

      if(this.keyboarder.isDown(this.keyboarder.KEYS.RIGHT)){
        if(this.JumpStop){
          this.vel.x = 10;
        }
      }

      if(this.keyboarder.isDown(this.keyboarder.KEYS.DOWN)){
        this.positionDown = true;
        this.downUp = false;
      }

      if(this.positionDown){
        if(this.position.y >= 840){
          this.position.y = 1300;
        }
      }

      if(this.downUp){
        this.positionDown = false;
      }

      for(var i = 0; i < this.caterpillar.length; i++){
        
        this.caterpillar[i].sz--;

        if(this.caterpillar[i].sz <= 50){
          this.caterpillar[i].sz = 150;
        }
      }

    }
  }

  Player.prototype.jump = function(){
    if(this.JumpStop){
      this.vel.y =- 20;
    }

    this.downUp = true;
    
  }

  var Keyboarder = function(){
    var keyState = {};

    window.onkeydown = function(e){
      keyState[e.keyCode] = true;
    }


    window.onkeyup = function(e){
      keyState[e.keyCode] = false;
    }

    this.isDown = function(keyCode){
      return keyState[keyCode] === true;
    }

    this.KEYS = {UP:38, LEFT:37, RIGHT:39, DOWN:40};
  }

  let render = function(ctx, game){
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    for(i in game.plat){
      ctx.fillStyle = 'green';
      ctx.fillRect(game.plat[i].x, game.plat[i].y, game.plat[i].w, game.plat[i].h);
    }

    ctx.fillStyle = 'red';
    ctx.fillRect(game.position.x, game.position.y, 50, 50);

    for(i in game.caterpillar){
      ctx.drawImage(caterpillar_img, game.caterpillar[i].x, game.caterpillar[i].x, game.caterpillar[i].sz, game.caterpillar[i].sz);
    }

  }

  window.onload = function(){
    new Game("ctx");
  }

})();