The following page simulates a pool cue and cue ball:
http://members.aol.com/myscript/cue.html
Mouse cursor position around the cue ball determines where a roll-over
of 179 pool cue images is placed around the ball and which one of those
images is displayed. Each pool cue image is in a slightly different
orientation and the correct one is chosen to match the orientation of
the cursor around the ball. Holding down the left mouse button and
dragging the cursor away from the ball along the direction of the cue
then releasing the button makes a shot with the pool cue.
Here is the problem. With some displays of this page, I get a good
roll-over effect while moving my cursor around the ball. The pool cue
images change with cursor position in a smooth even way giving a good
animation of the cue changing orientations around the ball. However, at
other times I get a rough effect and it seems as if a delay is
happening maybe because some images are being downloaded again instead
of retrieved from the browsers cache. I'm guessing at this as the
explanation and don't really know why this is going on with some
displays of this page. Can anyone help in determining what is wrong?
Here is the code:
=============== =============== =============== =============== =======
<html>
<head>
<style>
#ball {
position:absolu te;
visibility:hidd en;
z-index:10;
}
#cuelyr {
position:absolu te;
visibility:hidd en;
z-index:5;
}
#box {
position:absolu te;
visibility:hidd en;
z-index:1;
}
</style>
</head>
<body>
<script>
window.status = ' ';
opera = (window.opera)? 1:0;
nn4 = (document.layer s)? 1:0;
ie = (document.all && !opera)? 1:0;
dom = (document.getEl ementById)? 1:0;
cueLength = 200;
RADIUS = 20;
toDegs = 180/Math.PI;
VMIN = -0.75;
VMAX = 0.75;
cues = [];
if (!nn4 && !ie) document.write( "<div id='loadingMsg' >Images
loading</div>");
(function imageLoader() {
for (i=0; i <= 358; i+=2) {
imgSRC = 'cue'+i+'.gif';
cues[i] = new Image();
cues[i].cnt = 0;
cues[i].onload = imagesToLoad(i) ;
cues[i].onerror = createErrorHand ler(imgSRC);
cues[i].src = imgSRC;
}
})();
function imagesToLoad(i) {
return function () {
if ((i += 2) <= 358) window.status = (179 - (i>>1)) + ' images left
to load.';
else {
window.status = 'Done';
if (!nn4 && !ie) document.getEle mentById('loadi ngMsg').innerHT ML="";
trapEvents();
}
}
}
function createErrorHand ler(imgSRC) {
return function () {
this.src = (this.cnt++ < 3)? imgSRC : 'missing.gif';
}
}
(function setBox(left, top, width, height, border) {
if (!left || left < 0 ) left = 0;
if (!top || top < 0) top = 0;
document.write(
'<div id="box">' +
'<table cellpadding=0 cellspacing=0 border='+border +' width='+width+'
height='+height +'>' +
'<tr><td> < \/td><\/tr><\/table><\/div>'
);
var lyr;
if (nn4) { lyr = document.layers['box']; lyr.style = lyr; }
else lyr = (ie)? document.all['box']:(dom)?
document.getEle mentById('box') :null;
var box = lyr.style;
box.left = left;
box.top = top;
box.visibility = (nn4)? 'show':'visible ';
XMIN = left + border + RADIUS + 1;
XMAX = width + left - border - RADIUS;
YMIN = top + border + RADIUS + 1;
YMAX = height + top - border - RADIUS;
})(60, 30, 675, 400, 5);
(function setBall(imgSRC, left, top) {
if (!left || left < 0 ) left = 0;
if (!top || top < 0) top = 0;
document.write( '<div id="ball"><img src="' + imgSRC + '"
border=0><\/div>');
if (nn4)
{ lyr = document.layers['ball']; lyr.style = lyr; }
else
lyr = (ie)? document.all['ball']:(dom)?
document.getEle mentById('ball' ):null;
cueball = lyr.style;
cueball.left = left;
cueball.top = top;
cueball.visibil ity = (nn4)? 'show':'visible ';
cueball.X = left + RADIUS;
cueball.Y = top + RADIUS;
cueball.Vx;
cueball.Vy;
cueball.isZero = function(x) {
return (x > VMIN && x < VMAX)? 1:0;
}
cueball.move = function() {
if (cueball.isZero (cueball.Vx) && cueball.isZero( cueball.Vy)) {
setTimeout('cue .reset()',500);
return;
}
var nextX = cueball.X + cueball.Vx;
var nextY = cueball.Y + cueball.Vy;
if (nextX <= XMIN) { cueball.X = XMIN; cueball.Vx *= -.98; }
else if (nextX >= XMAX) { cueball.X = XMAX; cueball.Vx *= -.98; }
else { cueball.X = nextX; cueball.Vx *= .98; }
if (nextY <= YMIN) { cueball.Y = YMIN; cueball.Vy *= -.98; }
else if (nextY >= YMAX) { cueball.Y = YMAX; cueball.Vy *= -.98; }
else { cueball.Y = nextY; cueball.Vy *= .98; }
cueball.left = cueball.X - RADIUS;
cueball.top = cueball.Y - RADIUS;
setTimeout('cue ball.move()',0) ;
}
})('grayball.gi f',350,205);
(function setCue() {
var lyr, rn, rads;
var toRads = Math.PI/180;
document.write( '<div id="cuelyr"><im g name="poolcue" src="cue0.gif"
border=0><\/div>');
if (nn4)
{ lyr = document.layers['cuelyr']; lyr.style = lyr; }
else
lyr = (ie)? document.all['cuelyr']:(dom)?
document.getEle mentById('cuely r'):null;
cue = lyr.style;
cue.distance = 1;
cue.rotation = 0;
cue.drag;
cue.showing;
cue.halfLength = cueLength/2;
cue.xNormal = new Array();
cue.yNormal = new Array();
for(rn=0; rn <= 358; rn+=2) {
cue.xNormal[rn] = -Math.sin(rads = toRads*(rn - 90));
cue.yNormal[rn] = Math.cos(rads);
}
cue.setDistance = function(d) {
cue.distance = (d<0)? 0:(d>35)? 35:d;
}
cue.setRotation = function(r) {
r = (r % 2 != 0)? --r : r;
cue.rotation = (r > 358)? 0 : r;
}
cue.place = function() {
var round = Math.round;
var s;
cue.img.src = cues[cue.rotation].src;
cue.left = round(cueball.X - cue.halfLength +
cue.xNormal[cue.rotation]*(cue.halfLengt h + (s = RADIUS +
cue.distance))) ;
cue.top = round(cueball.Y - cue.halfLength +
cue.yNormal[cue.rotation]*(cue.halfLengt h + s));
}
cue.takeShot = function() {
releaseTrapping ();
cueball.Vx = -Vxn;
cueball.Vy = -Vyn;
setTimeout('cue .hide(); cueball.move()' , 100);
}
cue.reset = function() {
trapEvents();
cue.distance = 1;
cue.rotation = 0;
cue.place();
cue.show();
}
cue.show = function() {
cue.visibility = (nn4)? "show":"visible ";
cue.showing = 1;
}
cue.hide = function() {
cue.showing = 0;
cue.visibility = (nn4)? "hide":"hidden" ;
}
})();
function MouseMove(x,y) {
var dX, dY;
var round = Math.round;
var atan2 = Math.atan2;
var sqrt = Math.sqrt;
if (cue.showing) {
mouseX = x; mouseY = y;
dX = x - cueball.X;
dY = y - cueball.Y;
if (cue.drag)
cue.setRotation (round((dY < 0)? atan2(dY,dX)*to Degs + 360:
atan2(dY,dX)*to Degs));
else
cue.setDistance (((currentDista nce = sqrt(dX*dX+dY*d Y)) -
startDistance)) ;
cue.place();
}
return false;
}
function trapEvents() {
if (nn4) {
document.captur eEvents(Event.M OUSEDOWN | Event.MOUSEUP |
Event.MOUSEMOVE );
document.onmous emove = function(e) { return MouseMove(e.pag eX,
e.pageY); }
}
else
document.onmous emove = (ie)? function() { return
MouseMove(event .clientX, event.clientY); } : function(e) { return
MouseMove(e.cli entX, e.clientY); }
document.onmous edown = function(e) {
cue.drag = 0;
var sqrt = Math.sqrt;
var dX, dY;
startDistance = sqrt((dX=mouseX-cueball.X)*dX +
(dY=mouseY-cueball.Y)*dY);
return false;
}
document.onmous eup = function(e) {
cue.drag = 1;
Vxn = cue.distance * cue.xNormal[cue.rotation];
Vyn = cue.distance * cue.yNormal[cue.rotation];
cue.distance = 0;
cue.place();
cue.takeShot();
}
}
function releaseTrapping () {
if (nn4) document.releas eEvents(Event.M OUSEDOWN | Event.MOUSEUP |
Event.MOUSEMOVE );
document.onmous emove = null;
document.onmous edown = null;
document.onmous eup = null;
}
function pageLoadHandler () {
cue.showing = 1;
cue.drag = 1;
cue.img = (nn4)? cue.document.im ages.poolcue : document.poolcu e;
cue.rotation = 0;
cue.place();
cue.visibility = (nn4)? "show":"visible ";
}
onload = (ie||nn4)? pageLoadHandler :pageLoadHandle r();
</script>
</body>
</html>
