跟踪 Canvas 中的按键

Question

我试图在游戏循环中使用 canvas 跟踪最后 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);
}

键.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);
}

Answer 1

您需要在整个文档上添加事件，然后使用tabIndex或通过像下面的代码一样自己关注 canvas

 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>

跟踪 Canvas 中的按键

问题描述

1 个解决方案

解决方案1
0 2020-12-29 11:24:29

跟踪 Canvas 中的按键

问题描述

1 个解决方案

解决方案1 0 2020-12-29 11:24:29

解决方案1
0 2020-12-29 11:24:29