Moving images in java script? Or even the <span> tag?

Cheeko · Jul 31st, 2001, 07:16 PM

Hi,

I'm working on a simple games section for a site, and one of the things requested was a horse racing sim. So I was thinking of ways to do it, and I thought It'd be a nice effect for the page to load and have a start button. When pushed it runs a small piece of code, say js to pick a random winner and then makes the winning image move along the track first.

Now, the obvious way of doing it would be flash, but seeing as I'm not too good at that, and wouldnt know how to pick the winner and stuff, I thought I'd attempt it in java script?

I havent done any code yet, I was just wondering if anyone can give me the code to move an image from left to right along the screen at a certain speed (pixels per second?

)

Cheers, Cheeko

ps, other methods appereciated

**sebs** · Aug 1st, 2001, 07:16 AM

make a function called something like

function moveHorse(step,horse){
currentPosition=parseInt(document.all[horse].style.left);
document.all[horse].style.left=currentPosition+step;
/*
you will have do check if netscape4.* or netscape 6
and do the same !
*/
}

another function like

function race(limit){
currentPosition=parseInt(document.all[horse].style.left);
/*
you will have do check if netscape4.* or netscape 6
and do the same !
*/

do{
ID=window.setTimeout("moveHorse(10,'horser1');",100);
while(currentPosition<limit);
}

welll that a start, you will have to change thing, but i hope it help!!

Cheeko · Aug 1st, 2001, 03:01 PM

Ok.. Here's the code i have so far..

Code:

<html>
<head>
<title>Horse Racing, Dammit</title>
<script type="text/javascript">
var winner = Math.max(88,64,83)
var loser = Math.min(88,64,83)

var x = 1
var y = 1
var z = 1

function startrace()
{
horse1.style.position="relative"
horse1.style.left=+x
horse2.style.position="relative"
horse2.style.left=+y
horse3.style.position="relative"
horse3.style.left=+z

if (winner == 88) {
x=Math.random()*3
x=x+7
x=Math.round(x)
}
else
{
if (winner == 64) {
y=Math.random()*3
y=y+7
y=Math.round(y)
}
}
else
{
if (winner == 83) {
z=Math.random()*3
z=z+7
z=Math.round(z)
}
}

if (loser == 88) {
x=Math.random()*3
x=x+1
x=Math.round(x)
}
else
{
if (loser == 64) {
y=Math.random()*3
y=y+1
y=Math.round(y)
}
}
else
{
if (loser == 83) {
z=Math.random()*3
z=z+1
z=Math.round(z)
}
}

if (winner != 88) {
if (loser != 88) {
x=Math.random()*3
x=x+4
x=Math.round(x)
}
}
else
{
if (winner != 64) {
if (loser != 64) {
y=Math.random()*3
y=y+4
y=Math.round(y)
}
}
}
else
{
if (winner != 83) {
if (loser != 83) {
z=Math.random()*3
z=z+4
z=Math.round(z)
}
}
}

timer=setTimeout("startrace()",50)
}

function stoprace()
{
clearTimeout(timer)
}
</script>
</head>
<body>
<input type="button" value="Start" onclick="startrace()"> 
<input type="button" value="Stop" onclick="stoprace()"><br>
<table width=98%>
<tr>
<td width=98%%>
<table border=1>
<tr>
<td>
<img id="horse1" src="http://www.w3schools.com/dhtml/smiley.gif" width="32" height="32" /><br>
<img id="horse2" src="http://www.w3schools.com/dhtml/smiley.gif" width="32" height="32" /><br>
<img id="horse3" src="http://www.w3schools.com/dhtml/smiley.gif" width="32" height="32" /><br>
</td>
</tr>
</table>
</td>
<td align=center>
<table border=1 cellspacing=0 cellpading=0 bordercolor=#000000 bgcolor=#000000 height=100%>
<tr>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

Can someone please tell me why i am getting errors?
Seems I get an error during if then else statements and one using an onclick event to run a function

Help?

Cheeko · Aug 2nd, 2001, 05:54 AM

Ok, it's really bugging me now

Any idea's?

**sebs** · Aug 2nd, 2001, 07:10 AM

horse1.style.left=+x

should'nt be

horse1.style.left+=x

Cheeko · Aug 2nd, 2001, 07:33 PM

Still getting errors

**sebs** · Aug 3rd, 2001, 07:13 AM

Hi cheeko,
you gave me an idea, so i had to do it too!!

i attached it to this thread,

it's cheap but i'm not finish

scoutt · Aug 6th, 2001, 08:57 AM

I was looking for something else and I ran into this. it might give you some ideas. when it gets done loading just hold the mouse over the last button on the bottom and watch the moon behind it.

http://www.e-pixs.com/concrete/concrete.html#

Cheeko · Aug 6th, 2001, 09:36 AM

Sebs - That is brilliant! Cheers

Scoutt - I'll check it out

**sebs** · Aug 7th, 2001, 03:57 AM

tx, but now i'm goiing for a frogger game in flash!!,

here's a peak,

frogger

Cheeko · Aug 7th, 2001, 07:22 AM

so far Ive modified it like so:

http://dammit.totalhosts.com/games/racing.php

But I havent added the betting section, or changed the complete randomness by adding skill factors and things.. But all will come in time

**sebs** · Aug 7th, 2001, 07:44 AM

CoOl,
nice job,

tell me when you'll add the betting,

did you look at my frogger temptation,

i just started, but it's not bad,

you can get hit by the car!!!!

Cheeko · Aug 7th, 2001, 10:46 AM

Im trying to add that now, just the problem of getting 5 random horses and jockey's into the equation.. Then I can work out odd's no problem, and after the race workout winnings or losses

How do you move the frog on your game?

**sebs** · Aug 7th, 2001, 10:56 AM

Originally posted by Cheeko

How do you move the frog on your game?

wich game,
frogger of the random one!!

i just look now, and everything look ok with 5 horses,

what is the prob!!

Cheeko · Aug 7th, 2001, 02:57 PM

http://dammit.totalhosts.com/games/racing_bet.php

Thats the current state of mt game

I mean your frogger game, the frog doesnt seem to move..

**sebs** · Aug 8th, 2001, 04:03 AM

cool,

for my frogger it weird but you have to click on the frog to start moving it,

don't know why??

for your horse, just use a gif animator(or flash and export in gif)
and make them move!!

Thread: Moving images in java script? Or even the <span> tag?

Thread Tools

Display

Moving images in java script? Or even the <span> tag?

Posting Permissions