Keydown的KineticJS形狀運動

Question

我使用KineticJS的transitionTo在箭頭鍵（keydown事件）的幫助下製作了一個形狀。

我有2個問題：

1.按壓形狀的移動具有短延遲密鑰後。我如何消除延遲？ ？

2.如何讓形狀同時按下兩個箭頭鍵角移動這裏是JavaScript：

var stage = new Kinetic.Stage({ 
    container: 'container', 
    width: screen.width, 
    height: 500 
}); 
var layer = new Kinetic.Layer(); 

var circle = new Kinetic.Circle({ 
    x: stage.getWidth()/2, 
    y: stage.getHeight()/2, 
    radius: 70, 
    fill: 'yellow', 
    stroke: 'black', 
    strokeWidth: 4 
}); 

// add the shape to the layer 
layer.add(circle); 

// add the layer to the stage 
stage.add(layer); 

window.addEventListener('keydown', function(e) { 
    if (e.keyCode == 37) { //Left Arrow Key 
     setTimeout(function() { 
      circle.transitionTo({ 
       x: circle.getX() - 10, 
       y: circle.getY(), 
       duration: 0.01 
      }) 
     }, 0); 
    } 
    if (e.keyCode == 38) { //Up Arrow Key 
     setTimeout(function() { 
      circle.transitionTo({ 
       x: circle.getX(), 
       y: circle.getY() - 10, 
       duration: 0.01 
      }) 
     }, 0); 
    } 
    if (e.keyCode == 39) { //Right Arrow Key 
     setTimeout(function() { 
      circle.transitionTo({ 
       x: circle.getX() + 10, 
       y: circle.getY(), 
       duration: 0.01 
      }) 
     }, 0); 
    } 
    if (e.keyCode == 40) { //Top Arrow Key 
     setTimeout(function() { 
      circle.transitionTo({ 
       x: circle.getX(), 
       y: circle.getY() + 10, 
       duration: 0.01 
      }) 
     }, 0); 
    } 
}); 

小提琴：http://jsfiddle.net/uUWmC/1/

Answer 1

對於延遲，您可以解開setTimeout和transitionTo如下所示;

window.addEventListener('keydown', function(e) { 
    if (e.keyCode == 37) //Left Arrow Key 
     circle.attrs.x -= 10; 
    if (e.keyCode == 38) //Up Arrow Key 
     circle.attrs.y += 10; 
    if (e.keyCode == 39) //Right Arrow Key 
     circle.attrs.x += 10; 
    if (e.keyCode == 40) //Top Arrow Key 
     circle.attrs.y -= 10; 
    layer.draw(); 
}); 

對於對角線移動，您不能同時按兩個箭頭鍵。這是您的操作系統限制。你可以按alt鍵，ctrl鍵......等。

Answer 2

檢測對角線移動以跟蹤哪些按鍵已被按下/釋放的最佳方式。我使用所謂的「key_status.js」一個jQuery插件，它允許你檢查的東西，如任意鍵的狀態：

if (keydown.left) { 
    console.log("left arrow is down") 
} 
if (keydown.left && keydown.up) { 
    console.log("Left/Up Diagonal!") 
} 

當然，要做到這樣的事情，你需要換一個setTimeout的所有輸入檢查或requestAnimFrame。 http://www.html5rocks.com/en/tutorials/canvas/notearsgame/

直接鏈接腳本：

我在優秀的HTML5遊戲的教程在這裏發現了這個腳本和方法（http://strd6.com/space_demo/javascripts/key_status.js）

Answer 3

有庫，可以幫助您識別組合鍵。退房：

• http://dmauro.github.io/Keypress/
• http://robertwhurst.github.io/KeyboardJS/