Trajectory of an object using canvas in javascript

Question

The question is this, I was able to develop the exercise to a certain extent, after that, as I do not know much of javascript, if I send the square back diagonally, the square comes back earlier due to the coordinates that have already been used, it is complex to explain, but is giving conflict in the coordinates because they have been used previously in the path.

The point is, how do I get the square to go back diagonally as the image shows? (The square leaves from the left, making the route) 90% of the exercise is done, that’s all I need.

Thank you

var canvas = document.getElementById('minha-tela'); 
var ctx = canvas.getContext('2d');
//definir o ínicio do desenho
var x = 0
var y = 150;
var l = 0;
//a função gameloop é chamada aqui
requestAnimationFrame(gameloop);
function gameloop() {

  if(x<=700 && y==150)  
  x = x + 10;

  if (x>=700 && y>=0)
  y=y-10;

  if (x>=350 && y<=0) 
  x=x-10;	



  desenharQuadrado(x,y);



   //incrementar a variável x indicando o deslocamento para a direita
  //chama novamente o ciclo da animação

  requestAnimationFrame(gameloop);

}
function desenharQuadrado(pX,pY) {
  ctx.clearRect(0, 0, 800, 400); //antes de fazer o desenho é preciso limpar o canvas
  ctx.fillStyle = '#00F';
  ctx.fillRect(pX, pY, 100, 100);
}

<canvas id="minha-tela" width="800" height="400" style="border: #F00 solid 1px;"> </canvas>  

---

Answer 1

This is the code that controls the path of the square:

  if(x<=700 && y==150)  
  x = x + 10;

  if (x>=700 && y>=0)
  y=y-10;

  if (x>=350 && y<=0) 
  x=x-10;

This code is using an approach of determining the next position from the current position. However, this won’t work without some change in approach because there are two lines that cross, which means that there would be two possible trajectories and you wouldn’t know which one to follow.

But fixing this is easy. If you store in a variable which line segment is being covered (1, 2, 3 or 4), you will be able to easily know the path to be followed.

The trajectory of the fourth segment is given by decreasing the x and increase the y simultaneously.

That is, within its function gameloop you can do something like that:

  if (linha === 1) {
    x += 10;
    if (x > 700) linha = 2;
  } else if (linha === 2) {
    y -= 10;
    if (y < 0) linha = 3;
  } else if (linha === 3) {
    x -= 10;
    if (x < 350) linha = 4;
  } else if (linha == 4) {
    x -= 10;
    y += 10;
    if (x < 0) linha = 5;
  }

It is possible to write this with a switch also. But I don’t like to use or teach the switch because it has a strong tendency to be very misused.

You start linha with 1. When it comes to 5, it will stop. Here is the result:

var canvas = document.getElementById('minha-tela'); 
var ctx = canvas.getContext('2d');

// Início do desenho.
var x = 0
var y = 150;
var linha = 1;

requestAnimationFrame(gameloop);

function gameloop() {
  if (linha === 1) {
    x += 10;
    if (x > 700) linha = 2;
  } else if (linha === 2) {
    y -= 10;
    if (y < 0) linha = 3;
  } else if (linha === 3) {
    x -= 10;
    if (x < 350) linha = 4;
  } else if (linha == 4) {
    x -= 10;
    y += 10;
    if (x < 0) linha = 5;
  }

  desenharQuadrado(x,y);
  requestAnimationFrame(gameloop);
}

function desenharQuadrado(pX,pY) {
  ctx.clearRect(0, 0, 800, 400); // Limpar o canvas.
  ctx.fillStyle = '#00F';
  ctx.fillRect(pX, pY, 100, 100);
}

<canvas id="minha-tela" width="800" height="400" style="border: #F00 solid 1px;" />