Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 20
  1. #1
    New Coder
    Join Date
    Dec 2011
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Smile Javascript Question!!!

    HI Guys!!

    My name is Megan and I am a college student in need of some JavaScript help for my computer science class!!

    My professor is making us complete some stupid class project for finals and I can't figure it out! He suggested that we may try to find a JavaScript Website to help us if we have trouble figuring out how to write the code.

    I have looked and looked and can't find out how to fix my code!!

    We have to write code to make a slot machine ..

    I have started the code based on what he gave us and have tried my hardest to figure out how to complete it but I do not know how to finish it.

    I have the images working correctly (kind of.. the second one seems to have problems loading? I dunno what I did to mess that up) and the counter working, but I need to make it add 13 credits when all 3 images are the same. I added code that I thought would work but it's not for some reason that I can't figure out. It should also pop up an alert screen when all 3 are correct and you win. I guess this would have to be including with the if statement and something like alert('You win 12 credits!!!')

    Lastly I need to add code that prevents the person from playing when the credit line is 0 (so you can't get - credits!) and I have no idea how to do this.

    Any help would be greatly appreciated!

    Here's what I have so far!
    HI Guys!!

    My name is Megan and I am a college student in need of some JavaScript help for my computer science class!!

    My professor is making us complete some stupid class project for finals and I can't figure it out! He suggested that we may try to find a JavaScript Website to help us if we have trouble figuring out how to write the code.

    I have looked and looked and can't find out how to fix my code!!

    We have to write code to make a slot machine ..

    I have started the code based on what he gave us and have tried my hardest to figure out how to complete it but I do not know how to finish it.

    I have the images working correctly (kind of.. the second one seems to have problems loading? I dunno what I did to mess that up) and the counter working, but I need to make it add 13 credits when all 3 images are the same. I added code that I thought would work but it's not for some reason that I can't figure out. It should also pop up an alert screen when all 3 are correct and you win. I guess this would have to be including with the if statement and something like alert('You win 12 credits!!!')

    Lastly I need to add code that prevents the person from playing when the credit line is 0 (so you can't get - credits!) and I have no idea how to do this.

    Any help would be greatly appreciated!

    Here's what I have so far!

    Code:
    <html>
    <head>
    <title> Slot Machine</title>
    <script type="text/javascript" src="http://balance3e.com/random.js"></script>
    <script type="text/javascript">
          function SpinSlots()
          // Assumes: slot images are in http://balance3e.com/Images
          // Resultes: displays 3 random slot images
    {
    	var slot1, slot2, slot3;
    
    	slot1 = RandomOneOf(['lemon', 'cherry', 'bar']);
    	slot2 = RandomOneOf(['lemon', 'cherry', 'bar']);
    	slot3 = RandomOneOf(['lemon', 'cherry', 'bar']);
    
    	document.getElementById('slot1Img').src =
    	'http://balance3e.com/Images/' + slot1 + '.jpg';
    	document.getElementById('slot2Img').src =
    	'http://balance3e.com/Images/' + slot2 + '.jgp';
    	document.getElementById('slot3Img').src =
    	'http://balance3e.com/Images/' + slot3 + '.jpg';
    	
    	document.getElementById('credits').innerHTML =
    	parseFloat(document.getElementById('credits').innerHTML) - 1;
    	
    	
    	if (slot1 == slot2 == slot3)
    	{
    	document.getElementById('credits').innerHTML =
    	parseFloat(document.getElementById('credits').innerHTML) + 13;
    	}
    }
    </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();">
    <p>
    Credits Remaining: <spin id="credits">20</span>
    </p>
    </div>
    </body>
    </html>

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,550
    Thanks
    78
    Thanked 4,382 Times in 4,347 Posts
    You are going to kick yourself.

    Hard.

    Code:
    	document.getElementById('slot2Img').src =
    	'http://balance3e.com/Images/' + slot2 + '.jgp';
    Now try using ".jpg" instead of ".jgp".
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New Coder
    Join Date
    Dec 2011
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts
    oh my gosh haha! Thanks! Any ideas on that other stuff?

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,550
    Thanks
    78
    Thanked 4,382 Times in 4,347 Posts
    Oh, one other error:
    Code:
    	if (slot1 == slot2 == slot3)
    That doesn't mean what you think it does.

    It first compares slot1 to slot2 and gives a value of true or false.

    *THEN* it compares true or false with slot3. Since slot3 is never either true or false, the "if" is never overall true and so the player never wins.

    JavaScript, like most computer languages, can only compare one pair of values at a time.

    So you need
    Code:
    	if (slot1 == slot2 && slot2 == slot3)
    && means "and".
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    Megan_chick22 (12-09-2011)

  • #5
    New Coder
    Join Date
    Dec 2011
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts
    !! Thank you! That worked! The 2nd and 3rd images are not loading however when I click the spin?

    Code:
    <html>
    <head>
    <title> Slot Machine</title>
    <script type="text/javascript" src="http://balance3e.com/random.js"></script>
    <script type="text/javascript">
          function SpinSlots()
          // Assumes: slot images are in http://balance3e.com/Images
          // Resultes: displays 3 random slot images
    {
    	var slot1, slot2, slot3;
    
    	slot1 = RandomOneOf(['lemon', 'cherry', 'bar']);
    	slot2 = RandomOneOf(['lemon', 'cherry', 'bar']);
    	slot3 = RandomOneOf(['lemon', 'cherry', 'bar']);
    
    	document.getElementById('slot1Img').src =
    	'http://balance3e.com/Images/' + slot1 + '.jpg';
    	document.getElementById('slot2Img').src =
    	'http://balance3e.com/Images/' + slot2 + '.jgp';
    	document.getElementById('slot3Img').src =
    	'http://balance3e.com/Images/' + slot3 + '.jgp';
    	
    	document.getElementById('credits').innerHTML =
    	parseFloat(document.getElementById('credits').innerHTML) - 1;
    	
    	
    	if (slot1 == slot2 && slot2 == slot3)
    	{
    	document.getElementById('credits').innerHTML =
    	parseFloat(document.getElementById('credits').innerHTML) + 13;
    	}
    }
    </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();">
    <p>
    Credits Remaining: <spin id="credits">20</span>
    </p>
    </div>
    </body>
    </html>
    When I load the page, they load fine, but once I click spin.. they don't

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,550
    Thanks
    78
    Thanked 4,382 Times in 4,347 Posts
    You changed the WRONG ONE!

    You changed the third one from ".jpg" to ".jgp".

    The *CORRECT* extension for a JPEG file is ".jpg". That is, JPEG with the "E" omitted.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,550
    Thanks
    78
    Thanked 4,382 Times in 4,347 Posts
    Here, since you are so close, have fun with this:
    Code:
    <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>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    Megan_chick22 (12-09-2011)

  • #8
    New Coder
    Join Date
    Dec 2011
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts
    !!!!

    I am such an idiot! I really appreciate your help.

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,550
    Thanks
    78
    Thanked 4,382 Times in 4,347 Posts
    By the by, the correct payout should be 8 credits if you wanted an "honest" slot machine.

    If you wanted to give the house a typical edge (12.5% in this case), the payout should be only 7 credits.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #10
    New Coder
    Join Date
    Dec 2011
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    Here, since you are so close, have fun with this:
    Code:
    <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>

    Oh my! This is actually totally awesome! Thank you so much!!

  • #11
    New Coder
    Join Date
    Dec 2011
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    By the by, the correct payout should be 8 credits if you wanted an "honest" slot machine.

    If you wanted to give the house a typical edge (12.5% in this case), the payout should be only 7 credits.
    My professor said to make it 13 (net gain of 12 since you lose one for spinning!)

  • #12
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,550
    Thanks
    78
    Thanked 4,382 Times in 4,347 Posts
    You could replace
    Code:
    	if ( spinCount == 0 ) spinCount = 10 + Math.floor( 20 * Math.random() );
    with
    Code:
    	if ( spinCount == 0 ) spinCount = RandomInt(10,30);
    to use a function from that ".js" file instead.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #13
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,550
    Thanks
    78
    Thanked 4,382 Times in 4,347 Posts
    Quote Originally Posted by Megan_chick22 View Post
    My professor said to make it 13 (net gain of 12 since you lose one for spinning!)
    Tell him if he can find a machine in Vegas that pays like that, I've got a lot of money to shove into it!

    (Even the "hottest" machines in Nevada pay no more than 97% back, and those are typically the nickel or dime machines, to entice people into thinking they can win. 90% to 94% is more typical. So paying 7 for a win on this beast and giving the house 87.5% isn't far out of line.)
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #14
    New Coder
    Join Date
    Dec 2011
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I REALLY appreciate this.

  • #15
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,550
    Thanks
    78
    Thanked 4,382 Times in 4,347 Posts
    If you read rule 1.5 of this forum, you'll see that we don't "do" homework. But you were so close--one typo and one actually fairly logical error (expecting to be able to compare three values as you did)--that you deserved the help. Wish most students coming here had their code that close to working.

    By the by, you probably shouldn't turn in the version that use setTimeout as that's surely something that's a dead giveaway it's not your work. But study it and try to understand what it is doing. FWIW, it is showing you the only *good* way to use delayed actions in JavaScript. (That is, JavaScript doesn't have the ability to "pause" or "wait" for a period of time, so instead you must schedule something to run at a later tiime. In this case, 50 milliseconds later.)
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •