マウス追従と同時に画像を動くようにしたい

###前提・実現したいこと
ap.pngは飛行機の画像です。
実現したい機能は
１）飛行機がマウスを追従
→実現済み
２）飛行機の頭がマウスの方向を向く
→例えばマウスを右回りにしたら飛行機も右回り、マウスを左回りにしたら飛行機も左回りになるようにしたい。

canvasにこだわりませんので、上記２）が簡単に実現できるアドバイスいただければ幸いです。
お導きのほど、宜しくお願いします。

###該当のソースコード

lang
1<canvas id="canvas-container" width="100%" height="100%"></canvas>

lang
1html, body {
2  width: 100%;
3  height: 100%;
4}
5* {
6  margin: 0;
7  padding: 0;
8}
9#canvas-container {
10  width: 100%;
11  height: 100%;
12  background: #eee;
13}

lang
1
2var theta = 10;
3
4window.requestAnimFrame = (function(){
5    return  window.requestAnimationFrame   ||
6        window.webkitRequestAnimationFrame ||
7        window.mozRequestAnimationFrame    ||
8        window.oRequestAnimationFrame      ||
9        window.msRequestAnimationFrame     ||
10        function(callback){
11            window.setTimeout(callback, 1000 / 60);
12        };
13})();
14
15
16window.onload = function() {
17    // Canvas未サポートは実行しない
18    if (!window.HTMLCanvasElement) return;
19
20    var canvas = document.querySelector('#canvas-container');
21    var ctx = canvas.getContext('2d');
22    var queue = null;
23
24    var img = new Image();    //新規画像オブジェクト
25    img.src = "./ap.png";   //読み込みたい画像のパス
26
27    // Canvasサイズを100%
28
29    window.addEventListener("resize", function() {
30        clearTimeout( queue );
31        queue = setTimeout(function() {
32            setCanvasSize();
33        }, 300 );
34    }, false );
35
36    var setCanvasSize = function() {
37        canvas.width = document.documentElement.clientWidth;
38        canvas.height = document.documentElement.clientHeight;
39    };
40    setCanvasSize();
41
42
43    var clickPoint = {
44        x: 0,
45        y: 0
46    };
47
48    var Particle = function(scale, color, speed) {
49        this.scale = scale; //大きさ
50        this.color = color; //色
51        this.speed = speed; //速度
52        this.position = {   // 位置
53            x: 0,
54            y: 0
55        };
56    };
57
58    Particle.prototype.draw = function() {
59        ctx.beginPath();
60        ctx.drawImage(img, this.position.x-25, this.position.y-25, 50, 50)
61        ctx.fillStyle = this.color;
62        ctx.fill();
63    };
64
65    Particle.prototype.update = function() {
66        this.position.x += (clickPoint.x - this.position.x) / this.speed;
67        this.position.y += (clickPoint.y - this.position.y) / this.speed;
68
69        this.draw();
70    };
71
72    var particle = new Particle(0, '#D0A000', 5);
73
74    var loop = function() {
75        requestAnimFrame(loop);
76        // 描画をクリアー
77        ctx.clearRect(0,0, ctx.canvas.width, ctx.canvas.height);
78
79        particle.update();
80    };
81    loop();
82
83    var rect = canvas.getBoundingClientRect();
84
85    canvas.addEventListener('mousemove', function(e) {
86        var mouseX = e.clientX - rect.left;
87        var mouseY = e.clientY - rect.top;
88
89        clickPoint.x = mouseX;
90        clickPoint.y = mouseY;
91
92    }, false);
93};

kei344

2017/04/14 18:03

質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、質問の仕方について一度teratailのヘルプをご確認ください。 https://teratail.com/help/avoid-asking https://teratail.com/help/question-tips

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

回答1件

ベストアンサー

canvasがまだ理解しきれてないので、divに直して書いてみました。

HTML
1<!DOCTYPE html>
2<!-- 実現したい機能は
3１）飛行機がマウスを追従
4→実現済み
5２）飛行機の頭がマウスの方向を向く
6→例えばマウスを右回りにしたら飛行機も右回り、マウスを左回りにしたら飛行機も左回りになるようにしたい。
7
8canvasにこだわりませんので、上記２）が簡単に実現できるサンプルプログラムを頂けませんでしょうか。
9
10宜しくお願いします。 -->
11<html>
12    <style type="text/css">
13        html, body {
14            width: 100%;
15            height: 100%;
16        }
17
18        *{
19            margin: 0;
20            padding: 0;
21        }
22        .container {
23            position: absolute;
24            width: 100%;
25            height: 100%;
26            background: #eee;
27        }
28        img {
29            position: absolute;
30            top:0px;
31            left: 0px;
32            width: 50px;
33            height: 50px;
34        }
35    </style>
36    <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
37<body>
38
39    <div class="container"></div>
40    <img src="img/ap.png" alt="">
41    <script type="text/javascript">
42        var theta = 10;
43
44        window.requestAnimFrame = (function(){
45            return  window.requestAnimationFrame   ||
46            window.webkitRequestAnimationFrame ||
47            window.mozRequestAnimationFrame    ||
48            window.oRequestAnimationFrame      ||
49            window.msRequestAnimationFrame     ||
50            function(callback){
51                window.setTimeout(callback, 1000 / 60);
52            };
53        })();
54
55        window.onload = function() {
56
57            var $img = $("img");
58            var $canvas = $(".container")
59            var clickPoint = {
60                x: 0,
61                y: 0
62            };
63
64            var Particle = function(scale, color, speed) {
65                this.scale = scale; //大きさ
66                this.color = color; //色
67                this.speed = speed; //速度
68                this.rotation = 0
69                this.position = {   // 位置
70                    x: 0,
71                    y: 0
72                };
73            };
74
75            Particle.prototype.draw = function() {
76                $img.css({
77                    "top": (this.position.y-25)+"px",
78                    "left":(this.position.x-25)+"px"
79                });
80                console.log($img.css("transform"))
81                $img.css({
82                    "transform":"rotate("+this.rotation+"deg)"
83                })
84            };
85
86            Particle.prototype.update = function() {
87                deltaX = clickPoint.x - this.position.x;
88                deltaY = clickPoint.y - this.position.y;
89                this.position.x += deltaX / this.speed;
90                this.position.y += deltaY / this.speed;
91
92                // radian -> deg
93                this.rotation = (Math.atan2(deltaY, deltaX))*180 / Math.PI+90;
94                this.draw();
95            };
96
97            var particle = new Particle(0, '#D0A000', 5);
98
99            var loop = function() {
100                requestAnimFrame(loop);
101                particle.update();
102            };
103            loop();
104            $canvas.on('mousemove', function(e) {
105                console.log("get")
106                var mouseX = e.clientX;
107                var mouseY = e.clientY;
108
109                clickPoint.x = mouseX;
110                clickPoint.y = mouseY;
111
112            });
113        };
114    </script>
115
116</body>
117</html>
118