Javascript移动键按住

Javascript movement on key hold

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

我需要关于画布游戏的移动功能的帮助。

下面是我所拥有的内容，玩家只有在按下左/右键时才会改变方向。

对于玩家来说，通过按住左或右方向键来面对相应的方向是最理想的，这目前还没有发生。

我不知道该怎么做，有什么主意吗?

我现在有移动方向工作的关键按住，更新如下，但当页面第一次加载，播放器不显示在屏幕上，但然后显示后，一个键被按下。有些事情不对……

var trackRight = 0;
var trackLeft = 1;
var x = 570;
var y = 255; //no collision past here
var srcX;
var srcY;
var speed = 25;
var character = new Image();
character.src = "ptera_purple.png";
function updateFrame() {
    curFrame = ++curFrame % frameCount;
    srcX = curFrame * width;
    ctx.clearRect(0, 0, canvas.width, canvas.height, x, y, width, height);
    if (left && x > 0) {
        srcY = trackLeft * height; //important for sprite direction
        x -= speed;
    }
    if (right && x < canvasWidth - width) {
        srcY = trackRight * height;
        x += speed;
    }
}
var right = false;
var left = false;
document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);
function keyDownHandler(e) {
    if (e.keyCode == 39) {
        right = true;
    } else if (e.keyCode == 37) {
        left = true;
    }
}
function keyUpHandler(e) {
    if (e.keyCode == 39) {
        right = false;
    } else if (e.keyCode == 37) {
        left = false;
    }
}
function moveLeft() { // keyboard controls
    left = true;
    right = false;
}
function moveRight() {
    left = false;
    right = true;
}

已折旧的`keyEvent.keyCode`请勿使用。

请注意，keyEvent.keyCode已折旧，不应使用。你可以使用keyEvent.key或keyEvent.code，其中key是用户想要看到的(按住shift或大写键表示&;a&;，或不表示&;a&;)， code是键位置，无论大写与否，代码总是'KeyA'。

MDN keyboardevent查看详细信息

使用keyState对象

我发现在动画和游戏中使用键盘的最简单方法是拥有一个键状态对象。为down和up添加相同的简单事件

document.addEventListener("keydown",keyhandler);
document.addEventListener("keyup",keyhandler);

创建键状态对象

var keyState = {};

然后根据输入事件标记键

function keyHandler(e){  // simple but powerful
   keyState[e.code] = e.type === "keydown";
}

那么在主循环中你所要做的就是知道一个键是否按下了

if(keyState.ArrowRight) { // right  is down }
if(keyState.LeftRight) { // left  is down }

<<p> 详细状态/strong>
当你有一个正在运行的循环时，永远不要在IO事件中进行任何输入处理。
你可以得到更多的信息。我通常有一个切换，和一个状态更改

keyState = { down : {}, // True if key is down toggle : {}, // toggles on key up changed : {}, // True if key state changes. Does not set back false // or you will lose a change } function keyHandler(e){ // simple but powerful if(keyState.down[e.code] !== (e.type === "keydown")){ keyState.changed = true; } keyState.down[e.code] = e.type === "keydown"; if(e.type === "keyup"){ keyState.toggle[e.code] = !keyState.toggle[e.code]; } }
现在如果你想知道一个键是否刚刚被按下

if(keyState.down.LeftArrow && keyState.changed.LeftArrow){ // key has been pushed down since last time we checked. } keyState.changed.LeftArrow = false; // Clear it so we can detect next change

你可以添加一个while循环:

while(left == true) {
//code to execute
}

我不确定这是否会起作用，但你可以试试。

您需要有一个全局事件监听和跟踪按下，然后将移动保存在某个地方。看看我在这里做了什么https://github.com/panvourtsis/HTML5-canvas-game---POKEMON-/blob/master/canvas.pokemon.js

也检查这个

    document.onkeydown = function(e) {
        e = e || window.event;
        if(e.keyCode == "37") console.log("left");
        else if(e.keyCode == "38") console.log("up");
        else if(e.keyCode == "39") console.log("right");
        else if(e.keyCode == "40") console.log("down");
    };

Javascript移动键按住

Javascript movement on key hold

已折旧的keyEvent.keyCode请勿使用。

已折旧的`keyEvent.keyCode`请勿使用。