/    Sign up×
Community /Pin to ProfileBookmark

Help with JS slot machine

I am working on a Javascript slot machine for a school project and i require some assistance. What i am having trouble with is getting a “spinning”/random effect on the slots. Below i will put my source code. I assume the spinning effect would probably go in the [B]spin()[/B] Function.

Here is my source:

<html>
<head>
<title>Super Slots</title>
<script>
/*


********************
  • * SuperSlots *

  • * Version 0.7 *

  • * May 2006 *

  • * Class ICS3M1 *

  • * HHS *
    *
    *******************
    *
    /
  • slotpix=new Array
    slotpix[1]=”moneybag.gif”
    slotpix[2]=”cherry.gif”
    slotpix[3]=”lemon.gif”
    slotpix[4]=”pi.gif”
    slotpix[5]=”turkey.gif”
    slotpix[6]=”goldbar.gif”
    slotpix[7]=”pyramid.gif”

    slotname=new Array
    slotname[1]=”Moneybags”
    slotname[2]=”Cherries”
    slotname[3]=”Lemons”
    slotname[4]=”Pi”
    slotname[5]=”Turkeys”
    slotname[6]=”Gold Bars”
    slotname[7]=”Pyramids”

    function betcheck()
    {
    playagainvar=null
    money=Number(document.slots.money1.value)
    bet=document.slots.bet.value
    bet=Number(Math.round(bet))
    document.slots.bet.value=bet

    if(Number(bet))
    {
    if(bet>money)
    {
    alert(“You bet “+bet+’n’+”You do not have that much cash!”)
    document.slots.bet.value=””
    }

    else if(bet<0)
    {
    alert(“You cannot bet negative number!”)
    document.slots.bet.value=””
    }

    else
    {
    money=money-bet
    document.slots.money1.value=money
    document.slots.money.value=money
    spin()
    }
    }
    else
    {
    alert(“Please enter a valid bet!”)
    document.slots.bet.value=””
    focus(document.slots.bet)
    }

    }

    function spin()
    {
    document.slots.slot1.value=null
    document.slots.slot2.value=null
    document.slots.slot3.value=null

    num1=Number(Math.random()*(7-1)+1)
    num1=num1.toFixed(0)
    document.slots.slot1.value=num1
    document.slots.slotpic1.src=slotpix[num1]

    num2=Number(Math.random()*(7-1)+1)
    num2=num2.toFixed(0)
    document.slots.slot2.value=num2
    document.slots.slotpic2.src=slotpix[num2]

    num3=Number(Math.random()*(7-1)+1)
    num3=num3.toFixed(0)
    document.slots.slot3.value=num3
    document.slots.slotpic3.src=slotpix[num3]

    matchcheck()

    }

    function matchcheck()
    {
    if(num1==num2&&num1==num3)
    {
    if(num1==4 && num2==4 && num3==4)
    {
    document.slots.message.value=”You hit the Jackpot!! 3 PI”

    money=Number(money)+Number((10*bet))
    document.slots.money1.value=money
    document.slots.money.value=money
    }

    else
    {
    document.slots.message.value=”You win!! You have three “+slotname[num1]

    money=Number(money)+Number((3*bet))
    document.slots.money1.value=money
    document.slots.money.value=money
    }
    }

    else if(num1==num2||num1==num3||num2==num3)
    {
    document.slots.message.value=”You have a pair!!”

    money=Number(money)+Number((2*bet))
    document.slots.money1.value=money
    document.slots.money.value=money
    }

    else
    {
    document.slots.message.value=”You lose!!”
    }

    document.slots.bet.value=””
    brokecheck()

    }

    function brokecheck()
    {
    if(money==0)
    {
    alert(“You are broke!”)
    playagain()
    }
    }

    function playagain()
    {
    playagainvar=confirm(“Would you like to play again?”)

    if(!playagainvar)
    {
    alert(“Thanks for playing!”)
    }
    else
    {
    document.slots.money.value=100
    document.slots.money1.value=100
    }

    }

    function fixbank()
    {
    document.slots.money1.value=100
    }

    function about()
    {
    alert(“SuperSlots v 0.7″+’n’+”Class ICS3M1″+’n’+”Hearst High School”+’n’+”May 2006”)
    }
    </script>
    <style type=”text/css”>
    input.btn
    {
    color:#FFFF99;
    font-family:”Times New Roman”, Times, serif;
    font-size:100%;
    font-weight:bold;
    width=400;
    height=50;
    cursor:hand;
    background-color: #0000FF;
    border-top: thin ridge #FF9900;
    border-right: thin ridge #FF9900;
    border-bottom: medium ridge #FF9900;
    border-left: medium ridge #FF9900;
    }
    </style>
    </head>
    <body>
    <h1 align=”center”><marquee behavior=”alternate” scrollamount=”15″ width=”300″><img src=”dmsinterface_slot.jpg” width=”34.9px” height=”45.7px”><font color=”#000000″ face=”Arial, Helvetica, sans-serif”>Super Slots</font><img src=”dmsinterface_slot.jpg” width=”34.9px” height=”45.7px”></marquee></h1>
    <p align=”center”><small><strong><font color=”#FF0000″>Beta</font></strong></small></p>
    <hr color=”#000000″>

    <form name=”slots”>
    <table align=”center” border=”2″ bordercolor=”#000099″><tr><td>
    <table align=”center”>
    <tr>
    <td><p align=”center”><font style=”font-size:18px”>$Money$ :</font><input type=”text” name=”money” value=”100″ readonly size=”2″></p></td>
    </tr>
    <tr>
    <td><p><input type=”text” name=”message” readonly size=”50″></p></td>
    </tr>
    </table>
    <table border=”5″ bordercolor=”#0000FF” align=”center”>
    <tr>
    <td><img src=”moneybag.gif” name=”slotpic1″></td>
    <td><img src=”moneybag.gif” name=”slotpic2″></td>
    <td><img src=”moneybag.gif” name=”slotpic3″></td>
    </tr>

    </table>
    <br>
    <table align=”center”>
    <tr>
    <td><p>Bet $:<input type=”text” name=”bet” size=”5″></p></td>
    </tr>
    </table>
    <br>
    <p align=”center”>
    <input name=”button” type=”button” onClick=”betcheck()” value=”Spin!” class=”btn”>
    <br>
    <br>

    <input type=”reset” value=”New Game” onclick=”fixbank()”>
    </p>

    <p align=”right”><input type=”button” value=”About” onclick=”about()”></p>
    <input type=”hidden” name=”slot1″ readonly>
    <input type=”hidden” name=”slot2″ readonly>
    <input type=”hidden” name=”slot3″ readonly>
    <input type=”hidden” name=”money1″ value=”100″>
    </td></tr></table>
    </form>
    </body>
    </html>

    Thanx……

    to post a comment
    JavaScript

    8 Comments(s)

    Copy linkTweet thisAlerts:
    @phpnoviceMay 07.2006 — To get an animated spin effect, you'd have to use [B]window.setTimeout()[/B] to allow the browser to render each change that you make to the object.
    Copy linkTweet thisAlerts:
    @baker89authorMay 07.2006 — To get an animated spin effect, you'd have to use [B]window.setTimeout()[/B] to allow the browser to render each change that you make to the object.[/QUOTE]

    would it be possible to have and example?
    Copy linkTweet thisAlerts:
    @phpnoviceMay 08.2006 — Sure. Here's an example I just whipped up (and, because I'm not a graphics artist, the crude images are attached -- so you can try it out):
    [code=html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Language" content="en-us">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Animate Image</title>
    <script type="text/javascript">
    <!--//
    var imageArray = new Array("wheel1.gif", "wheel2.gif", "wheel3.gif");
    var imageLoad = new Array();
    //
    function animateImage(idx) {
    if(imageArray.length <= ++idx) idx = 0;
    document.images["wheel"].src = imageArray[idx];
    window.setTimeout(function(){animateImage(idx)}, 33);
    }
    function loadImage(idx) {
    if(imageArray.length <= ++idx) {
    animateImage(0);
    } else {
    imageLoad[idx] = new Image();
    imageLoad[idx].onerror = function(){loadImage(idx);return true};
    imageLoad[idx].onload = imageLoad[idx].onerror;
    imageLoad[idx].src = imageArray[idx];
    }
    }
    window.onload = function(){loadImage(0);return true;}
    //-->
    </script>
    </head>

    <body>
    <p><img name="wheel" src="wheel1.gif" alt=""
    style="border:0; width:64px; height:64px;"></p>
    </body>
    </html>[/code]


    [upl-file uuid=f109fe9f-bf6d-4dc9-997a-28e447a13558 size=3kB]wheels.zip[/upl-file]
    Copy linkTweet thisAlerts:
    @jzwpMay 08.2006 — phpnovice, your code doesn't paste very well. None of the lines break while baker89's code pastes very good.

    (if i would) I could use one image, as a backround in 3 divs and change it's background position to mimick the spin.
    Copy linkTweet thisAlerts:
    @phpnoviceMay 08.2006 — I don't know what you mean. What do you want lines to break for?
    Copy linkTweet thisAlerts:
    @jzwpMay 08.2006 — [SIZE=1]Well, When I paste all that you gave in the "html code" into notepad, it's just one continuos line. No breaks! It's just more work to go back and add line breaks to make sense of it all and experiment with some editing.

    I suppose, if you don't want to give away your efforts freely, that would be a way to do it. I'm sure not one to grapple with any more headaches than I already have.

    Another way to submit lengthy code to work with is to simply reduce the font size.[/SIZE]
    Copy linkTweet thisAlerts:
    @phpnoviceMay 08.2006 — Well, When I paste all that you gave in the "html code" into notepad, it's just one continuos line.[/QUOTE]
    Must be caused by using this site's HTML wrappers. That is certainly not the way I developed it. :rolleyes:
    I suppose, if you don't want to give away your efforts freely, that would be a way to do it.[/QUOTE]
    And why would I post it if I didn't want to give it away? It'd be wonderful if you could use your head before making nonsensical remarks. :rolleyes: But, now that you oh-so-innocently bring this up, perhaps this is a solution for those that desire to hide their JavaScript code. Is that all it takes to protect one's code from supposed "pilferers"? ...just use this site's HTML wrappers to make it "too much work" for you? :p
    Copy linkTweet thisAlerts:
    @jzwpMay 09.2006 — So, whatever happened to baker89? Do the teachers give them an hour in the computer lab and think the kids can finish a project? It takes me more discipline to work something out than a flighty 45 minutes in a classroom full of giggling girls. ?
    ×

    Success!

    Help @baker89 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,
    )...