Web Analytics Made Easy - StatCounter HElp with my Square - CodingForum

Announcement

Collapse
No announcement yet.

HElp with my Square

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    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>
    Dale Ellis
    __________________
    Tags: None
  • #2
    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.
    Check out the Forum Search. It's the short path to getting great results from this forum.

    Comment

    • #3
      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.


      Comment

      • #4
        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.
        Dale Ellis
        __________________

        Comment

        • #5
          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>
          Dale Ellis
          __________________

          Comment

          • #6
            Remove moving = true; from the move function.
            Check out the Forum Search. It's the short path to getting great results from this forum.

            Comment

            • #7
              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
              Dale Ellis
              __________________

              Comment

              Previous template Next
              Working...
              X