www.webdeveloper.com
Results 1 to 3 of 3

Thread: GEnerate Box as i have done below and i want that in reverse order also going forward

  1. #1
    Join Date
    Dec 2011
    Posts
    6

    Smile GEnerate Box as i have done below and i want that in reverse order also going forward

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>New Document</title>
    <meta name="Generator" content="EditPlus">
    <style>
    #box {
    border: 1px solid green;
    width: 48px;
    height: 48px;
    position: relative;
    background-color: gray;
    }

    #container {
    width: 500px;
    height: 500px;
    border: 1px solid black;
    }

    #main {
    position: absolute;
    left: 200px;
    }
    </style>
    <script type="text/javascript">
    var direction = 'right';
    var isRightExtreme = false;
    var isLeftExtreme = false;
    var counter = 0;
    function doSomething(event) {
    var box = document.getElementById('box');
    var x = box.xPos || 0;
    var y = box.yPos || 0;
    switch (direction) {
    case 'left':
    x--;
    break;
    case 'top':
    y--;
    break;
    case 'right':
    x++;
    break;
    case 'bottom':
    y++;
    break;
    }

    if (x >= 0 && x < 10) {
    box.style.left = x * 50 + 'px';
    box.xPos = x;
    }
    if (y >= 0 && y < 10) {
    box.style.top = y * 50 + 'px';
    box.yPos = y;
    }
    if (box.xPos == 9 && y == box.yPos) {
    direction = 'bottom';
    } else if (box.xPos == 0 && y == box.yPos) {
    direction = 'bottom';
    }
    if (box.xPos == 9 && box.yPos % 2 != 0) {
    direction = 'left';
    } else if (box.xPos == 0 && box.yPos % 2 == 0) {
    direction = 'right';
    }


    moveBox(event);
    }


    function moveBox(event) {
    setTimeout("doSomething('event')", 100);
    }
    </script>
    </head>
    <body onload="doSomething(event)">
    <div id="main">
    <div id="container">
    <div id="box"></div>
    </div>
    </div>
    <div id="displayId"></div>
    </body>
    </html>

  2. #2
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,264
    You have to define a new variable or a boolean (for example var forwards=true; at the beginning) for the direction of progress and complete the tests.
    Code:
    // for the first movement at the left or right limits (*) : 
        if (forwards) direction='bottom'; else direction='top';
    // for the second movement  at the left or right limits (*): 
        if (forwards) direction='left'; else direction='right';
       // And conversely
            if (forwards) direction='right'; else direction='right';
    // Do not forget to change forwards at the end 
    if ( (box.xPos==0 && box.yPos==9) forwards=!forwards;
    To begin again at the beginning it is a little more subtle because it should invert the movement only when the box come from the left (and not at first)... I leave you the care of resolving this thing. You will then have found the universal movement...

    NB : Your variables isRightExtreme (box.xPos == 0) and isLeftExtreme (box.xPos==9) are useless

    EDIT : (*) The conditions could be a little different because we arrive at the extremities of lines with different parities for box.yPos (box.yPos &#37; 2 == 0 or !=0)
    Last edited by 007Julien; 01-02-2012 at 07:51 AM. Reason: complements

  3. #3
    Join Date
    Dec 2011
    Posts
    6

    Smile hey hai 007julien

    Hey first of all happy new year
    i request u to plz writyew the code and resend the code as u have some modifications to it.....
    i appreciate to ur response and thanku to u becoz u have done my need full fill thanking you and plz post the code

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles