Question

我正在尝试为训练目的制作一个基本游戏，其中玩家可以向上，向下，向左或向右移动。我已经设法在箭头键按下按下方向打印“x”，但是如果我向左或向下导航我无法删除旧打印件。

我尝试了许多不同的左右方向组合，但我无法找到它是如何工作的。

我在这里缺少什么？

2016-05-12 00:00:01 -0500

如何让“X”在画布上导航而不留下旧版画？

JSFIDLE

谢谢！

Answer 1

我知道问题是什么，但我没有时间研究解决方案。

如果您查看我的版本，我会将clearOld提取到自己的函数中并添加一堆着色以查看正在发生的事情。

另请注意，我稍微重新安排了代码，因此我们总是试图删除＆＃39; X＆＃39;在更新坐标之前从旧职位。（我还在函数末尾添加了return false，以使其在代码段中更好地发挥。）

当您编写文本时，它具有不同的边界区域，然后是您用来覆盖它的矩形。

这个问题可以帮助您找到更好的边界框：

How can you find the height of text on an HTML canvas?

＆＃13;

document.onkeydown = checkKey;

var ctx = document.getElementById("ctx").getContext("2d");
ctx.font = '30px Arial';
var HEIGHT = 500;
var WIDTH = 500;
var x = 50;
var y = 50;
var speed = 20;
ctx.fillText('x', x, y); // Writes text 

//var oldFill = 

function clearOld(ctx, x, y) {
  ctx.fillStyle = "orange";
  ctx.fillRect(x, y, -WIDTH, -HEIGHT);
  ctx.fillStyle = "green";
  ctx.fillRect(x, y, 5, 5);
  ctx.fillStyle = "";
}

function checkKey(e) {

  e = e || window.event;

  if (e.keyCode == '38') {
    // up arrow
    console.log('up');
    clearOld(ctx, x, y);
    y -= speed;
    ctx.fillText('x', x, y); // Writes text 

  } else if (e.keyCode == '40') {
    // down arrow
    console.log('down');
    clearOld(ctx, x, y);
    y += speed;
    ctx.fillText('x', x, y); // Writes text  

  } else if (e.keyCode == '37') {
    // left arrow
    console.log('left');
    clearOld(ctx, x, y);
    x -= speed;
    ctx.fillText('x', x, y); // Writes text         

  } else if (e.keyCode == '39') {
    // right arrow
    console.log('right');
    clearOld(ctx, x, y);
    x += speed;
    ctx.fillText('x', x, y); // Writes text      



  }
  return false;
}

＆＃13;

<canvas id="ctx" width="200" height="200" style="border:1px solid black">sss</canvas>

＆＃13;

Answer 2

只需将clearRect移动到更改x，y之前，然后将其更改为ctx.clearRect(x,y, WIDTH, -HEIGHT);

PS - 高度和宽度不准确，但这不仅仅涵盖了X.另外，如果你想把其他东西放在画布上作为文本，你应该考虑将它变成具有清晰高度/宽度的等宽字体

使用键盘箭头在画布上移动字符串

2 个答案: