PDA

View Full Version : HElp with my Square



ellisd5
06-19-2002, 05:05 PM
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>

Roy Sinclair
06-20-2002, 09:23 PM
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.

RobRichard
06-21-2002, 05:46 AM
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.


:thumbsup:

ellisd5
06-21-2002, 11:24 AM
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.

ellisd5
06-21-2002, 01:00 PM
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>

Roy Sinclair
06-21-2002, 10:44 PM
Remove moving = true; from the move function.

ellisd5
06-25-2002, 11:24 AM
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