game HTML

window.onload = init;
//variables
var map;
var ctxMap;

var pl;
var ctxPl;

var en;
var ctxEn;

var drawBtn;
var clearBtn;

var gameWidth = 800;
var gameHeight = 500;

//background
var background = new Image();
background.src = 'sources/bg1.jpeg';

var tux = new Image();
tux.src = 'sources/1.png';

var win = new Image();
win.src = '/home/cristian/Рабочий стол/game/sources/2.1.png';
//playerrrss
var player;
var enemy;
var requestAnimFrame = window.requestAnimationFrame ||
                      window.webkitRequestAnimationFrame ||
                      window.mozRequestAnimationFrame ||
                      window.oRequestAnimationFrame ||
                      window.msRequestAnimationFrame ;

var isPlaying;

function init()
{
  map = document.getElementById('map')
  ctxMap = map.getContext('2d');

  pl = document.getElementById("player")
  ctxPl = pl.getContext("2d");

  en = document.getElementById('enemy')
  ctxEn = en.getContext("2d");


  map.width = gameWidth;
  map.height = gameHeight;
  pl.width = gameWidth;
  ctxPl.height = gameHeight;
  en.width = gameWidth;
  ctxEn.height = gameHeight;

  drawBtn = document.getElementById("drawBtn")
  clearBtn = document.getElementById("clearBtn")

  drawBtn.addEventListener("click", drawRect, false)
  clearBtn.addEventListener("click", clearRect, false)

  player = new Player();
  enemy = new Enemy();

  drawBg();
  startLoop();

  document.addEventListener("keydown", checkKeyDown , false );
  document.addEventListener("keyup", checkKeyUp , false );
}

function loop() {
  if (isPlaying) {
    draw();
    update();
    requestAnimFrame(loop);
  }
}

function startLoop() {
  isPlaying = true;
  loop();
}

function stopLoop() {
  isPlaying = false;
}

function draw() {
  player.draw();
  enemy.draw();

}
function update() {
player.update();
}
//Objects
function Enemy(){

  this.srcX = 0;
  this.srcY = 0;
  this.drawX =400;
  this.drawY =50;
  this.width = 400;
  this.height = 400;

  this.speed = 8;
};

function Player() {

  this.srcX = 0;
  this.srcY = 0;
  this.drawX =0;
  this.drawY = 0;
  this.width = 58;
  this.height = 70;
  this.speed = 3;

  //for keys

  this.isUp = false;
  this.isDown = false;
  this.isRight = false;
  this.isLeft = false;

}

Player.prototype.draw = function () {
  clearCtxPlayer();
  ctxPl.drawImage(tux ,this.srcX, this.srcY, this.width, this.height,
                          this.drawX, this.drawY,this.width, this.height);
};

Player.prototype.update = function () {
  this.chooseDir();
};

Player.prototype.chooseDir = function () {
  if (this.isUp)
    this.drawY -= this.speed;
  if (this.isDown)
    this.drawY += this.speed;
  if (this.isRight)
    this.drawX += this.speed;
  if (this.isLeft)
    this.drawX -= this.speed;

};

function checkKeyDown(e) {
  var keyID = e.keyCode || e.which;
  var keyChar = String.fromCharCode(keyID);
  if (keyChar == "W") {
    player.isUp = true;
    e.preventDefault();
  }
  if (keyChar == "S") {
    player.isDown = true;
    e.preventDefault();
  }
  if (keyChar == "D") {
    player.isRight = true;
    e.preventDefault();
  }
  if (keyChar == "A") {
    player.isLeft = true;
    e.preventDefault();
  }
}

function checkKeyUp(e) {
  var keyID = e.keyCode || e.which;
  var keyChar = String.fromCharCode(keyID);
  if (keyChar == "W") {
    player.isUp = false;
    e.preventDefault();
  }
  if (keyChar == "S") {
    player.isDown = false;
    e.preventDefault();
  }
  if (keyChar == "D") {
    player.isRight = false;
    e.preventDefault();
  }
  if (keyChar == "A") {
    player.isLeft = false;
    e.preventDefault();
  }
}

Enemy.prototype.draw = function () {
  ctxMap.drawImage(win ,this.srcX, this.srcY, this.width, this.height,
                          this.drawX, this.drawY,this.width, this.height);
};

function drawRect() {
  ctxMap.fillStyle = "mediumaquamarine"
  ctxMap.fillRect(10, 10, 100, 100)
}

function clearRect() {
  ctxMap.clearRect(0, 0, 800, 500)
}

function clearCtxPlayer() {
  ctxPl.clearRect(0 ,0 ,gameWidth , gameHeight);

}

function drawBg() {
  ctxMap.drawImage(background,0 ,0 ,1920 ,1080,
                              0, 0, gameWidth ,gameHeight)

}