Я пытаюсь переместить моего персонажа с помощью клавиш со стрелками, но он не двигается

Question

Я хочу, чтобы мой персонаж двигался с помощью клавиш со стрелками, но он не работает, и я понятия не имею, почему.

Это для оффлайн шутера, который я пытаюсь сделать. Я пытался не использовать объекты, но вскоре это станет многопользовательским режимом, поэтому я не хочу постоянно создавать новые файлы.

Вот мой код:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var img = new Image();
var x = 0;
var y = 0;
var Keys = {
  up: false,
  down: false,
  left: false,
  right: false
};
img.src = "images/char1.png";

let player = function player(x, y) {
  this.x = x;
  this.y = y;
  this.speed = 5;
  this.health = 100;
};

window.onkeydown = function(e) {
  var kc = e.keyCode;
  e.preventDefault();

  if (kc === 37) {
    Keys.left = true;
  } else if (kc === 38) {
    Keys.up = true;
  } else if (kc === 39) {
    Keys.right = true;
  } else if (kc === 40) {
    Keys.down = true;    
  }
};

window.onkeyup = function(e) {
  var kc = e.keyCode;
  e.preventDefault();

  if (kc === 37) {
    Keys.left = false;
  } else if (kc === 38) {
    Keys.up = false;
  } else if (kc === 39) {
    Keys.right = false;
  } else if (kc === 40) {
    Keys.down = false;
  }
};

function move() {
  if (Keys.left) {
    x -= player.speed;
  }else if (Keys.right) {
    x += player.speed;
  }else if (Keys.up) {
    y -= player.speed;
  }else if (Keys.down) {
    y += player.speed;    
  }
}
function renderObject() {
  ctx.drawImage(img, 0, 0, 32, 48, 0, 0, 32, 48);
}

function draw() {
  renderObject();
  move();
}

setInterval(draw, 10);

Я ожидаю, что персонаж будет двигаться, когда я нажимаю клавиши со стрелками, но он вообще не двигается.

Answer 1

У вас есть несколько вопросов:

1. Вам необходимо создать объект игрока. На данный момент ваша функция player является просто «трафаретом» для вашего player. Вместо этого вам нужно создать экземпляр этого объекта.

   var player = new Player(x, y);

2. Вам нужно очищать свой холст после каждого перерисовки, в противном случае вы получите след изображений вашего персонажа:

   ctx.clearRect(0, 0, canvas.width, canvas.height);

3. Нарисуйте изображение своего игрока в месте нахождения игрока, а не в 0, 0 каждый раз:

   ctx.drawImage(img, x, y, 32, 48);

См. Рабочий пример ниже:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var img = new Image();
var x = 0;
var y = 0;
var player = new Player(x, y);
var Keys = {
  up: false,
  down: false,
  left: false,
  right: false
};
img.src = "https://www.pinclipart.com/picdir/middle/366-3665375_deadpool-2d-video-game-characters-clipart.png";

function Player(x, y) {
  this.x = x;
  this.y = y;
  this.speed = 5;
  this.health = 100;
};

window.onkeydown = function(e) {
  var kc = e.keyCode;
  if (kc === 37) {
    Keys.left = true;
  } else if (kc === 38) {
    Keys.up = true;
  } else if (kc === 39) {
    Keys.right = true;
  } else if (kc === 40) {
    Keys.down = true;
  }
};

window.onkeyup = function(e) {
  var kc = e.keyCode;
  if (kc === 37) {
    Keys.left = false;
  } else if (kc === 38) {
    Keys.up = false;
  } else if (kc === 39) {
    Keys.right = false;
  } else if (kc === 40) {
    Keys.down = false;
  }
};

function move() {
  if (Keys.left) {
    x -= player.speed;
  } else if (Keys.right) {
    x += player.speed;
  } else if (Keys.up) {
    y -= player.speed;
  } else if (Keys.down) {
    y += player.speed;
  }
}

function renderObject() {
  ctx.drawImage(img, x, y, 32, 48);
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  renderObject();
  move();
}

setInterval(draw, 10);

<canvas height="120" width="400" id="canvas" style="border: 1px solid black;"></canvas>