/    Sign up×
Community /Pin to ProfileBookmark

I tryed to make a simple slot machine using JS doesn’t work!

Anyone know how to stop the spin? My code is like this;
<html>
<head>
<title></title>
<script type=”text/javascript”>
var r= Math.random()*5

function slot()
{
var image1= new Image()
image1.src=”image1.gif”
var image2= new Image()
image2.src=”image2.gif”
var image3= new Image()
image3.src=”image3.gif”
var image4= new Image()
image4.src=”image4.gif”
var image5= new Image()
image5.src=”image5.gif”
if (Math.round(r) == 1)
{ document.leftroll.src = image1.src;
setTimeout(“slot()”, 100);}
else if (Math.round(r) == 2)
{ document.leftroll.src = image2.src
setTimeout(“slot()”, 100);}
else if (Math.round(r) == 3)
{ document.leftroll.src = image3.src
setTimeout(“slot()”, 100);}
else if (Math.round(r) == 4)
{ document.leftroll.src = image4.src
setTimeout(“slot()”, 100);}
else
{ document.leftroll.src = image4.src
setTimeout(“slot()”, 100);}
}
</script>
</head>
<body>
<input value=”randomly give me a pic” type=”button” onClick=”slot()”>
</body>
</html>

How can I stop this thing after it changed say 30 times?
I tried use other function to help set how many time it should do the slot function. I used;
funtion spin()
{
for(i=0;i<=30;i++)
{
setTimeout(“slot()”, 100)
}
}

This one didn’t worked!
I try everything i know, I couldn’t understand.
Help me!!

to post a comment
JavaScript

2 Comments(s)

Copy linkTweet thisAlerts:
@JuuitchanNov 16.2004 — <i>
</i>funtion spin()
{
for(i=0;i&lt;=30;i++)
{
setTimeout("slot()", 100)
}
}


You misspelled "function".

Also, if you want to see what is wrong with the above function, pretend that you are the computer and loop through the above code. First, you see "i", which hasn't been declared as a variable. Even if it were declared, there is another problem. You set a timeout 100 milliseconds into the future, and then go back and loop immediately. Let's say that, you being a computer, this takes you all of about 1 or 2 milliseconds. So then, you set another timeout 100 milliseconds into the future. (Or maybe you can have only 1 timeout going at a time; I don't know.) So, the first two timeouts (IF there are two timeouts) will be only 1 or 2 millseconds apart, when they should be 100 milliseconds apart.

If I were you, I would forget about using the spin() function, and make the slot() function take an input. Let's call this input "whirr". So, declare your function as "slot(whirr)" and call it as "slot(1)" (this will set the value of whirr to 1). In the setTimeouts, remember to check the value of whirr and only call it again if whirr is less than 30. (Because, when whirr equals 30, this is the 30th time through.) In the timeout, call "slot(whirr+1)".
Copy linkTweet thisAlerts:
@2004028authorNov 17.2004 — Thank you very much.

I think I can fix this one now.

By the way, this is the working version I just build;

<scrpit type="text/javascript">

function startGambling()

{

show();//shown up all three images that was hidden

document.images("laver").src = "../images/laverB.gif";

Sdown = 1;

setTimeout("stopRolling()", 3000);

slot();

}


function slot()

{

if(Sdown == 1)

{

if(document.images)

{

randomL = Math.floor((Math.random()*imgcount));

document.left.src = imgs[randomL];

randomC = Math.floor((Math.random()*
imgcount));

document.center.src = imgs[randomC];

randomR = Math.floor((Math.random()*imgcount));

document.right.src = imgs[randomR];

}

setTimeout("slot()", 100);

}

else

{

randomL = Math.floor((Math.random()*
imgcount));

document.left.src = imgs[randomL];

randomC = Math.floor((Math.random()*imgcount));

document.center.src = imgs[randomC];

randomR = Math.floor((Math.random()*
imgcount));

document.right.src = imgs[randomR];

}

}

function stopRolling()

{

Sdown = 0;

}

</script>

</head>

<body>

<table>

<tr>

<td colspan="4" width="100%"><h2 align="center"><b><font size="6">Musashi's Slot Machine</font></b></h2></td>

</tr>

<tr>

<td align="center" width="25%" bordercolor="#0000FF"><span style="Visibility:hidden;width:64;height:64" id="leftroll">

<img src="../images/icon1.gif" name="left" alt="" width="64" height="64"></span></td>

<td align="center" width="25%" bordercolor="#0000FF"><span style="Visibility:hidden;width:64;height:64" id="centerroll">

<img src="../images/icon1.gif" name="center" alt="" width="64" height="64"></span></td>

<td align="center" width="25%" bordercolor="#0000FF"><span style="Visibility:hidden;width:64;height:64" id="rightroll">

<img src="../images/icon1.gif" name="right" alt="" width="64" height="64"></span></td>

<td align="center" width="25%"><a href="step5.html" onClick="startGambling();return false">

<img id="laver" src="../images/laverA.gif" alt="" width="58" height="118"></a></td>

</tr>

</table>

</body>

If anyone have can make better one, please give me more suggestion^^
×

Success!

Help @2004028 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...