Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder ellisd5's Avatar
    Join Date
    Jun 2002
    Location
    Uk
    Posts
    160
    Thanks
    5
    Thanked 0 Times in 0 Posts

    HElp with my Square

    Code below is meant to make a square move across the screen, It works in Netscape 4.* fine but in IE 5.5 the square speeds up really fast when don't want it to and see no reason for it speeding up, can someone help me????

    <HTML>
    <HEAD>

    <TITLE>Dale's Game</TITLE>

    <script language="javascript">
    <!--

    /*
    ** BROWSWER CHECK
    */

    if (document.layers) {
    var isNS = true;
    var docString = "document.";
    var styleString ="";
    }
    else if (document.all) {
    var isIE = true;
    var docString = "document.all.";
    var styleString =".style";
    }

    /*
    ** VARIABLES
    */

    var minPos = 20;
    var maxPos = 400;
    var location = minPos+2;
    var isMoving = false;
    var movingLeft = false;
    var movingRight = false;
    var nKey = 0;
    var speed = 5; // smaller is faster

    /*
    ** write style
    */

    document.writeln('<style>');
    document.writeln('#theSqr {position:absolute; left:' + location + '; top: 20; color:#23015D; width:20; height:20; clip:rect(0,20,20,0); background-color:#23015D; layer-background-color:#23015D;}');
    document.writeln('</style>');

    /*
    ** FUNCTION RETURNASDIV
    */

    function returnAsDiv (theDivToConvert) {
    var returnedObject = eval(docString + theDivToConvert + styleString);
    return returnedObject;
    }

    document.onkeydown = keyDown
    document.onkeyup = keyUp
    if (isNS) document.captureEvents(Event.KEYDOWN | Event.KEYUP)

    /*
    ** FUNCTION KEYDOWN
    */

    function keyDown(e) {
    if (isNS) {var nKey = e.which}
    if (isIE) {var nKey = window.event.keyCode;}

    //alert(nKey);

    if (isIE && nKey == 90) {
    movingLeft = true;
    isMoving = true;
    } else if (isIE && nKey == 88) {
    movingRight = true;
    isMoving = true;
    } else if (isNS && nKey == 122) {
    movingLeft = true;
    isMoving = true;
    } else if (isNS && nKey == 120) {
    movingRight = true;
    isMoving = true;
    }

    move();
    }

    /*
    ** FUNCTION KEYUP
    */

    function keyUp() {
    isMoving = false;
    movingRight = false;
    movingLeft = false;
    }

    function move() {
    if ((movingLeft && location <= minPos) || (movingRight && location >= maxPos)) {
    isMoving = false;
    }

    if (isMoving) {
    theDiv = returnAsDiv('theSqr');

    if(movingRight) ammount=2;
    if(movingLeft) ammount=-2;

    location = location + ammount;
    theDiv.left = location;
    setTimeout('move()', speed);
    }
    }

    //-->
    </script>

    </HEAD>
    <BODY>

    <div ID="theSqr"></div>

    </BODY>
    </HTML>

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Your speed value is set to 5 milliseconds which is very, very fast. The difference in speed you're seeing may be a difference in the way the video driver and browser are interacting. The description sounds like the Mozilla based browser is using a method which is implemented in your video driver that runs rather slowly which the IE implementation runs very quickly.
    (I say that because I've heard a case where IE was slow and the Mozilla implementation was quick).

    Try a larger speed value to see if the browser don't come closer in actual speed.

  • #3
    New to the CF scene
    Join Date
    Jun 2002
    Location
    PA, USA
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You may want to try multiplying the speed for ie by some other rate. I THINK perhaps ie may use another scale for speed than NS.



  • #4
    Regular Coder ellisd5's Avatar
    Join Date
    Jun 2002
    Location
    Uk
    Posts
    160
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Nope

    Thanks for the sugestion but it doesn't fix it.

    It seems with IE that possibly that IE calls the function KeyDown many times whilst the key is down where as Netscape calls it once like i would expect.

    Not 100% sure that is the case. Anyone come across anything like that.

  • #5
    Regular Coder ellisd5's Avatar
    Join Date
    Jun 2002
    Location
    Uk
    Posts
    160
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Yep

    I was correct, and have added a piece of code to fix it, now i got another problem. The extra code i have added means that once the square has stoped i press a button and the square wont move, i press a second time and it moves, can anyone see why

    bit i have added is the moving variable bit

    <HTML>
    <HEAD>

    <TITLE>Dale's Game</TITLE>

    <script language="javascript">
    <!--

    /*
    ** BROWSWER CHECK
    */

    if (document.layers) {
    var isNS = true;
    var docString = "document.";
    var styleString ="";
    }
    else if (document.all) {
    var isIE = true;
    var docString = "document.all.";
    var styleString =".style";
    }

    /*
    ** VARIABLES
    */

    var minPos = 20;
    var maxPos = 400;
    var locationX = minPos;
    var locationY = minPos;
    var isMoving = false;
    var movingLeft = false;
    var movingRight = false;
    var movingUp = false;
    var movingDown = false;
    var moving = false;
    var nKey = 0;
    var speed = 5; // smaller is faster

    /*
    ** WRITE STYLE
    */

    document.writeln('<style>');
    document.writeln('#theSqr {position:absolute; left:' + locationX + '; top:' + locationY + '; color:#23015D; width:20; height:20; clip:rect(0,20,20,0); background-color:#23015D; layer-background-color:#23015D; z-index: 3}');
    document.writeln('#theBorder {position:absolute; left:' + eval(minPos-1) + '; top:' + eval(minPos-1) + '; width:'+ eval(maxPos+2) +'; height:'+ eval(maxPos+2) +'; clip:rect(0,'+ eval(maxPos+2) +','+ eval(maxPos+2) +',0); background-color:#000000; layer-background-color:#000000; z-Index: 1;}');
    document.writeln('#area {position:absolute; left:' + minPos + '; top:' + minPos + '; width:'+ maxPos +'; height:'+ maxPos +'; clip:rect(0,'+ maxPos +','+ maxPos +',0); background-color:#FFFFFF; layer-background-color:#FFFFFF; z-Index: 2;}');
    document.writeln('</style>');

    /*
    ** FUNCTION RETURNASDIV
    */

    function returnAsDiv (theDivToConvert) {
    var returnedObject = eval(docString + theDivToConvert + styleString);
    return returnedObject;
    }

    document.onkeydown = keyDown
    document.onkeyup = keyUp
    if (isNS) document.captureEvents(Event.KEYDOWN | Event.KEYUP)

    /*
    ** FUNCTION KEYDOWN
    */

    function keyDown(e) {
    if (isNS) {var nKey = e.which}
    if (isIE) {var nKey = window.event.keyCode;}

    if(isIE) {
    switch (nKey) {
    case 79:
    movingLeft = true;
    isMoving = true;
    break;
    case 80:
    movingRight = true;
    isMoving = true;
    break;
    case 81:
    movingUp = true;
    isMoving = true;
    break;
    case 65:
    movingDown = true;
    isMoving = true;
    break;
    }
    }

    if(isNS) {
    switch (nKey) {
    case 111:
    movingLeft = true;
    isMoving = true;
    break;
    case 112:
    movingRight = true;
    isMoving = true;
    break;
    case 113:
    movingUp = true;
    isMoving = true;
    break;
    case 97:
    movingDown = true;
    isMoving = true;
    break;
    }
    }
    if (moving == false) {
    move();
    }
    }

    /*
    ** FUNCTION KEYUP
    */

    function keyUp() {
    isMoving = false;
    movingRight = false;
    movingLeft = false;
    movingDown = false;
    movingUp = false;
    moving = false;
    alert(moving);
    }

    function move() {
    moving = true;
    if ((movingLeft && locationX <= minPos) ||
    (movingRight && locationX >= maxPos) ||
    (movingUp && locationY <= minPos) ||
    (movingDown && locationY >= maxPos))
    {
    isMoving = false;
    }

    if (isMoving) {
    theDiv = returnAsDiv('theSqr');
    if(movingRight || movingDown) ammount=2;
    if(movingLeft || movingUp) ammount=-2;

    if(movingLeft || movingRight) {
    locationX = locationX + ammount;
    theDiv.left = locationX;
    } else if (movingUp || movingDown) {
    locationY = locationY + ammount;
    theDiv.top = locationY;
    }

    setTimeout('move()', speed);
    }
    }

    //-->
    </script>

    </HEAD>
    <BODY bgcolor="#C0C0C0">

    <div ID="theSqr"></div>
    <div ID="theBorder"></div>
    <div ID="area"></div>

    </BODY>
    </HTML>

  • #6
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Remove moving = true; from the move function.

  • #7
    Regular Coder ellisd5's Avatar
    Join Date
    Jun 2002
    Location
    Uk
    Posts
    160
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Removing that line puts me back to where i was, In IE the square accelarates becuase the function keyDOwn gets called many times whilst the key is Down rather than the once i would expect. Thats why i put that moving line in, however it cause the square to have a break after each move, really want the square not to accelarate in IE and not to pause after which move
    any suggestions


  •  

    Posting Permissions

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