Q&A
ありがとうございました。
目標
左矢印キーを押している間、円が左に移動するようにしたいです。
問題
円が左に移動しません。
HTML5
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>test</title> 6 </head> 7 <body> 8 <canvas width="" height=""></canvas> 9 <script src=".js"></script> 10 </body> 11</html>
JavaScript
1var cvs = document.querySelector("canvas"); 2cvs.width = window.innerWidth; 3cvs.height = window.innerHeight; 4var ctx = cvs.getContext("2d"); 5var x = cvs.width / 2; 6 7window.addEventListener("keydown", (evt) => { 8 if (evt.key == 37) { 9 x--; 10 } 11}); 12 13function upd() { 14 ctx.clearRect(0, 0, cvs.width, cvs.height); 15 ctx.beginPath(); 16 ctx.fillStyle = "#000"; 17 ctx.arc(x, cvs.height / 2, 20, 0, 360); 18 ctx.fill(); 19 ctx.closePath(); 20 requestAnimationFrame(upd); 21} 22 23upd();
解決のために行った事
- addEventListenerのkeydownは実はキー長押しが関係ないのではと思い、実は少しずつ移動しているのではないかと思ったので、addEventListener内のif文の処理を「x -= 100;」にしてみたことがありますが移動しませんでした。
- addEventListenerの記述を関数内の手前や関数内の後ろや関数外の後ろに書き直したこともありましたが円は移動しませんでした。
- 関数内のif文の条件式が「evt == 37」となっていたことに、質問を投稿した時気付きました。「evt.key == 37」に訂正したのですが、円は移動しませんでした。
回答3件
0
ベストアンサー
キーコードで判断する場合は evt.key ではなく evt.keyCode ではないでしょうか？
javaScript
1//if (evt.key == 37) { 2if (evt.keyCode == 37) {
ただ、evt.keyCode は非推奨のようなので evt.key を使った方が良さそうです。
evt.key の場合は "ArrowLeft" のような文字列で判断します。
javaScript
1if (evt.key == "ArrowLeft" ) {
＜参考＞
■ KeyboardEvent.key
https://developer.mozilla.org/ja/docs/Web/API/KeyboardEvent/key
■ KeyboardEvent.keyCode
https://developer.mozilla.org/ja/docs/Web/API/KeyboardEvent/keyCode
投稿2021/12/12 12:24
総合スコア4633
0
js
1<!DOCTYPE hrml> 2<meta charset="UTF-8"> 3<title></title> 4<style> 5body { overflow: hidden; } 6</style> 7 8<body> 9 <canvas width="" height=""></canvas> 10 11<script> 12const 13 cvs = document.querySelector("canvas"), 14 ctx = cvs.getContext("2d"); 15 16cvs.width = window.innerWidth; 17cvs.height = window.innerHeight; 18 19let 20 x = cvs.width / 2, 21 y = cvs.height / 2, 22 key = null; 23 24 25function handler (event) { 26 switch (event.type) { 27 case 'keydown' : key = event.key; break; 28 case 'keyup' : key = null; break; 29 } 30} 31 32 33function upd() { 34 x += (key === 'ArrowRight') - (key === 'ArrowLeft'); 35 y += (key === 'ArrowDown') -(key === 'ArrowUp'); 36 37 ctx.clearRect(0, 0, cvs.width, cvs.height); 38 ctx.beginPath(); 39 ctx.fillStyle = "#000"; 40 ctx.arc(x, y, 20, 0, 360); 41 ctx.fill(); 42 ctx.closePath(); 43 requestAnimationFrame(upd); 44} 45 46['keyup', 'keydown'].forEach (t=> document.addEventListener (t, handler, false)); 47upd(); 48</script> 49
投稿2021/12/12 13:54
総合スコア616
0
canvas要素に対してキーイベントを有効にするためには、canvas要素に対してtabindexを設定して、その上で、canvas要素に対してfocus()メソッドを適用してあげてください。
html
1<canvas width="" height="" tabindex="0"></canvas>
javascript
1cvs.focus();
投稿2021/12/12 13:26
総合スコア44
ありがとうございました。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2021/12/13 14:03