A dúvida é a seguinte, eu consegui desenvolver o exercício até certo ponto, após isso, como não conheço muito de javascript, caso eu mande o quadrado voltar na diagonal, o quadrado volta antes devido as coordenadas que já foram utilizadas, é meio complexo de explicar, mas está dando conflito nas coordenadas porque já foram utilizadas anteriormente no trajeto.
A questão é, como faço para o quadrado voltar na diagonal conforme a imagem demonstra? (O quadrado parte da esquerda, fazendo o percurso) 90% do exercício está feito, só preciso disso.
Obrigado
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>