Question

HTML：

<canvas id="mycanvas"></canvas>

CSS：

canvas {border: 1px solid black}

JS：

window.addEventListener('load', function(){

  //constants
  var CANVAS_WIDTH = 500;
  var CANVAS_HEIGHT = 300;
  var canvas = document.getElementsByTagName('canvas')[0];
  canvas.width = CANVAS_WIDTH;
  canvas.height = CANVAS_HEIGHT;

  //dimensions of the rectangle
  var x = 100;
  var y = 100;
  var w = 5;
  var h = 5;
  var speed = 10;   

  //grab the canvas and context
  var canvas = document.getElementById("mycanvas");
  var ctx = canvas.getContext("2d");
  ctx.fillStyle = "rgb(200, 0, 100)";
  ctx.fillRect(x, y, w, h);

  //key array
  var keys = []; 
  onkeydown = onkeyup = function(e){
      keys[e.keyCode] = e.type == 'keydown';
      if(keys[68] || keys[65] || keys[83] || keys[87]){
          step();
      }
  }      

  //update the rectangle position
  var updateX = function() {
    if(keys[65]){
      x = x - speed; 
    }      
    else {
      x = x + speed;        
    }
  };
  var updateY = function() {
    if(keys[87]){
      y = y - speed;
    }
    else{      
      y = y +  speed;
    }
  };        

  //show it on the screen
  var draw = function() {
    ctx.clearRect(0,0,500,300);
    ctx.fillStyle = "rgb(200, 0, 100)";
    ctx.fillRect(x, y, w, h);
  };

  //gets executed multiple times per second
  var step = function() {

    if(keys[68] || keys[65]){
      updateX();
      if(x >= (CANVAS_WIDTH - 6)){
        x=(CANVAS_WIDTH - 6);
      }
      else if(x <= 0){
        x=0;
      }
    }
    else if(keys[83] || keys[87]){
      updateY();
      if(y >= (CANVAS_HEIGHT - 6)){
        y=(CANVAS_HEIGHT - 6);
      }      
      else if(y <= 0){
        y=0;
      }
    }    
    draw();

  };  

});

以下是项目：https://jsfiddle.net/hxpkrbxt/3/

这是我的一个简单的学习项目，它允许用户使用A / S / D / W键移动5x5像素的元素。有几件事我不明白，如果有人可以向我解释，我会感激不尽：

当您按下其中一个键时，方块会沿您想要的方向移动一次，如果您一直按下该键，则在一点之后方块会朝该方向连续移动。为什么会出现短暂停顿？
我希望广场能够对角移动，但事实证明它并不像基本方向那样直截了当，我无法弄清楚如何同时触发两个功能（updateX并且当按下两个按钮时更新。）

更新：

在这些人的帮助下，这是我想要创建的最终版本：http://jsfiddle.net/41etss7k/1/

Answer 1

您可以使用缓冲区来保存类型。以这种方式运动非常顺利

https://jsfiddle.net/hxpkrbxt/9/

                    //constants
  var CANVAS_WIDTH = 500;
  var CANVAS_HEIGHT = 300;
  var canvas = document.getElementsByTagName('canvas')[0];
  canvas.width = CANVAS_WIDTH;
  canvas.height = CANVAS_HEIGHT;

  //dimensions of the rectangle
  var x = 100;
  var y = 100;
  var w = 5;
  var h = 5;
  var speed = 5;   

  //grab the canvas and context
  var canvas = document.getElementById("mycanvas");
  var ctx = canvas.getContext("2d");
  ctx.fillStyle = "rgb(200, 0, 100)";
  ctx.fillRect(x, y, w, h);

  //key array
  var keys = [];
  var currentPressed = {'x':0,'y':0}
  var activeKey = {}
  onkeydown = function(e){
      if(activeKey[e.keyCode]){
          return;
                   }
      activeKey[e.keyCode]=true;
  } 
  onkeyup = function(e){
      activeKey[e.keyCode]=false;
  } 

  //show it on the screen
  var draw = function() {
    ctx.clearRect(0,0,500,300);
    ctx.fillStyle = "rgb(200, 0, 100)";
    ctx.fillRect(x, y, w, h);
  };

  //gets executed multiple times per second
  var step = function() {
      currentPressed.x=currentPressed.y=0;
      currentPressed.x -= (activeKey[65])?1:0;
      currentPressed.y -= (activeKey[87])?1:0;
      currentPressed.x += (activeKey[68])?1:0;
      currentPressed.y += (activeKey[83])?1:0;

      x += Math.sign(currentPressed.x) * speed;
    y += Math.sign(currentPressed.y) * speed;
      if(x >= (CANVAS_WIDTH - 6)){
        x=(CANVAS_WIDTH - 6);
      }
      else if(x <= 0){
        x=0;
      }
      if(y >= (CANVAS_HEIGHT - 6)){
        y=(CANVAS_HEIGHT - 6);
      }      
      else if(y <= 0){
        y=0;
      }
    draw();
    requestAnimationFrame(step);
  };  

requestAnimationFrame(step);

以这种方式你有一个分离键＆lt; - ＆gt;使用setInterval移动

Answer 2

暂停来自我认为的操作系统，在键入记事本时只需按住一个键即可。

将else if更改为if。

var step = function（）{

    if(keys[68] || keys[65]){
      updateX();
      if(x >= (CANVAS_WIDTH - 6)){
        x=(CANVAS_WIDTH - 6);
      }
      else if(x <= 0){
        x=0;
      }
    }
    if(keys[83] || keys[87]){
      updateY();
      if(y >= (CANVAS_HEIGHT - 6)){
        y=(CANVAS_HEIGHT - 6);
      }      
      else if(y <= 0){
        y=0;
      }
    }    
    draw();

  };

Answer 3

对我来说很好，必须是你的键盘设置
你明确告诉它只能向一个方向移动：
```
else if(keys[83] || keys[87]){
```

将其更改为：

if(keys[83] || keys[87]){

https://jsfiddle.net/hxpkrbxt/5/

在keydown的画布图画运动

3 个答案: