javascript - 使用Keydown事件移动对象

我正在尝试在画布中移动一个框，所有功能都可以正常工作，但是一旦我按下4个键中的任何一个，框就会消失，我可以知道这是因为按下任意一个键后我都有一个ctx.ClearRect在4个键中，我设法阻止它散开，问题是它现在不会移动或消失，并且鞋垫没有显示任何错误，所以我再次被卡住了。
任何帮助都会非常有帮助，谢谢。

function Player (row,col) {
this.isUpKey = false;
this.isRightKey = false;
this.isDownKey = false;
this.isLeftKey = false;
this.row = row;
this.col = col;
this.color = "#f00";
}

var players = new Array();

function drawPlayer() {

    players[players.length] = new Player(2,2);

    for (var p = 0; p < players.length; p++) {
    ctxPlayer.fillStyle = players[p].color;
    ctxPlayer.fillRect(players[p].row*25, players[p].col*25, 25, 25);
    }
}

function doKeyDown(e){
    if (e.keyCode == 87) {
        ClearPlayer();
        Player.isUpKey = true;
        Player.col = Player.col - 1;
    }
    if (e.keyCode == 83) {
        ClearPlayer();
        Player.isDownKey = true;
        Player.col = Player.col + 1;
    }
    if (e.keyCode == 65) {
        ClearPlayer();
        Player.isLeftKey = true;
        Player.row = Player.row - 1;
    }
    if (e.keyCode == 68) {
        ClearPlayer();
        Player.isRightKey = true;
        Player.row = Player.row + 1;
    }
}
function ClearPlayer() {
    ctxPlayer.clearRect(0,0,canvasWidth,canvasHeight);
}

最佳答案

我创建了一个plnkr，并提供了一个我认为您要尝试执行的操作的示例：

// Code goes here

function Player(row, col) {
  this.isUpKey = false;
  this.isRightKey = false;
  this.isDownKey = false;
  this.isLeftKey = false;
  this.row = row;
  this.col = col;
  this.color = "#f00";
}

var players = [];
var ctxPlayer;
var currentPlayer;

window.onload = function()
{
  ctxPlayer = document.getElementById('c').getContext('2d');
  currentPlayer = players[players.length] = new Player(2, 2);
  setInterval(render, 25);
}
window.onkeypress = doKeyDown;

function render()
{
  ClearPlayer();
  drawPlayer();
}

function drawPlayer() {


  for (var p = 0; p < players.length; p++) {
    ctxPlayer.fillStyle = players[p].color;
    ctxPlayer.fillRect(players[p].row * 25, players[p].col * 25, 25, 25);
  }
}

function doKeyDown(e) {
  console.log(e);
  if (e.keyCode == 97) {
    currentPlayer.isUpKey = true;
    --currentPlayer.row;
  }
  if (e.keyCode == 100) {
    currentPlayer.isDownKey = true;
    ++currentPlayer.row;
  }
  if (e.keyCode == 119) {
    currentPlayer.isLeftKey = true;
    --currentPlayer.col;
  }
  if (e.keyCode == 115) {
    currentPlayer.isRightKey = true;
    ++currentPlayer.col;
  }
}

function ClearPlayer() {
  ctxPlayer.clearRect(0, 0, 600, 400);
}

http://plnkr.co/edit/XejZKCkshNiihdy8ui1u?p=preview

首先，我介绍了一个render函数来调用清除和绘制。加载窗口后，每25毫秒将调用一次此渲染函数。

然后，您在每个平局都创建了一个新的Player。我更改了它，以便在加载时创建一个播放器。按键事件与该玩家对象有关。

最后，出于测试目的，我更改了关键事件，但它们也应该与您一起使用。

请记住，plnkr只是有关其工作原理的快速示例。您可能需要根据需要进行调整。