Javascript：Onkeydown、特定の方向にテキストを移動しますが、2回押す必要があります

Question

このコードでは、何らかの理由でテキストを希望の方向に移動するためにキーを2回押す必要があります。もし私がそれをしなければ、テキストはそれが入った前の方向に向かい続けるでしょう。私は2時間のための解決策を探していました、私は配置する正しいコードを見つけることができないようです。 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); 
}; 

おかげ

は、ここでは、コードです！

Answer 1

を更新しましたようです（D）、次にA（右に行く）を押すと、「キーアップ」は方向を（kpu）に設定して、Dに設定します。もう一度押すと、 A。あなたの例では、あなたが「ドンという がhttps://jsfiddle.net/0d8ue6po/

注： 私の推薦は、あなたが異なる値と同じ変数を上書きするイベントの競合を持っていない、そのようにのみonkeydownイベントを使用し、そこに方向を設定することですトンでもグローバル変数（あなたがそれを将来的にやるかわからないが）必要がありますが、あなただけ行うことができます：あなたはどちらかの上書きの問題を持っていないでしょう

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

その方法。

Answer 2

あなたは「からkeyup」に方向を保持するグローバル変数を上書きしているように思えますが、onkeydownをキーコードをチェックするとき、代わりにkpuのkpdを使用し、間違った変数を使用している、私はあなたのjsfidle

Answer 3

keydownイベントハンドラでkeyupイベントの結果（kpu）を使用しています。これは、正しいキー値をヒットさせるために、キーを上下に再作成する必要があることを意味します。

あなたのケースでは、keyupイベントハンドラの必要はないと思われます。そのため、keydownイベントハンドラの変数kpdを使用して、ユーザが送信するキーイベントを送出する方がよいでしょう。