Измените направление «диска», когда он попадает в стены или достигает границ div - PullRequest
Новая
       36

Измените направление «диска», когда он попадает в стены или достигает границ div

0 голосов
/ 22 апреля 2019 

  //WHEN IS GOING TO THE TOP
      if((counter>20) && (disk.xpos != 130 && disk.ypos != 20)){
      if ((disk.xpos > 530 && disk.ypos > 430) || counter2 > 1){
      if (counter3<1) {
      counter2++;
         
       //Update disk.xpos & disk.ypos when called draw function  
      disk.xpos=disk.xpos+(xrate*-1);
      disk.ypos=disk.ypos+(yrate*-1);
      nd.attr({

      "cx": disk.xpos,
      "cy": disk.ypos

       });

       //MY DISK   
      disk.animate({

      "cx": disk.xpos,
      "cy": disk.ypos

       },100,"bounce");
       
      diskText.animate({

      "x": disk.xpos,
      "y": disk.ypos


       },100,"bounce");

       }}}

      else{  
     
      //WHEN IS GOING TO THE BUTTOM
      
      disk.xpos=disk.xpos+xrate;
      disk.ypos=disk.ypos+yrate;
      nd.attr({

      "cx": disk.xpos,
      "cy": disk.ypos

       });

      disk.attr({

      "cx": disk.xpos,
      "cy": disk.ypos

       });

      diskText.attr({

      "x": disk.xpos,
      "y": disk.ypos

       
       });
    


       };

       disk.animate({
       "fill": "pink",
       "stroke": "white"

        },100,"linear")

       console.log("xpos is:"+disk.xpos);
       console.log("ypos is:"+disk.ypos);
       
       }
<!DOCTYPE html>

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/appstyle.css">
        <!--  Include the raphael library from the jslibs directory  -->
        <script type="text/javascript" src="jslibs/raphael.js"></script>
        <!--  Use the require.js module loader, and tell it where our main JavaScript file is  -->
        <script type="text/javascript" data-main="appscripts/main.js" src="jslibs/require.js"> </script>
        <title>flexbox layout</title>
    </head>

  <body>
    <header>Nice Layout </header>
    <div id='main'>

        <div id="centerDiv"> </div>  <!--  <article>   article  </article> -->

        <nav> Info </nav>

        <aside>Workspace</aside>

    </div>
    <footer>Credits:
        <p> I did this! </p>
    </footer>
  </body>
</html>

enter image description here Я работаю над некоторым заданием онлайн-курса, который я прохожу. В этом задании мы будем анимировать шар, который подпрыгивает в его окне, оставляя след, когда он движется, используя Raphael.js.

Часть «требований» гласит:

Проверьте каждое из 4 условий в вашей процедуре рисования и измените направление (измените соответствующую переменную скорости) дисков, когда они ударяются о стены.

В кратком резюме, как только мяч достигнет границы (сверху или снизу), направление изменится.

Для «достижения дна» я разработал это:

...