2016-12-30 9 views
1

jqueryで私の最初のゲームのプレイヤーコントローラーを作りたいのですが、何かが間違っています。私を助けてくれますか?私は矢印を押すとkeydownイベントが動作しません

$('canvas').keydown(function(e) { 
    alert('in function'); 
    if (e.keyCode == 37) {//37 - strzalka w lewo 
     moveleft(); 
    } 
    if (e.keyCode == 39) {//39 - strzalka w prawo 
     moveright(); 
    } 
    if (e.keyCode == 40) {//40 - strzalka w dol 
     movedown(); 
    } 
    if (e.keyCode == 38) {//38 - strzalka w gore 
     moveup(); 
    } 
    if (e.keyCode == 32) {//32 - spacja 

    } 
}); 

function moveup() { 
    gracz.speedY -= 1; 
} 

function movedown() { 
    gracz.speedY += 1; 
} 

function moveleft() { 
    gracz.speedX -= 1; 
} 

function moveright() { 
    gracz.speedX += 1; 
} 

、イベントハンドラは、キャンバス上のキー関連イベントを取得

+1

は 'canvas'にキー関連のイベントの取得がbeで信頼できませんst。代わりに 'canvas'の親要素、あるいは' window'を使ってください:https://jsfiddle.net/ayb9edLm/ –

+0

この質問を見てください:http://stackoverflow.com/questions/7613433/attach-keyboard-events-to-html5-canvas –

+0

ありがとうございます:) –

答えて

1

動作しない最高の状態で信頼できません。例えば、代わりにキャンバス、あるいはウィンドウの親要素を使用します。

$(window).keydown(function(e) { 
    // your code here... 
}); 

Working example

はまた、あなたは内のキー押下イベントの下で実行される機能を置くことによって、あなたのコードを簡素化することができますことに注意してくださいオブジェクト、このように、彼らのキーコード値をキー:

var gracz = { 
    speedY: 0, 
    speedX: 0, 
    keydown: { 
     '37': function() { gracz.speedX -= 1; }, // left 
     '38': function() { gracz.speedY -= 1; }, // up 
     '39': function() { gracz.speedX += 1; }, // right 
     '40': function() { gracz.speedY += 1; }, // down 
     '32': function() { console.log('SPACE'); } // space 
    } 
}; 

$(window).keydown(function(e) { 
    gracz.keydown[e.which](); 
    console.log(gracz); 
}); 

Working example

関連する問題