//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 hereI am working on some assignment of an online course I am taking. In this assignment, we will be animating a ball that bounces around in it’s window, leaving a trail behind as it moves using Raphael.js.

Part of the "requirements" says:

Check each of the 4 conditions in your draw routine, and reverse the direction (change the appropriate rate variable) of disks when they hit walls.

In a brief resume, as soon as the ball reaches the border (top or bottom), the direction will change.

For the "reaching bottom" I designed this:

0 Answers