arcメソッドによる円が動かない

目標

左矢印キーを押している間、円が左に移動するようにしたいです。

問題

円が左に移動しません。

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件

ベストアンサー

キーコードで判断する場合は 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

cx20

総合スコア4707

退会済みユーザー

2021/12/13 14:03

ありがとうございました。

行動規範の内容に同意します

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

babu_babu_baboo

総合スコア616

退会済みユーザー

2021/12/13 14:04

ありがとうございました。

行動規範の内容に同意します

canvas要素に対してキーイベントを有効にするためには、canvas要素に対してtabindexを設定して、その上で、canvas要素に対してfocus()メソッドを適用してあげてください。

html
1<canvas width="" height="" tabindex="0"></canvas>

javascript
1cvs.focus();

投稿2021/12/12 13:26

justmeet0924

総合スコア44

退会済みユーザー

2021/12/13 14:04

ありがとうございました。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.29%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

目標

問題

解決のために行った事

関連した質問