Question

  //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>

我正在做某门在线课程的作业。在本次作业中，我们将对一个动画进行动画，该动画在其窗口中弹跳，并在使用Raphael.js移动时留下轨迹。

部分“要求”中说：

检查绘制例程中的4种条件，并在磁盘碰到墙壁时反转磁盘的方向（更改适当的速率变量）。

在简短的简历中，只要球到达边界（顶部或底部），方向就会改变。

对于“触底”，我对此进行了设计：

当它碰到墙壁或到达div的边界时，反转“磁盘”的方向

0 个答案: