关键保持Javascript运动 [英] Javascript movement on key hold
问题描述
以下是我所拥有的，会发生什么情况是玩家只会在左/右方向改变方向键被按下。
对于玩家来说，通过按住左或右箭头键来对准相应的方向是理想的选择。
我不知道如何做到这一点，有什么想法？
现在我已经在按下按键时更新了移动方向，下面会更新，但是当页面第一次加载时，屏幕上不会显示玩家，但会在屏幕上显示键被按下。有些东西是不正确的......
var trackRight = 0; var trackLeft = 1; var x = 570; var y = 255; //没有碰撞过去herevar 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）;如果（left& x> 0）{srcY = trackLeft * height; //对于精灵方向很重要x - =速度; } if（right&& x< canvasWidth - width）{srcY = trackRight * height; x + =速度; 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（）{//键盘控件left = true; right = false;} function moveRight（）{left = false; right = true;}
< h2>贬低 keyEvent.keyCode 不用。
请注意 keyEvent.keyCode 已折旧，不应使用。您可以使用 keyEvent.key 或 keyEvent.code 其中键是用户想要看到的（对于A，或对于a不存在移位或大写锁定），并且 code 用于代码总是' KeyA，无论是否大写。
MDN keyboardevent 了解详情
使用keyState对象
我发现在动画和游戏中使用键盘最简单的方法是拥有关键状态的对象。添加相同的简单事件向下和向上
document.addEventListener（keydown，keyhandler）;
document.addEventListener（ KEYUP，keyhandler）;
创建键状态对象
var keyState = {};
然后根据输入事件标记键
function keyHandler（e）{//简单但强大的
keyState [e.code] = e.type ===keydown;
$ b然后在主循环中，你需要做的所有事情， （keyState.ArrowRight）{// right is down}
if（keyState.LeftRight）{/ / / left is down}
详细状态
当你有一个运行循环时，不要在IO事件中做任何输入处理。
你可以得到更多的信息。我通常有一个切换和一个状态改变
keyState = {
down：{}，// True if键关闭
切换：{}，//切换键
改变：{}，//如果键状态改变，则为真。不会返回false
//或者您将失去更改
}
function keyHandler（e）{//简单但功能强大
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];
$ / code $ / pre
现在如果你想知道一个键是否只是一个键（keyState.down.LeftArrow&& keyState.changed.LeftArrow）{
//
$ b 键从上次检查以来一直被推下。
}
keyState.changed.LeftArrow = false; //清除它，以便我们可以检测到下一次更改
I need help with a movement function for a canvas game.
Below is what I have, and what happens is the player only changes direction when a left/right key is pressed.
It would be ideal for the player to face the corresponding direction from holding down either the left or right arrow keys, which currently doesn't occur.
I have no idea how to do this, any ideas?
I now have movement direction working on key hold down, updated below, but when the page first loads, the player is not displayed on the screen, but then displays after a key is pressed. Something is not right...
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;
}
解决方案 Depreciated keyEvent.keyCode do not use.
Please note that keyEvent.keyCode has been depreciated and should not be used. You can use keyEvent.key or keyEvent.code where key is what the user intends to see (holds shift or capslock for "A", or not for "a") and code is for the key location where code is always 'KeyA' no matter if capital or not.
MDN keyboardevent for full details
Use a keyState object
The easiest way I have found to use the keyboard in animations and games is to have a object of key states. Add the same simple event to both down and up
document.addEventListener("keydown",keyhandler");
document.addEventListener("keyup",keyhandler");
Create key state object
var keyState = {};
And then just flag the key depending on the input event
function keyHandler(e){ // simple but powerful
keyState[e.code] = e.type === "keydown";
}
Then in the main loop all you have to do to know if a key is down
if(keyState.ArrowRight) { // right is down }
if(keyState.LeftRight) { // left is down }
Detailed state
Never do any input processing in IO events when you have a running loop..
You can get more info. I usually have a toggle, and a state change
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];
}
}
Now if you want to know if a key has just been pressed
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
这篇关于关键保持Javascript运动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
