Javascriptイベントリスナーはブール値を更新しません

Question

私はhtml5キャンバスを使用して非常に基本的なjavascriptゲームを作成しようとしています。ですから、 "initメソッド"をインスタンス化して呼び出すと、キャンバス上に赤い円を作成するはずのメインプレーヤー "クラス"を作成しました。最後に、矢印キーを使って制御できるはずですが、これを行うには、イベントリスナーをドキュメントに追加し、keydown/keyupをチェックして、leftPressed = trueのようなブール値を変更しようとしました。それに基づいて、変位メソッド（setInterval関数の描画で呼び出される）は、赤い円の位置を更新するためのもので、そこに問題があります - index.htmlファイルを開くと赤い円が作成されますが、矢印キーを押すと、移動することができません。何か助けていただければ幸いです。私の無知を言い訳してください、私は約1週間前にjavascriptを始めました。ここで

はプレーヤー "クラス" を含むjsのコードです：ここで

canvas = document.getElementById("surface"); 
ctx = canvas.getContext("2d"); 

//user controlled player class 

player = function(x,y,dx,dy,radius) { 
    this.x = x; 
    this.y = y; 
    this.speedx = dx; 
    this.speedy = dy; 
    this.radius = radius; 

    this.leftPressed = false; 
    this.rightPressed = false; 
    this.upPressed = false; 
    this.downPressed = false; 

    document.addEventListener("keydown",this.onKeyDown,false); 
    document.addEventListener("keyup",this.onKeyUp,false); 


    this.init = function() { 
     ctx.beginPath(); 
     ctx.arc(this.x,this.y,this.radius,0,Math.PI*2); 
     ctx.fillStyle = "red"; 
     ctx.fill(); 
     ctx.closePath(); 
    } 

    this.onKeyDown = function(e) { 
     if (e.keyCode == 37) { 
      this.leftPressed = true; 
     } 
     if (e.keyCode == 38) { 
      this.upPressed = true; 
     } 
     if (e.keyCode == 39) { 
      this.rightPressed = true; 
     } 
     if (e.keyCode == 40) { 
      this.downPressed = true; 
     } 
    } 
    this.onKeyUp = function(e) { 
     if (e.keyCode == 37) { 
      this.leftPressed = false; 
     } 
     if (e.keyCode == 38) { 
      this.upPressed = false; 
     } 
     if (e.keyCode == 39) { 
      this.rightPressed = false; 
     } 
     if (e.keyCode == 40) { 
      this.downPressed = false; 
     } 
    } 
    this.displace = function() { 
     if (this.leftPressed) { 
      this.x -= this.speedx; 
     } 
     if (this.rightPressed) { 
      this.x += this.speedx; 
     } 
     if (this.downPressed) { 
      this.y -= this.speedy; 
     } 
     if (this.upPressed) { 
      this.y += this.speedy; 
     } 
    } 

} 

はmain.jsコードです：

canvas = document.getElementById("surface"); 
ctx = canvas.getContext("2d"); 

ctx.fillStyle = "black"; 
ctx.fillRect(0,0,canvas.width,canvas.height); 



player1 = new player(500,500,7,7,25); 


function draw() { 
    ctx.fillStyle = "black"; 
    ctx.fillRect(0,0,canvas.width,canvas.height); 

    player1.init(); 
    player1.displace(); 
} 

setInterval(draw,10); 

Answer 1

これは古典的なJavascriptのバグのようになります。thisキーワードのdoesnあなたが期待するような行為はありません。このコードで

：

function C() { 
    this.prop = true; 
    this.get = function() { 
     return this.prop; 
    } 
} 
var obj = new C(); 

obj.get()true返しますが、var get = obj.get; get()undefinedを返します。ここに入るために少しだけナットアンドボルトが使われているのかについての正確な説明はありますが、一般的には最も簡単な答えはです。後で実行する参照メンバ関数はありません。代わりに、このような何か：

document.addEventListener("keydown", e => { 
    this.onKeyDown(e); 
}, false); 

ラムダ構文はthisを台無しにしないため、これは動作します。

var self = this; 
document.addEventListener("keydown", function(e) { 
    self.onKeyDown(e); 
}, false); 

またはそれを修正するためにbindを使用：あなたは事前ラムダJSをサポートしたい場合は、この少し醜いバージョンを行うことができます。

要するに、これには多くの解決策がありますが、それらのすべてを理解するには、Javascriptのやや奇妙なprotoptypical継承システムをよく理解する必要があります。