使用勾股定理的js畫布物件移動影片

我試圖讓一個物件移動到點擊位置，就像在暗黑破壞神或現代 moba 游戲這樣的 rpg 中，我需要找到一種影片方式來點擊坐標，我找到了一種使用勾股定理的方法，我理解并定制了代碼在一定程度上，但是有一個錯誤，球在影片的最后一直彈跳。我知道這是因為“移動”變數和回圈而發生的，但不明白為什么。

這是繪制物件的函式

function drawPlayer() {
    //
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    ctx.arc(player.x, player.y, 12, 0, Math.PI*2);
    ctx.fillStyle = 'white';
    ctx.fill();
    ctx.closePath();
    
    //Calculate variables
    let dx = player.newx - player.x;
    let dy = player.newy - player.y;
    let distance = Math.sqrt(dx*dx   dy*dy);
    let moves = distance/player.speed;
    let xunits = (player.newx - player.x)/moves;
    let yunits = (player.newy - player.y)/moves;

    if (moves > 0 ) {
        moves--;
        player.x  = xunits;
        player.y  = yunits;
        console.log(moves);
    }
}

const canvas = document.getElementById('canvas1');
const ctx = canvas.getContext('2d');
canvas.addEventListener('click', e => {
  setClickCoords(e);
  drawPlayer();

})
canvas.width = 300;
canvas.height = 300;

const player = {
  x: 0,
  y: 0,
  newx: 0,
  newy: 0,
  speed: 1,
  radius: 15,
}

function drawPlayer() {
  //Draw 
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.arc(player.x, player.y, 12, 0, Math.PI * 2);
  ctx.fillStyle = 'white';
  ctx.fill();
  ctx.closePath();

  //Calculate variables
  let dx = player.newx - player.x;
  let dy = player.newy - player.y;
  let distance = Math.sqrt(dx * dx   dy * dy);
  let moves = distance / player.speed;
  let xunits = (player.newx - player.x) / moves;
  let yunits = (player.newy - player.y) / moves;

  console.log(moves);

  if (moves > 0) {
    moves--;
    player.x  = xunits;
    player.y  = yunits;
    console.log(moves);
  }
}

function setClickCoords(e) {

  player.newx = e.offsetX;
  player.newy = e.offsetY;
  document.getElementById('oldcoords').innerHTML = "old Coords "   player.x   " "   player.y;
  document.getElementById('newcoords').innerHTML = "new Coords "   player.newx   " "   player.newy;
}


function gameLoop() {
  window.setTimeout(gameLoop, 24);
  drawPlayer()
}

gameLoop();

body {
  background: black;
  display: flex;
  flex-direction: column;
}

#canvas1 {
  border: 3px solid white;
  top: 50%;
  left: 50%;
  position: absolute;
  width: 300px;
  height: 300px;
  transform: translate(-50%, -50%);
}

#oldcoords,
#newcoords {
  color: white;
  font-size: 18px;
}

<span id="oldcoords"></span>
<span id="newcoords"></span>

<canvas id="canvas1"> </canvas>

uj5u.com熱心網友回復：

檢查是否moves介于 0 和 1 之間。如果介于兩者之間，請將球移動到所需位置。目前，球的方向太遠，必須在下一個影片中回傳。

const canvas = document.getElementById('canvas1');
const ctx = canvas.getContext('2d');
canvas.addEventListener('click', e => {
  setClickCoords(e);
  drawPlayer();

})
canvas.width = 300;
canvas.height = 300;

const player = {
  x: 0,
  y: 0,
  newx: 0,
  newy: 0,
  speed: 1,
  radius: 15,
}

function drawPlayer() {
  //Draw 
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.arc(player.x, player.y, 12, 0, Math.PI * 2);
  ctx.fillStyle = 'white';
  ctx.fill();
  ctx.closePath();

  //Calculate variables
  let dx = player.newx - player.x;
  let dy = player.newy - player.y;
  let distance = Math.sqrt(dx * dx   dy * dy);
  let moves = distance / player.speed;

  console.log(moves);

  if (moves > 1) {
    let xunits = (player.newx - player.x) / moves;
    let yunits = (player.newy - player.y) / moves;
    moves--;
    player.x  = xunits;
    player.y  = yunits;
    console.log(moves);
  } else if (moves > 0) {
    moves = 0;
    player.x = player.newx;
    player.y = player.newy;
    console.log(moves);
  }
}

function setClickCoords(e) {

  player.newx = e.offsetX;
  player.newy = e.offsetY;
  document.getElementById('oldcoords').innerHTML = "old Coords "   player.x   " "   player.y;
  document.getElementById('newcoords').innerHTML = "new Coords "   player.newx   " "   player.newy;
}


function gameLoop() {
  window.setTimeout(gameLoop, 24);
  drawPlayer()
}

gameLoop();

body {
  background: black;
  display: flex;
  flex-direction: column;
}

#canvas1 {
  border: 3px solid white;
  top: 50%;
  left: 50%;
  position: absolute;
  width: 300px;
  height: 300px;
  transform: translate(-50%, -50%);
}

#oldcoords,
#newcoords {
  color: white;
  font-size: 18px;
}

<span id="oldcoords"></span>
<span id="newcoords"></span>

<canvas id="canvas1"> </canvas>

標籤：javascript 动画片 帆布

上一篇：WaitForSeconds不隨Time.TimeScale縮放

下一篇：如何在JavaScript或CSS中制作文本影片效果、HelloWorld到HW？