JavaScriptを回転させて画像にマウスを移動

Question

サンタはどのようにマウスの回転ではなく、独自の速度でマウスに従いますか？

ここでマウスは - それは目的地です、どこで自分のスピードでサンタを行く。

サンタはスピードで回転します。

どうすればいいですか？

Demo code

game.js

var canvas, ctx, player 

function init() { 
    canvas = document.getElementById("canvas") 
    ctx = canvas.getContext("2d") 
    resizeCanvas() 

    player = new Player( 
    ctx, 
    canvas.width/2, 
    canvas.height/2 + 100 
) 

    window.onresize = resizeCanvas 
    canvas.onmousemove = mousemove 
} 

function mousemove(e) { 
    player.x = e.clientX * devicePixelRatio 
    player.y = e.clientY * devicePixelRatio 
} 

function render() { 
    ctx.clearRect(0, 0, canvas.width, canvas.height) 
    player.draw() 
} 

function step() { 
    render() 
    requestAnimationFrame(step) 
} 

init() 
step() 

Answer 1

これは、回転に簡単な作業ではありません。いくつかの魔法を持つバージョン変更

：distanceについてdemo

は、ピタゴラスの定理を使用。

プレーヤーは、（現在の回転によって）前方に移動します。

class Player { 
    constructor(ctx, x, y) { 
     this.x = x 
     this.y = y 

     this.dest = { 
     x: 0, 
     y: 0 
     } 

     this.width = 200 
     this.height = 200 
     this.velocity = 12 
     this.angularVelocity = 7 
     this.rotation = 0 

     this.ctx = ctx 

     this.image = new Image() 
     this.image.src = "//habrastorage.org/files/447/9b4/6d3/4479b46d397e439a9613ce122a66a506.png" 
    } 

    draw() { 
     this.ctx.translate(this.x, this.y) 
     this.ctx.rotate(this.rotation + 4.7) 
     this.ctx.drawImage(
     this.image, 
     -this.width/2, -this.height/2, 
     this.width, this.height 
    ) 
     this.ctx.rotate(-this.rotation - 4.7) 
     this.ctx.translate(-this.x, -this.y) 
    } 

    distance(target) { 
     let data = { 
     x: target.x - this.x, 
     y: target.y - this.y 
     } 
     data.len = Math.sqrt(data.x * data.x + data.y * data.y) 
     return data 
    } 

    rotate(dt) { 
     let path = this.distance(this.dest) 
     let target = Math.atan2(path.y, path.x) 

     let delta = this.rotation - target 
     if (delta > 0.1 || delta < -0.1) { 

     var _delta = delta 
     if (_delta < 0) { 
      _delta += Math.PI * 2 
     } 

     if (delta < -Math.PI || (delta > 0 && delta < Math.PI)) { 
      this.rotation -= _delta/this.angularVelocity 
     } else { 
      this.rotation -= (_delta - Math.PI * 2)/this.angularVelocity 
     } 

     // Reduce character rotation into the -PI thru PI range 
     this.rotation = (this.rotation + 3 * Math.PI) % (2 * Math.PI) - Math.PI 
     } 
    } 

    step() { 
     let distance = this.distance(this.dest).len 
     if (distance < this.width/1.5) { 
     this.draw() 
     return 
     } 

     let vel = distance/15 

     if (vel > this.velocity) { 
     vel = this.velocity 
     } 

     this.rotate() 

     this.x += vel * Math.cos(this.rotation) 
     this.y += vel * Math.sin(this.rotation) 

     this.draw() 
    } 

    }