キャンバスで2つのオブジェクトを動かすのに助けが必要

Question

私はJavaScriptを学び、古いAtari Pongゲームを作成しようとしています。私はパドルの1つを動かすことができるこの時点で立ち往生しているが、2番目のパドルは動かない。ゲームはまだ機能していますが、1つのパドルは動かないでしょう。ここでは動きませんパドルのための私のコードは次のとおりです。

var p2X = canvas.width/2 + 550; 
var p2Y = canvas.height/2; 
var p2Radius = 35; 
var p2Height = 100; 

と：

var p2UpPressed = false; 
var p2DownPressed = false; 
document.addEventListener("keydown", keyDownHandler, false); 
document.addEventListener("keyup", keyUpHandler, false); 

私はすでに最初のパドルのためのEventListenerとkeyUpイベント/ downHandlerを使用し、これがある場合、私は思ったんだけどなぜ第二は動かないのですか？すべてのヘルプははるかに高く評価されるだろう

if(p2UpPressed && p2Y <canvas.height-p2Radius){ 
p2Y += 7; 
} 
else if(p2DownPressed && p2Y > 0){ 
p2Y-=7; 
} 

：

function keyDownHandler(e){ 
if(e.keyCode == 87){ 
p2UpPressed = true; 
} 
else if(e.keyCode == 83){ 
p2DownPressed = true; 
} 
} 
function keyUpHandler(e){ 
if(e.keyCode == 87){ 
p2UpPressed = false; 
} 
else if(e.keyCode == 83){ 
p2DownPressed = false; 
} 
} 

は、ここで実際の移動ビットです。ありがとう！

Answer 1

まず、デバッグのヒント：まず、プレーヤー2のハンドラーが呼び出されているかどうかを確認してください。簡単に行うには、console.log("hello fren");をハンドラに入れ、キーを押してコンソールを見てください。代わりに、ブレークポイントを使用したり、コンソールで変数「p2UpPressed」を「監視」することはできますが、これらの手法は、この状況では少し高度なものであり、本当に必要なものではありません。

したがって、推測とコメントの確認に基づいて、両方のプレーヤーに同じ名前のハンドラ関数が用意されています。これはコード内で最初に定義された関数を単に使用するため、機能しません。あなたが望むものは何でも構わないことを忘れてはいけませんので、あなたがそう感じたのであれば、p1KeyDownHandlerとp2KeyDownHandler、またはyoyoboiとmisterdudeという名前を付けることができます。

私はあなたが同じイベントに複数のハンドラを追加することができますかなり確信しているが、これはおそらくこれを行うには良い方法です：

function keyDownHandler(e) { 
    if (e.keyCode == xx) { //replace xx with whatever keycode you want for p1 
     p1UpPressed = true; 
    } else if (e.keyCode == xx) { //same as above 
     p1DownPressed = true; 
    } else if (e.keyCode == 87) { 
     p2UpPressed = true; 
    } else if (e.keyCode == 83) { 
     p2DownPressed = true; 
    } 
} 

function keyUpHandler(e) { 
    if (e.keyCode == xx) { //same as above 
     p1UpPressed = false; 
    } else if (e.keyCode == xx) { //same as above 
     p1DownPressed = false; 
    } else if (e.keyCode == 87) { 
     p2UpPressed = false; 
    } else if (e.keyCode == 83) { 
     p2DownPressed = false; 
    } 
} 

そして、あなたは一度だけこの操作を行います。

document.addEventListener("keydown", keyDownHandler, false); 
document.addEventListener("keyup", keyUpHandler, false); 

を