Javascript 如何让玩家同时向两个不同的方向移动？
我一直在尝试测试我的按键技能，并制作了一支带有“玩家”移动的新笔。 但是我还没有弄明白如何让玩家朝两个不同的方向移动（例如斜向移动）。有人知道我当前编写的代码中缺少了什么吗？ 非常感谢您的帮助 以下是我目前的代码： https://codepen.io/Skysurfer_kon/pen/bawnqb？editors=1010Javascript 如何让玩家同时向两个不同的方向移动？,javascript,html,animation,Javascript,Html,Animation,我一直在尝试测试我的按键技能，并制作了一支带有“玩家”移动的新笔。 但是我还没有弄明白如何让玩家朝两个不同的方向移动（例如斜向移动）。有人知道我当前编写的代码中缺少了什么吗？ 非常感谢您的帮助 以下是我目前的代码： https://codepen.io/Skysurfer_kon/pen/bawnqb？editors=1010 （链接被拆除，要继续链接，请将https:to组合到其他链接）即使按下多个键，每个keydown和keydup都会触发事件 因此，您可以使用一个keysmap对象来存储新
（链接被拆除，要继续链接，请将https:to组合到其他链接）即使按下多个键，每个
keydownkeydupkeyskeydown<body>
<div><img id = "player" src="https://i.ibb.co/3zzPvKT/Annoying-Dog-sprite.png"></div>
</body>
<script>
var frame = 0;
var y = 6;
var x = 453;
var facingleft = true;
var facingright = false;
var keys = {};
document.addEventListener("keyup", (e) => {
keys[e.keyCode] = false;
});
document.addEventListener("keydown", (e) => {
keys[e.keyCode] = true;
if (keys[37]) {
frame++;
x -= 5;
player.style.left= (x) + "px";
if (frame == 1) {
player.src = 'https://i.ibb.co/0t55kL0/doggo-00.png';
}
if (frame == 2) {
player.src = 'https://i.ibb.co/Y3q13J6/doggo-01.png';
}
if (frame == 3) {
frame = 1;
player.src = 'https://i.ibb.co/0t55kL0/doggo-00.png';
}
}
if (keys[39]) {
x += 5;
frame++;
player.style.left = (x) + "px";
if (frame == 1) {
player.src = 'https://i.ibb.co/NLHJBnJ/doggo-02.png';
}
if (frame == 2) {
player.src = 'https://i.ibb.co/N135wtG/doggo-03.png';
}
if (frame == 3) {
frame = 1;
player.src = 'https://i.ibb.co/NLHJBnJ/doggo-02.png';
}
}
if (keys[40]) {
if (y > 200) {
player.style.top = (y);
}
if (y < 200) {
y += 5;
player.style.top = (y) + "px";
}
}
});
</script>
var帧=0；
变量y=6；
var x=453；
var facingleft=真；
var facingright=错误；
var键={}；
文件。添加的文件列表器（“键控”，（e）=>{
密钥[e.keyCode]=假；
});
文件。添加的文件列表器（“向下键控”，（e）=>{
键[e.keyCode]=真；
如果（键[37]）{
frame++；
x-=5；
player.style.left=（x）+“px”；
如果（帧==1）{
player.src=https://i.ibb.co/0t55kL0/doggo-00.png';
}
如果（帧==2）{
player.src=https://i.ibb.co/Y3q13J6/doggo-01.png';
}
如果（帧==3）{
帧=1；
player.src=https://i.ibb.co/0t55kL0/doggo-00.png';
}
}
如果（键[39]）{
x+=5；
frame++；
player.style.left=（x）+“px”；
如果（帧==1）{
player.src=https://i.ibb.co/NLHJBnJ/doggo-02.png';
}
如果（帧==2）{
player.src=https://i.ibb.co/N135wtG/doggo-03.png';
}
如果（帧==3）{
帧=1；
player.src=https://i.ibb.co/NLHJBnJ/doggo-02.png';
}
}
如果（键[40]）{
如果（y>200）{
player.style.top=（y）；
}
如果（y<200）{
y+=5；
player.style.top=（y）+“px”；
}
}
});