Как правильно переместить объект холста с более чем 2 значениями

Question

Я пытаюсь создать холст HTML 5, чтобы переместить объект и остановиться, когда он достигнет конца.Для этого у меня есть 10 значений для X и 10 для Y. Во-первых, мне нужно поместить все значения в качестве координат X и Y. При нажатии на кнопку, анимация должна запускаться и останавливаться, когда достигает конца.

Примечание: я должен решить это с 10 значениями для каждого X и Y. Также движение рыбы должно быть остановлено, когда оно достигнет последнего значения X и Y. Это требование, которому я должен следовать.

Мой кодработает только для первых двух значений X и Y.Я не знаю, как сделать все остальное.Я попытался создать функцию for loop inside GetStarted(), но она не сработала.

function GetStarted(){

  for(var i=0; i<10; i++){
  // get the canvas's 2d context
  var canvas = document.getElementById("canvas");
  var context = canvas.getContext("2d");

  // clear the canvas
  context.clearRect(0, 0, canvas.width, canvas.height);

  // get the position
  var abc = Number(document.getElementById("x").value);
  var xyz = Number(document.getElementById("y").value); 

  // creating an image from scratch
  var image = new Image();
  image.src = "https://www.uow.edu.au/~dong/w3/assignment/a8/fish.png";

  // when the image are loaded,   
  // draw the image at the specified position
  image.onload = function() {
    context.drawImage(image, abc, xyz); 
  };
}
}

#x,#y {
width : 60px;
}

<table>
<tr>
<td> X </td> 
<td> <input id="x" /> </td>
<td> <input id="x" /> </td>
<td> <input id="x" /> </td>
<td> <input id="x" /> </td>
<td> <input id="x" /> </td>
<td> <input id="x" /> </td>
<td> <input id="x" /> </td>
<td> <input id="x" /> </td>
<td> <input id="x" /> </td>
<td> <input id="x" /> </td>
</tr>

<tr>
<td> Y </td>
<td> <input id="y" /> </td>
<td> <input id="y" /> </td>
<td> <input id="y" /> </td>
<td> <input id="y" /> </td>
<td> <input id="y" /> </td>
<td> <input id="y" /> </td>
<td> <input id="y" /> </td>
<td> <input id="y" /> </td>
<td> <input id="y" /> </td>
<td> <input id="y" /> </td> 
</tr>
</table>
<button onClick="GetStarted()">
Swim little fish</button>
<br /><br />
<canvas id="canvas" width="1200" height="300"
style="border:1px solid black;">
Your browser does not support canvas.
<img src="https://www.uow.edu.au/~dong/w3/assignment/a8/fish.png" id="fishes">

</canvas>
</body>
</html>

Answer 1

Вот отправная точка для перемещения вашей рыбы:

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var x = y = 0

// creating an image from scratch
var image = new Image();
image.onload = function() {
  context.drawImage(image, x, y);
};
image.src = "https://www.uow.edu.au/~dong/w3/assignment/a8/fish.png";

function GetStarted() {
  setInterval(Move, 20)
}

function Move() {
  x = (x + 9) % canvas.width;
  y = (y + 1) % canvas.height; 
  
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.drawImage(image, x, y);
}

<button onClick="GetStarted()">Swim little fish</button> <br /><br />

<canvas id="canvas" width="600" height="170" style="border:1px solid black;"></canvas>

Как видите, я значительно изменил ваш код!

Теперь рыба движется, но нет места для входа в X & Y, как у вас, что вы не собирались делать очень плавное движение, вместо этого это будет больше похоже на прыжки вокруг, также вы не можетеприсвойте html-элементам тот же идентификатор и ожидайте, что вы можете получить тот, который вам нужен, с помощью document.getElementById("y"), который просто не будет работать