Javascript：Onkeydown，將文本移動到某個方向，但需要按兩次

在此代碼中，出於某種原因，我需要雙擊該鍵才能使文本走向我想要的方向。如果我不這樣做，文本將繼續沿着前一個方向前進。我現在正在爲此尋找一個解決方案，現在我似乎無法找到正確的代碼。Javascript：Onkeydown，將文本移動到某個方向，但需要按兩次

下面的代碼： https://jsfiddle.net/MindZeroJ5/4cykaLs8/

HTML：

<canvas id="canvas" style="border:1px solid black;" width="500" height="500" ></canvas>

JAVASCRIPT：

"use strict"; 
var c = document.getElementById("canvas"), 
    ctx = c.getContext("2d"), 
    y, 
    x, 
    kpd, 
    kcd, 
    kpu, 
    kcu, 
    HEIGHT, 
    WIDTH; 

x = 50; 
y = 50; 
HEIGHT = 500; 
WIDTH = 500; 

ctx.font = "20px Georgia"; 
ctx.fillText("Hello World!", x, y); 

function movetextup() { 
    ctx.clearRect(0, 0, HEIGHT, WIDTH); 
    y -= 10; 
    ctx.fillText("Hello World!", x, y); 
    console.log(x + " " + y); 
} 
function movetextdown() { 
    ctx.clearRect(0, 0, HEIGHT, WIDTH); 
    y += 10; 
    ctx.fillText("Hello World!", x, y); 
    console.log(x + " " + y); 
} 
function movetextleft() { 
    ctx.clearRect(0, 0, HEIGHT, WIDTH); 
    x -= 10; 
    ctx.fillText("Hello World!", x, y); 
    console.log(x + " " + y); 
} 
function movetextright() { 
    ctx.clearRect(0, 0, HEIGHT, WIDTH); 
    x += 10; 
    ctx.fillText("Hello World!", x, y); 
    console.log(x + " " + y); 
} 

document.onkeydown = function (e) { 
    kpd = String.fromCharCode(e.keyCode); 
    kcd = e.keyCode; 
    console.log('pressed ' + kpd); 
    if (kpu == "W") { 
     movetextup(); 
    } 
    if (kpu == "S") { 
     movetextdown(); 
    } 
    if (kpu == "A") { 
     movetextleft(); 
    } 
    if (kpu == "D") { 
     movetextright(); 
    } 
}; 
document.onkeyup = function (e) { 
    kpu = String.fromCharCode(e.keyCode); 
    kcu = e.keyCode; 
    console.log('unpressed ' + kpu); 
};

謝謝！

來源

2016-12-25 Ramos

好像要覆蓋保存在「KEYUP」的方向全局變量，所以如果您要移動到左側（D），然後按A（向右移動），「鍵控」甚至會將方向（kpu）設置爲D，只有當您再次按下時它纔會被設置爲A。我的建議是隻使用onkeydown事件，並設置方向在那裏，這樣你就不必事件覆蓋不同的值相同的變量衝突： https://jsfiddle.net/0d8ue6po/

注意，在你的榜樣，你不」甚至不需要一個全局變量（不知道你會在將來用它做什麼），但你可能只是做：

document.onkeydown = function (e) { 
    var kpu = String.fromCharCode(e.keyCode); 
    var kcd = e.keyCode; 
    /* rest of the code for moving */ 
}

這樣，你就不必重寫任何問題。

來源

2016-12-25 04:40:57

好像你用錯了可變檢查鍵碼的onkeydown時，使用kpd代替kpu，我已經更新您的jsfidle

來源

2016-12-25 04:33:45 billyzaelani

您正在keydown事件處理程序中使用keyup事件結果（kpu），這意味着應該爲了擊中正確的鍵值而關閉和再次上下鍵。

那麼，在你的情況下，似乎不需要keyup事件處理程序，因此你最好在你的keydown事件處理程序中使用kpd變量來分派關鍵事件用戶發送。

來源

2016-12-25 04:53:02

Javascript：Onkeydown，將文本移動到某個方向，但需要按兩次

回答

相關問題