Make object move on screen

Question

Make object move on screen

Navigation

#1 by (0 votes)
#2 by (-1 votes)

-1

I decided to create a little game to destroy blocks with a ball.

I just managed to make the platform move to the right and left using the keyboard, but I can not get the ball to walk.

  //código de teclas: 37=Esquerda - 38=Cima - 39=Direita - 40=Baixo


  //variavel charX = posição da plataforma na tela
  //bolaX e bolaY posição da bola na tela
  var charX = 0;
  var bolaX = 0;
  var bolaY = 0;

  //função move = relativo ao movimento da plataforma
  function move(){
      //variavel obj, que recebe char
      let obj=document.getElementById("char");
      //variavel tecla, 
      var tecla=event.keyCode;

      //se a tecla precionada for a seta pra esquerda
      if(tecla==37){
          //o charX recebe -10
          charX-=15;
          //charX, com o novo valor, muda a posição do objeto
          obj.style.left=charX+"px";
      }
      //o mesmo do de cima
      else if(tecla==39){
          charX+=15;
          obj.style.left=charX+"px";
      }

  }
  //function bola = relativo ao movimento da bola
  function bola(){

      //var lado=numero aleatorio de 1 a 8, que definirão para onde a bola andará
      var lado=Math.floor(Math.random()*8); //1-norte 2-nordeste 3-leste 4-sudeste 5-sul 6-sudoeste 7-oeste 8-noroeste
      let obj=document.getElementById("bola");

      //switch lado pra movimentar a bola.
      switch(lado){
          case 1:
              bolaY-=10;
              bolaX+=0;
              obj.style.top=bolaY+"px";
              obj.style.left=bolaX+"px";
              break;
          case 2:
              bolaY-=5;
              bolaX+=5;
              obj.style.top=bolaY+"px";
              obj.style.left=bolaX+"px";
              break;
          case 3:
              bolaY+=0;
              bolaX+=10;
              obj.style.top=bolaY+"px";
              obj.style.left=bolaX+"px";
              break;
          case 4:
              bolaY+=5;
              bolaX-=5;
              obj.style.top=bolaY+"px";
              obj.style.left=bolaX+"px";
              break;
          case 5:
              bolaY+=10;
              bolaX+=0;
              obj.style.top=bolaY+"px";
              obj.style.left=bolaX+"px";
              break;
          case 6:
              bolaY+=5;
              bolaX-=5;
              obj.style.top=bolaY+"px";
              obj.style.left=bolaX+"px";
              break;
          case 7:
              bolaY+=0;
              bolaX-=10;
              obj.style.top=bolaY+"px";
              obj.style.left=bolaX+"px";
              break;
          case 8:
              bolaY+=5;
              bolaX-=5;
              obj.style.top=bolaY+"px";
              obj.style.left=bolaX+"px";
              break;

                }
          }


  document.addEventListener("keydown",move);
  window.addEventListener("load",bola);

#bola{
    left: 200px;
    top: 15px;
    position: absolute;
    width: 15px;
    height: 15px;
    background-color: red;
    margin: auto;
    border-radius: 100%;
    border: 1px solid black;

}

<div id="quadro">
    <div id="char"></div>
    <div id="bola"></div>
</div>

I have already tried to use a while within switch that would make the command repeat itself until the ball's position reaches a limit, but it did not work.

javascript

asked by anonymous 30.09.2018 / 03:38

2 answers

Go through multiple directories on Linux terminal Recursive function in c

score 0 · Answer 1

0

A tip. Use the requestAnimationFrame to do the animation, rather than the loop. The requestAnimationFrame already controls automatic FPS for you.

30.09.2018 / 15:54

score -1 · Answer 2

According to the code you have made available, the ball will not move all the time because the load event will occur only once, which is when the window is fully loaded, unlike keydown event, which can occur several times during application execution; and thus, the choice of lado , and its respective action, will only be performed once. So in order to make the ball move "constantly", I think you should put the entire action block of the bola function inside an infinite loop, or a loop that waits until a certain condition is false, the "constant" update of lado and ball position.

function bola() {
    while (true) {
         //bloco de acao de escolha do lado, definicao do obj e da acao do switch
    }
}

I hope I have helped!