Fatal编程技术网
  • javascript/
  • Javascript 如何一次检测多个关键动作

Javascript 如何一次检测多个关键动作

javascript

Javascript 如何一次检测多个关键动作,javascript,Javascript,今天我想知道如何一次检测到多个关键动作。例如，在这个代码示例中，我希望能够同时按下2个箭头键，以便球可以沿对角线移动 代码如下： <!DOCTYPE html> <html> <head> <title>Mousemove</title> </head> <body> <script src="https://code.jquery.com/jquery-

今天我想知道如何一次检测到多个关键动作。例如，在这个代码示例中，我希望能够同时按下2个箭头键，以便球可以沿对角线移动

代码如下：

    <!DOCTYPE html>
  <html>
  <head>
      <title>Mousemove</title>
  </head>

  <body>

      <script src="https://code.jquery.com/jquery-2.1.0.js"></script>
<canvas id="canvas" width="500" height="500"></canvas>
      <script>

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var width = canvas.width;
var height = canvas.height;

var circle = function (x, y, radius, fillCircle) {
  ctx.beginPath();
  ctx.arc(x, y, radius, 0, Math.PI * 2, false);
  if (fillCircle) {
    ctx.fill();
  } else {
    ctx.stroke();
  }
};

// The Ball constructor
var Ball = function () {
  this.x = width / 2;
  this.y = height / 2;
  this.xSpeed = 5;
  this.ySpeed = 0;
};

// Update the ball's position based on its speed
Ball.prototype.move = function () {
  this.x += this.xSpeed;
  this.y += this.ySpeed;

  if (this.x < 0) {
    this.x = width;
  } else if (this.x > width) {
    this.x = 0;
  } else if (this.y < 0) {
    this.y = height;
  } else if (this.y > height) {
    this.y = 0;
  }
};

// Draw the ball at its current position
Ball.prototype.draw = function () {
  circle(this.x, this.y, 10, true);
};

// Set the ball's direction based on a string

Ball.prototype.setDirection = function() {
  var upPressed = keysDown[directions.up];
  var downPressed = keysDown[directions.down];
  var rightPressed = keysDown[directions.right];
  var leftPressed = keysDown[directions.left];

  if (upPressed) {
    this.ySpeed = -5;
  } else if (downPressed) {
    this.ySpeed = 5;
  }

  if (leftPressed) {
    this.xSpeed = -5;
  } else if (rightPressed) {
    this.xSpeed = 5;
  }
};

// Create the ball object
var ball = new Ball();

// An object to convert keycodes into action names
var directions = {
  left: 37,
  up: 38,
  right: 39,
  down: 40
};

// The keydown handler that will be called for every keypress

var keysDown = {};
$('body').keydown(function(event) {
  keysDown[event.keyCode] = true;
}).keyup(function(event) {
  keysDown[event.keyCode] = false;
});

// The animation function, called every 30 ms
setInterval(function () {
  ctx.clearRect(0, 0, width, height);

  ball.draw();
  ball.move();

  ctx.strokeRect(0, 0, width, height);
}, 30);
       </script>
   </body>
   </html>


鼠标移动
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var width=canvas.width；
var height=canvas.height；
变量圆=函数（x、y、半径、圆角圆）{
ctx.beginPath（）；
弧（x，y，半径，0，数学π*2，假）；
如果（填充圆）{
ctx.fill（）；
}否则{
ctx.stroke（）；
}
};
//球构造函数
var Ball=函数（）{
这.x=宽度/2；
这.y=高度/2；
这个.xSpeed=5；
这个.ySpeed=0；
};
//根据球的速度更新球的位置
Ball.prototype.move=函数（）{
this.x+=this.xSpeed；
this.y+=this.y速度；
如果（此.x<0）{
x=宽度；
}else if（this.x>宽度）{
这个.x=0；
}else if（此.y<0）{
y=高度；
}else if（this.y>高度）{
这个。y=0；
}
};
//在当前位置绘制球
Ball.prototype.draw=函数（）{
圆圈（这个.x，这个.y，10，真）；
};
//根据线设置球的方向
Ball.prototype.setDirection=函数（）{
var upPressed=keysDown[directions.up]；
var DOWNSPRESSED=向下键[directions.down]；
var rightPressed=向下键[directions.right]；
var leftPressed=向下键[directions.left]；
如果（增加）{
这个.ySpeed=-5；
}else if（按下）{
这个.y速度=5；
}
如果（左按）{
this.xSpeed=-5；
}else if（右键按下）{
这个.xSpeed=5；
}
};
//创建球对象
var ball=新的ball（）；
//将键代码转换为操作名称的对象
变量方向={
左：37，
上升：38，
右：39，
下降：40
};
//每次按键都将调用的keydown处理程序
var keysDown={}；
$（'body'）.keydown（函数（事件）{
keysDown[event.keyCode]=true；
}).keyup（功能（事件）{
keysDown[event.keyCode]=false；
});
//动画函数，每30毫秒调用一次
setInterval（函数（）{
ctx.clearRect（0，0，宽度，高度）；
ball.draw（）；
ball.move（）；
ctx.冲程（0，0，宽度，高度）；
}, 30);
如果您已经测试了上面的代码，您将看到可以使用箭头键在小球周围移动。我想知道你怎么能同时检测到多个箭头键被按下。所以，如果我按下向下按钮和右按钮，它将沿对角线方向移动到右下角。我将如何编写此代码？举个例子就好了！谢谢大家

这样做的基本思想是，你必须跟踪被按下的按键，可能是在一个对象中，然后在释放按键时将其移除

var keysDown = {};
$('body').keydown(function(event) {
  keysDown[event.keyCode] = true;
}).keyup(function(event) {
  keysDown[event.keyCode] = false;
});
然后，可以在更改方向时引用这些关键点

// This is easier if you switch the way you save direction
var directions = {
  up: 38,
  down: 40,
  ...
};
Ball.prototype.setDirection = function() {
  var upPressed = keysDown[directions.up];
  var downPressed = keysDown[directions.down];
  ...

  if (upPressed) {
    this.ySpeed = -5;
  } else if (downPressed) {
    this.ySpeed = 5;
  }

  if (leftPressed) {
  ...
};
对于这个问题，有一个很好的解决办法：有人能解决这个问题吗？对不起，我填了你的建议，但对我来说不起作用me@Cool123那怎么办？没用。我只是打印位置，但重要的是x和y是否正确更新。在这里，我将重新编辑我提出的问题，让您看看。@Cool123您没有像我那样切换
方向
变量。它不会工作，因为没有
方向。向上
等。另外，您现在正在
设置方向
中设置
x
，而不是
xSpeed
。谢谢您的帮助，迈克！