slot machine javascript

Sweetzzz24 Greenhorn

Messages:: 7

Likes Received:: 0

Best Answers:: 0

Trophy Points:: 11

#1

This is exactly what I have to do...
I have created the css and form part of the task, its the javascript im having trouble with

here is what i have so far:
<html>
<head>
<title> Slot Machine</title>
<script type="text/javascript" src="http://balance3e.com/random.js"></script>
<script type="text/javascript">
var spinCount = 0;
var images = ['lemon', 'cherry', 'bar'];

function SpinSlots()
      // Assumes: slot images are in http://balance3e.com/Images
      // Resultes: displays 3 random slot images
{
	// if not spinning, pick a random number of spins
	if ( spinCount == 0 ) spinCount = 10 + Math.floor( 20 * Math.random() );

	var slot1 = RandomOneOf(images);
	var slot2 = RandomOneOf(images);
	var slot3 = RandomOneOf(images);

	document.getElementById('slot1Img').src =
	'http://balance3e.com/Images/' + slot1 + '.jpg';
	document.getElementById('slot2Img').src =
	'http://balance3e.com/Images/' + slot2 + '.jpg';
	document.getElementById('slot3Img').src =
	'http://balance3e.com/Images/' + slot3 + '.jpg';

        --spinCount;
        if ( spinCount > 0 )
        {
            setTimeout(SpinSlots, 50);
            return;
        }

	// assume the person loses:	
        var credits = parseInt(document.getElementById('credits').innerHTML);
        --credits; // always costs 1 credit to play

	var msg = "You lose!";
        var color = "red";

	if (slot1 == slot2 && slot2 == slot3)
	{
	    // oh nuts, she/he won
    	    credits += 13;
            msg = "You win 13 credits!";
            color = "green";
	}
 	// update credits display and win/lose message
	document.getElementById('credits').innerHTML = credits;
        var msgspan = document.getElementById("message");
        msgspan.innerHTML = msg;
        msgspan.style.color = color;

        if ( credits <= 0 )
        {
             alert("You lost all your money!");
             location.href = "http://www.gamblersanonymous.org";
        }
}
</script>
</head>

<body>
<div style="text-align:center">
<p>
	<img id="slot1Img" border=1 alt="slot image"
	       src="http://balance3e.com/Images/cherry.jpg">
	<img id="slot2Img" border=1 alt="slot image"
	       src="http://balance3e.com/Images/lemon.jpg">
	<img id="slot3Img" border=1 alt="slot image"
	       src="http://balance3e.com/Images/bar.jpg">

</p>
<input type="button" value="Click to Spin" onclick="SpinSlots();">
<br/><br/>
<span id="message" style="font-size: x-large; font-weight: bold;"></span>
<br/><br/>
Credits Remaining: <spin id="credits">20</span>
</p>
</div>
</body>
</html>
Code (markup):
Create a slot machine gambling game using JavaScript. You should find 6 to 8 graphics of fruit
on the Internet, all of the same size. Give the user a starting money amount of $100. Your form
should include a text field that allows the user to enter a bet amount (do not allow the user to
enter more than they have), a button that allows the user to pull the slot, a <div> displaying the
users current money amount, and another <div> that you will display slot pull results and error
messages.
The button should call a JavaScript function that puts 3 random graphics onto the screen.
â€¢ If 2 of the graphics are the same, the user wins 2 times their bet.
â€¢ If all 3 of the graphics are the same, the user wins 3 times their bet.
â€¢ If no graphics are the same, the user loses their bet amount.
â€¢ Use a special graphic (either designate one of the graphics you have or use something
completely different from your theme). If all 3 graphics are of this special graphic, the user
wins the jackpot, which is $1,000,000
Basically, you are comparing the random numbers that are generated. When the user finally
loses all of their money, tell them â€œThanks for playing, have a nice dayâ€. You need to have
another <div> that displays the userâ€™s current money amount at all times. You can display their
winning or losing amount after every slot pull, and any error alerts on the page as well. If the
user wins the Jackpot, give them a huge congrats message and disable the button.
Your slot machine page must be presented to the user in a polished fun game style fashion
using various colors and graphics to give the page a casino look and feel. I have

Your graphics for the slot machine must be no more than 1 to 2 square inches in size. Do
not use huge graphics. Again, all graphics must be of the same size.
â€¢ The three random numbers generated from each slot pull will determine which graphics to
use for the game. The insertion of the graphics is based on the graphic file we had created
in class, which is available for download from my website.
â€¢ May be a good idea to display the three graphics within a table. You do not have to though,
can try use <div> tags with the inline CSS attribute enabled.
â€¢ Include game instructions and winning amounts on the page.
â€¢ All bets must be divisible by 5 (bets of $5, $20, $45, $100, etc). If the bet is not divisible by
5, display an appropriate error message.
â€¢ The user may not be permitted to enter a non-numerical value for bet amount. An
appropriate error message must be displayed if this happens.
â€¢ The user may not be permitted to enter a bet amount more than what they currently have.
An appropriate error message must be displayed if this happens.
â€¢ The user may not be permitted to enter a bet amount of negative values or zero. An
appropriate error message must be displayed if this happens.
â€¢ When the user has lost all of their money, you must disable both the text field and the
button.