Trajectory of an object using canvas in javascript

Question

Trajectory of an object using canvas in javascript

Navigation

#1 by (2 votes)

4

The question is, I managed 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 before due to the coordinates that have already been used, it is complex way of explaining, but it is conflicting in the coordinates because they have already been used previously in the path.

The question is, how do I get the square back diagonal as the image demonstrates? (The square on the left, doing the course) 90% of the exercise is done, I just need it.

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>

javascript canvas

asked by anonymous 21.08.2018 / 02:02

1 answer

Rotate adb in several docker containers PostgreSQL - Partial Foreign Key of Composite Primary Key

score 2 · Accepted Answer

This is the code that controls the square trajectory:

  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 to determine the next position from the current position. However, this will not work without some change in approach because there are two intersecting lines, which means there would be two possible paths and you would not know which one to follow.

But fixing this is easy. If you store in a variable which is the straight segment that is being traversed (1, 2, 3 or 4), you will be able to easily know the trajectory to follow.

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

That is, within your function gameloop you can do something like this:

  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;
  }

You can write this with a switch as well. But I do not like to use or even teach switch because it has a strong tendency to be very poorly used.

You start linha with 1. When you reach 5, it will stop. Here's 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;" />