Canvas, 頂点座標がkeyCodeで動かせない

Canvasでシューティングゲームを作っていて、playerの飛行機（三角形）
のdrawTri()のpX座標をrequestAnimationFrameで描画して、
e.keyCodeに応じて動かそうとしているのですが、四角では動いたのに
動かせなくなってしまいました。どこが間違っているんでしょうか？

Javascript
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <title>Move Tri02</title>
6    <style>* { padding: 0; margin: 0; }
7        canvas { background: rgb(64, 64, 64); }
8    </style>
9</head>
10<body>
11    <canvas></canvas>
12    <script>
13        // 10-10-v2, moves paddle too!
14        // 10-18 del ball..
15        // 10-23 Tri filled
16        var canvas = document.querySelector('canvas');
17        w = canvas.width = window.innerWidth;
18        h = canvas.height = window.innerHeight;
19        var c = canvas.getContext('2d');
20
21        
22        var pW = 75; var pH = 75;
23        var pX = (w - pW)/2; var pY = h - pH;
24        var right = false; var left = false;
25        console.log(pX,pY);
26
27        function drawTri() {
28            // Go to the top (pX,pY);
29            // line to X+20, Y+40
30            // line to X-20, Y+40
31            // line to X,Y
32
33            c.beginPath();
34            c.strokeStyle = '#fff';
35            c.moveTo(pX, pY);
36            c.lineTo(pX + 20,pY + 40);
37            c.lineTo(pX - 20,pY + 40);
38            c.lineTo(pX,pY)
39
40            
41            c.stroke();
42            c.fillStyle = '#0095DD';
43            c.fill();
44            c.closePath();
45        }
46
47        function draw() {
48            c.clearRect(0,0,w,h);
49            drawTri();
50
51            if (right)
52            //&& pX < w - pW
53                pX += 7;
54            else if (left && 0 <pX)
55                pX -= 7;
56        }
57        document.addEventListener("keydown", KeyDownHandler, false);
58        document.addEventListener("keyup", KeyUpHandler, false);
59
60        function KeyDownHandler(e) {
61            if(e.keyCode == 39) { // or の書き方調べる
62                right = true;
63            } else if(e.keyCode == 37) {
64                left = true;
65            }
66        }
67        function KeyUpHandler(e) {
68            if (e.keyCode == 39) {
69                right = false;
70            } else if (e.keyCode == 37) {
71                left = false;
72            }
73        } requestAnimationFrame(draw);
74        requestAnimationFrame(draw);
75        
76    </script>
77</body>
78</html>

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

回答2件

ベストアンサー

drawの中でrequestAnimationFrame(draw)を呼び出していないので、drawは１回しか実行されません。

requestAnimationFrameに渡す関数はだいたいこのように定義するのがお決まりとなっています。

js
1function draw(time) {
2  // ...
3  // draw something
4  // ...
5
6  requestAnimationFrame(draw);
7}

あと、requestAnimationFrame(draw)を最後２回実行していますがその必要はないです。

window.requestAnimationFrame - MDN (英語), (日本語)

投稿2018/10/23 06:21

karamarimo

総合スコア2551

Kaede0902

2018/11/06 13:56

シンプルにそれでよかったんですね！！ありがとうございます！

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

以下でいけると思います。

javascript
1function KeyDownHandler(e) {
2    e.preventDefault();          // Append:キー入力した際のデフォルト無効
3    if(e.keyCode == 39) {
4        right = true;
5    } else if(e.keyCode == 37) {
6        left = true;
7    }
8    requestAnimationFrame(draw); // Append:requestAnimationFrameをここに移動
9}
10function KeyUpHandler(e) {
11           ・
12          ~略~ 
13           ・
14}
15draw() ;                         // Append:draw();をCall
16// requestAnimationFrame(draw);  // コメントアウト
17// requestAnimationFrame(draw);  // コメントアウト