PDA

Click to See Complete Forum and Search --> : Help Me. Please

elwell
08-04-2003, 06:25 PM
I need help on make a picture cycle through other pictures for an animation then go back to the orignal pictures until someone starts it up again. I have this so far but it cycles through: kickflip1.gif kickflip2.gif and kickflip3.gif and I want it to stop on skater.gif because thats the one it started with. I have highlighted the areas of my delema.

<html>
<HEAD><title>Skateboard Game</title>

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
adImages = new Array("kickflip1.gif","kickflip2.gif","kickflip3.gif","skater.gif")
thisAd = 0
imgCt = adImages.length
n = (document.layers) ? 1 : 0;
ie = (document.all) ? 1 : 0;
function moveImage() {
if (n) {
block = document.blockDiv;
}
if (ie) {
block = blockDiv.style;
}
block.xpos = parseInt(block.left);
block.ypos = parseInt(block.top);
block.active = 0;
document.onkeydown = keyDown;
document.onkeyup = keyUp;
if (n) {
document.captureEvents(Event.keydown | Event.keyup);
}
}
function keyDown(e) {
if (n) {
var nKey = e.which;
var ieKey = 0;
}
if (ie) {
var ieKey = event.keyCode;
var nKey = 0;
}
if ((nKey == 107 || ieKey == 71) && !block.active) {
block.active = 1;
slideLeft();
}
if ((nKey == 59 || ieKey == 75) && !block.active) {
block.active = 1;
slideRight();
}
if ((nKey == 80 || ieKey == 78) && !block.active) {
block.active = 1;
slideDown();
}
if ((nKey == 89 || ieKey == 85) && !block.active) {
block.active = 1;
slideUp();
}
if ((nKey == 67 || ieKey == 65) && !block.active) {
block.active = 1;
rotate();
}
}
function keyUp(e) {
if (n) {
var nKey = e.which;
var ieKey = 0;
}
if (ie) {
var ieKey = event.keyCode;
var nKey = 0;
}
if ((nKey == 97 || ieKey == 71 || nKey == 99 || ieKey == 75 || nKey == 80 || ieKey == 78 || nKey == 89 || ieKey == 85 ))
block.active = 0;
}
function slideRight() {
if (block.active) {
block.xpos += 10;
block.left = block.xpos;
window.status = block.xpos;
setTimeout("slideRight()", 10);
}
}
function slideLeft() {
if (block.active) {
block.xpos -= 10;
block.left = block.xpos;
window.status = block.xpos;
setTimeout("slideLeft()", 10);
}
}
function slideDown() {
if (block.active) {
block.ypos += 10;
block.top = block.ypos;
window.status = block.ypos;
setTimeout("slideDown()", 10);
}
}
function slideUp() {
if (block.active) {
block.ypos -= 10;
block.top = block.ypos;
window.status = block.ypos;
setTimeout("slideUp()", 10);
}
}

function rotate() {
if (document.images) {
thisAd++
(imgCt == thisAd) ? document.skater.src="skater.gif" : document.skater.src=adImages[thisAd];
setTimeout("rotate()", 2 * 100)
}
}
// End -->
</script>
</HEAD>

<BODY OnLoad="moveImage()">

<div id="blockDiv" STYLE="position:absolute; left:100px; top:100px; width:137px; height: 121px; z-index:50;">
<img name="skater" id="skater" src="skater.gif" width="39" height="59"></div>
<span style="position: absolute; top:100px; left:200px;"><img src="grindsetup.gif" width="274" height="51">
</span>
Down = <b>N</b><br />
Up = <b>U</b><br />
Left = <b>G</b><br />
Right = <b>K</b>
Kickflip = <b>A</b>

</body>
</html>
Khalid Ali
08-05-2003, 10:13 AM
a suggestion..
since you already know where it started from,you can remember that value and as soonas moving images reaches back at that point stop the movement...?
elwell
08-05-2003, 09:14 PM
i fixed it:



<html>
<HEAD><title>Skateboard Game</title>

<SCRIPT LANGUAGE="JavaScript">
var image1 = new Image();
image1.src = "kickflip3.gif";
var image2 = new Image();
image2.src = "kickflip2.gif";
var image3 = new Image();
image3.src = "kickflip1.gif";
<!-- Begin
adImages = new Array("kickflip1.gif","kickflip2.gif","kickflip3.gif")
thisAd = 0
imgCt = adImages.length
n = (document.layers) ? 1 : 0;
ie = (document.all) ? 1 : 0;
function moveImage() {
if (n) {
block = document.blockDiv;
}
if (ie) {
block = blockDiv.style;
}
block.xpos = parseInt(block.left);
block.ypos = parseInt(block.top);
block.active = 0;
document.onkeydown = keyDown;
document.onkeyup = keyUp;
if (n) {
document.captureEvents(Event.keydown | Event.keyup);
}
}
function keyDown(e) {
if (n) {
var nKey = e.which;
var ieKey = 0;
}
if (ie) {
var ieKey = event.keyCode;
var nKey = 0;
}
if ((nKey == 107 || ieKey == 71) && !block.active) {
block.active = 1;
slideLeft();
}
if ((nKey == 59 || ieKey == 75) && !block.active) {
block.active = 1;
slideRight();
}
if ((nKey == 80 || ieKey == 78) && !block.active) {
block.active = 1;
slideDown();
}
if ((nKey == 89 || ieKey == 85) && !block.active) {
block.active = 1;
slideUp();
}
if ((nKey == 67 || ieKey == 65) && !block.active) {
block.active = 1;
thisAd = 0;
rotate();
}
}
function keyUp(e) {
if (n) {
var nKey = e.which;
var ieKey = 0;
}
if (ie) {
var ieKey = event.keyCode;
var nKey = 0;
}
if ((nKey == 97 || ieKey == 71 || nKey == 99 || ieKey == 75 || nKey == 80 || ieKey == 78 || nKey == 89 || ieKey == 85 ))
block.active = 0;
}
function slideRight() {
if (block.active) {
block.xpos += 8;
block.left = block.xpos;
window.status = block.xpos;
setTimeout("slideRight()", 10);
}
}
function slideLeft() {
if (block.active) {
block.xpos -= 8;
block.left = block.xpos;
window.status = block.xpos;
setTimeout("slideLeft()", 10);
}
}
function slideDown() {
if (block.active) {
block.ypos += 8;
block.top = block.ypos;
window.status = block.ypos;
setTimeout("slideDown()", 10);
}
}
function slideUp() {
if (block.active) {
block.ypos -= 8;
block.top = block.ypos;
window.status = block.ypos;
setTimeout("slideUp()", 10);
}
}

function rotate() {
if (document.images) {
(imgCt != thisAd) ? thisAd++ : document.skater.src="skater.gif";
(imgCt == thisAd) ? document.skater.src="skater.gif" : document.skater.src=adImages[thisAd];
setTimeout("rotate()", 200)
}
}
// End -->
</script>
</HEAD>

<BODY OnLoad="moveImage()">

<div id="blockDiv" STYLE="position:absolute; left:100px; top:100px; width:137px; height: 121px; z-index:50;">
<img name="skater" id="skater" src="skater.gif" width="39" height="59"></div>
<span style="position: absolute; top:100px; left:200px;"><img src="grindsetup.gif" width="274" height="51">
</span>
Down = <b>N</b><br />
Up = <b>U</b><br />
Left = <b>G</b><br />
Right = <b>K</b><br />
Kickflip = <b>A</b>

</body>
</html>