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

Moving string around the canvas with keyboard arrows

本文关键字：移动 字符串 键盘      更新时间：2023-09-26

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

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

我在这里错过了什么？

<canvas id="ctx" width="500" height="500" style="border:1px solid black">sss</canvas>
<script>
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 
function checkKey(e) {
    e = e || window.event;
    if (e.keyCode == '38') {
        // up arrow
        console.log('up');
        y-=speed;   
        ctx.clearRect(x,y, WIDTH, HEIGHT);          
        ctx.fillText('x', x,y); // Writes text 
    }
    else if (e.keyCode == '40') {
        // down arrow
        console.log('down');
        y+=speed; 
        ctx.fillText('x', x,y); // Writes text  
    }
    else if (e.keyCode == '37') {
       // left arrow
        console.log('left');
        x-=speed;
        ctx.fillText('x', x,y); // Writes text      
        ctx.clearRect(x,y, WIDTH, HEIGHT);
    }
    else if (e.keyCode == '39') {
       // right arrow
       console.log('right');
        x+=speed;
        ctx.fillText('x', x,y); // Writes text      
        ctx.clearRect(x,y, -WIDTH, -HEIGHT);
    }
}
</script>

我怎么能让"X"在画布上导航而不留下旧的版画呢？

JSFIDLE

谢谢！

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

如果你看看我的版本，我将clearOld提取到它自己的函数中，并添加了一堆着色来查看发生了什么

还要注意，我稍微重新安排了代码，所以在更新坐标之前，我们总是试图从旧位置删除"X"。（我还在函数末尾添加了一个return false，使其在代码段中发挥得更好。）

当你写文本时，它的边界区域与你用来覆盖它的矩形不同。

这个问题可能会帮助你找到一个更好的边界框：

如何在HTML画布上找到文本的高度？

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;
}
<canvas id="ctx" width="200" height="200" style="border:1px solid black">sss</canvas>

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

PS-高度和宽度不准确，但这超过了X。此外，如果你想把其他东西作为文本放在画布上，你应该考虑把它做成一个高度/宽度清晰的单空间字体。

相关文章：