Javascript 同时输入两个关键代码
我正在用Javascript制作一个非常简单的游戏。游戏要求两个物体同时用不同的键移动。我尝试过其他方法同时使用两个键码，但都不起作用。他们还需要继续前进，而不仅仅是前进一次。有什么帮助吗？请看我的演示： 它展示了如何制作两个基于类的播放器，并同时分别控制它们 我希望这对你有帮助 以下是完整的代码：Javascript 同时输入两个关键代码,javascript,key,Javascript,Key,我正在用Javascript制作一个非常简单的游戏。游戏要求两个物体同时用不同的键移动。我尝试过其他方法同时使用两个键码，但都不起作用。他们还需要继续前进，而不仅仅是前进一次。有什么帮助吗？请看我的演示： 它展示了如何制作两个基于类的播放器，并同时分别控制它们 我希望这对你有帮助 以下是完整的代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>World's BEstest Game</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1 style="font-family: Comic Sans MS; color: hotpink; text-shadow: 2px 2px 2px pink">Player Movement 2.0</h1>
<p>Class based player objects and keyboard controls</p>
<p>Use the arrow and WASD keys to move your balls</p>
<canvas id="canvas" style="border:1px solid black; border-radius: 5px;">
</canvas>
<script>
const c = document.getElementById("canvas");
const ctx = c.getContext("2d");
let settings = {
width: 100,
height: 100,
speed: 1
};
c.width = settings.width;
c.height = settings.height;
/*
Object holding boolean values for every keypress
*/
let keyPresses = {};
function listenKeyboard() {
document.addEventListener("keyup", keyUp);
document.addEventListener("keydown", keyDown);
};
const keyUp = e => {
keyPresses[e.key] = false;
};
const keyDown = e => {
// console.log(e.key)
keyPresses[e.key] = true;
};
class Player {
constructor(x, y, color, left, right, up, down, radius) {
this.x = x;
this.y = y;
this.color = color;
this.left = left;
this.right = right;
this.up = up;
this.down = down;
this.radius = radius;
}
draw() {
ctx.fillStyle = this.color;
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
ctx.closePath();
ctx.fill();
}
update() {
if (keyPresses[this.left]) {
this.x -= settings.speed;
}
if (keyPresses[this.right]) {
this.x += settings.speed;
}
if (keyPresses[this.up]) {
this.y -= settings.speed;
}
if (keyPresses[this.down]) {
this.y += settings.speed;
}
// Screen bounds
if (this.x < 0 + this.radius) this.x = 0 + this.radius;
if (this.y < 0 + this.radius) this.y = 0 + this.radius;
if (this.x > settings.width - this.radius) this.x = settings.width - this.radius;
if (this.y > settings.height - this.radius) this.y = settings.width - this.radius;
}
}
/*
Creating the player objects
*/
let p1 = new Player(25, 25, "red", "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", 10);
let p2 = new Player(75, 75, "black", "a", "d", "w", "s", 5);
function draw() {
ctx.clearRect(0, 0, settings.width, settings.height);
p1.draw();
p2.draw();
};
function update() {
draw();
listenKeyboard();
p1.update();
p2.update();
requestAnimationFrame(update);
};
requestAnimationFrame(update);
</script>
</body>
</html>
世界上最好的游戏
玩家运动2.0
基于类的播放器对象和键盘控件
使用箭头键和WASD键移动球
const c=document.getElementById（“画布”）；
const ctx=c.getContext（“2d”）；
让设置={
宽度：100，
身高：100，
速度：1
};
c、 宽度=设置。宽度；
c、 高度=设置。高度；
/*
为每个按键保留布尔值的对象
*/
让按键={}；
函数listenKeyboard（）{
文件。添加的文件列表（“键控”，键控）；
文件。添加的文件列表（“键控”，键控）；
};
常数keyUp=e=>{
按键[e.键]=假；
};
const keyDown=e=>{
//console.log（e.key）
按键[e.键]=真；
};
职业选手{
构造函数（x、y、颜色、左、右、上、下、半径）{
这个.x=x；
这个。y=y；
这个颜色=颜色；
this.left=左；
这个。右=右；
this.up=up；
this.down=向下；
这个半径=半径；
}
画（）{
ctx.fillStyle=this.color；
ctx.beginPath（）；
ctx.arc（this.x，this.y，this.radius，0，Math.PI*2，false）；
ctx.closePath（）；
ctx.fill（）；
}
更新（）{
if（按[this.left]键）{
此.x-=settings.speed；
}
if（按[this.right]键）{
此.x+=settings.speed；
}
if（按[this.up]键）{
此.y-=设置.speed；
}
if（按[this.down]键）{
此.y+=settings.speed；
}
//屏幕边界
如果（this.x<0+this.radius）this.x=0+this.radius；
如果（this.y<0+this.radius）this.y=0+this.radius；
如果（this.x>settings.width-this.radius）this.x=settings.width-this.radius；
如果（this.y>settings.height-this.radius）this.y=settings.width-this.radius；
}
}
/*
创建播放器对象
*/
让p1=新玩家（25，25，“红色”，“箭头左”，“箭头右”，“箭头向上”，“箭头向下”，10）；
让p2=新玩家（75，75，“黑色”，“a”，“d”，“w”，“s”，5）；
函数绘图（）{
clearRect（0，0，settings.width，settings.height）；
p1.draw（）；
p2.draw（）；
};
函数更新（）{
draw（）；
listenKeyboard（）；
p1.update（）；
p2.update（）；
requestAnimationFrame（更新）；
};
requestAnimationFrame（更新）；