在Javascript上通过旋转将图像跟随到鼠标

如何使圣诞老人跟随鼠标旋转和自己的速度，而不是鼠标速度

鼠标现在在哪里-它的目的地，圣诞老人以自己的速度去哪里

圣诞老人高速旋转

我该怎么做

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()

---

轮换并不是一件小事

  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()
    }

  }

修改后的版本带有一些魔力：

对于距离，使用毕达哥拉斯定理

玩家向前移动（通过当前轮换）

职业玩家{
构造器（ctx、x、y）{
这个。x=x
这个。y=y
this.dest={
x:0,，
y:0
}
这个宽度=200
这个高度=200
这个速度=12
这个角速度=7
此值为0
this.ctx=ctx
this.image=新映像（）
this.image.src=“//habrastorage.org/files/447/9b4/6d3/4479b46d397e439a9613ce122a66a506.png”
}
画（）{
this.ctx.translate（this.x，this.y）
this.ctx.rotate（this.rotation+4.7）
this.ctx.drawImage(
这个,这个形象,，
-this.width/2，-this.height/2，
这个。宽度，这个。高度
)
此.ctx.旋转（-此旋转-4.7）
this.ctx.translate（-this.x，-this.y）
}
距离（目标）{
让数据={
x:target.x-this.x，
y：目标。y-这个。y
}
data.len=Math.sqrt（data.x*data.x+data.y*data.y）
返回数据
}
旋转（dt）{
让路径=this.distance（this.dest）
让target=Math.atan2（path.y，path.x）
设delta=this.rotation-target
如果（增量>0.1 | |增量<-0.1）{
var _delta=delta
如果（_δ<0）{
_delta+=Math.PI*2
}
if（delta<-Math.PI | |（delta>0&&delta此速度）{
vel=这个速度
}
这个。旋转（）
this.x+=vel*Math.cos（this.rotation）
this.y+=vel*Math.sin（this.rotation）
这个.draw（）
}
}