跟踪 Canvas 中的按键答案

【问题标题】：Keeping track of key presses in Canvas跟踪 Canvas 中的按键
【发布时间】：2021-04-06 00:08:53
【问题描述】：

我正在尝试在游戏循环中使用画布跟踪最后 4 次按键。

var lastKeys = []; // array to hold last 4 key presses
window.addEventListener("keydown", key_down, false); // key down
window.addEventListener("keyup", key_up, false); // key up

var keycode = "";
if (key.left  == true)  keycode = "left";
if (key.right == true)  keycode = "right";
if (key.up    == true)  keycode = "up";
if (key.down  == true)  keycode = "down";

And later on in the draw phase...
// add new element
lastKeys.unshift(keycode);
// remove last element
lastKeys.pop();

lastKeys 数组应该记录[up, down, left right]，它只会记录[right, right, right right]，在下面的示例中什么都没有。 - 因为每次滴答都会记录最后一次按键并覆盖内容。只有我对如何解决这个问题有点困惑。

有人可以帮帮我吗？

最少代码如下： index.html

<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8" />
<title>Minimum</title>
<link href = "stylesheet.css" rel = "stylesheet">

</head>

<body>

<canvas id="canvas" width="640" height="360"></canvas>
<!-- get keys -->
<script type="text/javascript" src="js/keys.js"></script>
<!-- call last -->
<script type="text/javascript" src="js/main.js"></script>

</body>
</html>

main.js

// declare canvas
var canvas = document.getElementById('canvas'),
  ctx = canvas.getContext('2d'),


  key =
  {
    right: false,
    left: false,
    up: false,
    down: false,
  }

  const canvasW = canvas.width;
  const canvasH = canvas.height;

// end canvas declarations


//vegetables
// -------------------------------
var lastKeys = [];
var keyCode = -1;


// initalise 
function init()
{

  // initialise keys
  window.addEventListener("keydown", key_down, false); // key down
  window.addEventListener("keyup", key_up, false); // key up

  // window.addEventListener("keydown", function (e)
  // {
  //   keys[e.keyCode] = true;
  // });

  // window.addEventListener("keyup", function (e)
  // {
  //   keys[e.keyCode] = false;
  // });

}

// call initialization
init();


// Draw frames
setInterval( render, 16 );




function render()
{
   get_keys();

}

function get_keys()
{

  if (key.left     === true) keyCode = 37;
  if (key.up       === true) keyCode = 39;
  if (key.right    === true) keyCode = 38;
  if (key.down     === true) keyCode = 40;
  console.log("K: " + keyCode);

  // add new element
  lastKeys.unshift(keyCode);
  // remove last element
  lastKeys.pop();

  console.log(lastKeys);
}

keys.js

// declare canvas
var canvas = document.getElementById('canvas'),
  ctx = canvas.getContext('2d'),


  key =
  {
    right: false,
    left: false,
    up: false,
    down: false,
  }

  const canvasW = canvas.width;
  const canvasH = canvas.height;

// end canvas declarations


//vegetables
// -------------------------------
var lastKeys = [];
var keyCode = -1;


// initalise 
function init()
{

  // initialise keys
  window.addEventListener("keydown", key_down, false); // key down
  window.addEventListener("keyup", key_up, false); // key up

  // window.addEventListener("keydown", function (e)
  // {
  //   keys[e.keyCode] = true;
  // });

  // window.addEventListener("keyup", function (e)
  // {
  //   keys[e.keyCode] = false;
  // });

}

// call initialization
init();


// Draw frames
setInterval( render, 16 );




function render()
{
   get_keys();

}

function get_keys()
{

  if (key.left     === true) keyCode = 37;
  if (key.up       === true) keyCode = 39;
  if (key.right    === true) keyCode = 38;
  if (key.down     === true) keyCode = 40;
  console.log("K: " + keyCode);

  // add new element
  lastKeys.push(keyCode);
  if (lastKeys.length > 4)
  {
    // remove last element
    lastKeys.pop();
  }

  console.log(lastKeys);
}

【问题讨论】：

请添加minimal reproducible example
这个答案可能对stackoverflow.com/a/63813236/3877726有帮助

标签： javascript keyboard html5-canvas

【解决方案1】：

您需要在整个文档上添加事件，然后使用 tabIndex 或通过像下面的代码一样将焦点放在画布上

const canvas = document.getElementById('someCanvas');
const log = document.getElementById('log');
let lastDownTarget
console.log(canvas, log);

 document.addEventListener('mousedown', function(event) {
        lastDownTarget = event.target;
        alert('mousedown');
    }, false);



document.addEventListener('keydown', e => {
  if(lastDownTarget == canvas) {
      log.textContent += e.code;
    }
}, false);


document.addEventListener('keyup', e => {
if(lastDownTarget == canvas) {
    log.textContent += e.code ;
    }
}, false);

<canvas id="someCanvas" width="500" height="300" style="border:1px solid #000000;"></canvas>

<p id="log"></p>

【讨论】：