MCS-170 Project 5: OnLine Slot Machine

Project Task

Up to this point we have covered the basics of JavaScript programming and Web page design. Most recently, we have introduced event-driven programming and HTML forms for enabling user interaction on web pages. In this lab, we will apply our programming and Web skills to designing and implementing an interactive Web page for playing a virtual slot machine. We will also incorporate conditional JavaScript statements to make our virtual slot machine quite sophisticated.

On this lab, you will work in groups of 2 two (with perhaps one group of three, should that prove necessary due to an odd number of students). You should work with a different partner than for the last group project. Within your group, you should have a clear understanding of each member's responsibilities, and be dependable and punctual in carrying them out. Also, be sure that no member monopolizes the work, but rather that you share the work as equally as possible.

In Lab

A rapidly growing sector of electronic commerce is in the area of online gambling. Since the Internet crosses international borders, online casinos are often able to circumvent federal gambling laws and provide unregulated gambling through the Internet. Whether for real money or just for entertainment, a multitude of online gambling sites are accessible via the Web.

For this lab, you will implement an online slots game. If you are not familiar with the game, a slot machine contains three windows or slots in which an image is shown. To play the game, the player inserts a coin and pulls on a handle, causing the images in the slots to be randomized (usually by spinning the wheels on which the images are printed). If the three resulting images in the slots are identical, say three lemons, then the player wins and receives some payoff.

For example,

lemonlemonlemon

To build our virtual slot machine, we need to be able to randomly select an image from a set of images.  The following HTML document gives one way of doing this.

<html> 
  <!--   slots-demo.html                                              --> 
  <!-- This page simulates a slot machine.             -->
  <!-- Modified version of page from                      -->
  <!--  http://www.dickinson.edu/~cs131/             -->
  <!-- Modified: March 29, 2005 by M Hvidsten -->
  <!--------------------------------------------------------------> 
  <head> 
    <title> Online Slots </TITLE> 
    <script SRC="random.js"> 
    </script> 
    <script type="text/javascript">   
    function doLoad()
    {
       // Put code here if you need to initialize values 
       //   of a form when the page reloads - may be useful
    }
         function DoSpin()
         // Input: None
         // Output: None
         // Results: Displays a random image as the slot1 image,
         //   (assuming this image has been defined in the body of the page)
         {
              var wheelOne;
              wheelOne = randomOneOf(["cherry.jpg", "lemon.jpg", "bar.jpg", "donut.jpg"]);
              document.images.slot1.src= wheelOne;
       }
    </script>
  </head> 
 
  <body onLoad = "doLoad();"> 
    <center>
    <img name="slot1" border=1 src="cherry.jpg"> 
    <br><br> 
    <form name="SlotForm"> 
           <input type="button" value="Click to Spin" onClick="DoSpin();"> 
    </form> 
    </center> 
  </body> 

</html>

The img tag on this page has an attribute that we have not encountered before "BORDER=1". This attribute causes a border to be drawn around the image. You could increase the width of the border by changing the number 1 to 2, or 3.

EXERCISE 1:  Save a copy of slots-demo.html to your directory.  Also, save a copy of each of the four images: cherry.jpg, lemon.jpg, bar.jpg, donut.jpg,  and save a copy of the library random.js. Then, play with the slots web page until you are sure you understand how it works.

Most slot machines have 3 slots, all yielding random images on each spin. To simulate this, add two more slots images to your slots.html page, next to the current one. When the user clicks on the button, all three slots images should be randomly selected and displayed on the page.

Note: You will not be asked to include code for each individual exercise in this lab. Instead, you will only include the final HTML page after completing all exercises. However, you should still be sure to answer any questions that are posed in each exercise.

In a slot machine, the player wins if all three slots come out the same. While most slot machines differentiate between different matches (paying out more for matching bars as opposed to matching lemons, for example), we will not make this distinction. Any combination of three identical slots will be considered a winner.

EXERCISE 2:  Add an if statement to the function DoSpin from the web page so that it checks for a slots winner. That is, if the three slots are identical (i.e., the images have been assigned the same source file), then an alert box should pop up to display the message "A WINNER!".


Money, Money, Money!!

The slots.html page that you have developed so far is sufficient for simulating the behavior of a slot machine. What it does not capture, however, is the monetary angle. Slot machines are used for gambling: players must pay to spin, and likewise win money if their spin turns up a winner. Using text boxes in the page, it is possible to keep track of the player's winnings and losses as they play the game.
EXERCISE 3:  Add a text box to the "SlotForm" on your slots.html page so that the text box will appear below the button. This text box will be used to keep track of the player's bankroll. Label the text box appropriately so that the player knows what it is for. The text box should have an initial value of 20, representing the fact that the player starts out with $20 in their bankroll.

Each time the slot machine is played, it costs the player $1 (resulting in the bankroll being decremented by 1). In the case of a winner, the player wins $13 (resulting in the bankroll being increased by 13). Note that since a winning spin still costs a dollar to play, the net win will be only $12. Make the appropriate changes to the function DoSpin so that this behavior occurs when the player plays the slot machine.

Text boxes can be used for both input and output. The user can enter values directly into a text box, and computed values can be displayed in a text box via a JavaScript assignment. There are times, however, when you would like to use a text box for output only, forbidding the user from entering values directly. For example, the bankroll text box in your slots.html page is updated by the DoSpin function on each spin. The player does not need to enter anything into the box, and indeed allowing them to alter the contents of the box would encourage theft.

It is possible to forbid user input into a text box using an ONFOCUS event. Closely related to the ONCHANGE event, the ONFOCUS event specifies what is to occur when the user directs their focus to the text box (usually by clicking the mouse in it). To disable input in a text box, the predefined JavaScript function blur can be called to immediately remove the focus from that box:   ONFOCUS="blur();"  For example, the following code will create a text box that will disallow user input.

<INPUT TYPE="text" NAME="myBox" SIZE=10 ONFOCUS="blur();">
EXERCISE 4:  Add an ONFOCUS event handler to the bankroll text box to blur it, and thus keep the player from changing the bankroll directly. Load your page and verify that it behaves as desired.
As is, your page does not recognize when a player has run out of money. It is possible for the user to play your slots game even after their bankroll becomes zero, and the bankroll can become negative as a result. Any smart casino owner would put a stop to this immediately.
EXERCISE 5:  Add a conditional statement to the DoSpin function so that a player is not allowed a spin if the player's bankroll has reached $0. If the player's bankroll is $0, then an alert box should pop up and display a message stating that the spin was disallowed. Otherwise, the function should work as before.
While a smart casino owner knows better than to allow negative bankrolls, most casinos are not above extending personal loans to gamblers who are down on their luck.
EXERCISE 6:  Add a new button and a new text box to your page. The button should allow a player to request a loan. Add a new function named RequestLoan that is called when this button is clicked. Your RequestLoan function should prompt the player for how much of a loan he or she would like.

The function should use the text box to keep track of the player's total debt (i.e. the total of all loans that have been taken, initially $0.) When a player requests a loan, the function should add the amount of the loan to the player's bankroll and also to the player's debt. So, if the player had $2 and they ask for a $10 loan, they now have a $12 bankroll and a $10 debt. Note your page should not allow a player to directly change the contents of the debt text box -- use ONFOCUS to blur it.

Of course, casinos realize that unlucky players are the most likey to take excessively large loans. Further, they know that players tend not to be able to pay back excessively large loans. To prevent this situation from occuring (and to save the need to hire goons to break players' legs), the casinos will usually limit the amount that they will loan to a player.
EXERCISE 7:  Modify the behavior of your RequestLoan function so that a player can never have more than $1000 in debt. If a player requests a loan that would take him or her over the $1000 limit, that loan should be denied. When a loan is denied the function should notify the player via an alert message.

So, if a player has $950 in debt and asks for a $100 loan, the total debt would be $1050, which is greater than $100, so the loan would be denied and the debt would be left at $950.

If a player gets lucky and starts to win after taking a loan, he or she should be able to use some of the winnings to pay off any debt.
EXERCISE 8:  Add a button to your page that allows a player to pay off all or part of a debt. When clicked, this button should call a new function named PayOnLoan that prompts the user for the amount to pay on the debt. The function should deduct the amount to be paid from the player's bankroll and credit it to the debt.

So, if the player has a $50 bankroll and a $20 debt, and decides to pay off $10 of the loan, he would end up with a $40 bankroll and a $10 debt.

Your function should also make sure that the player is not permitted to pay more on the debt than is in the bankroll. If a player requests to pay more than is in the bankroll, an alert should inform the player that they cannot pay that much. Then their whole bankroll should be credited against the debt.

So, if the player has a $20 bankroll and a $50 debt, and tries to pay off $40 of the loan, they will be alerted that they cannot pay that much, and then their bankroll will become $0 and their debt will become $30.

Project Report:

Each group will turn in one project report.  The report for this project will consist of the source code of your final slots.html page after you have completed all of the exercises. Additionally, the report should include a description of how each group divided up the work for the project.

Make sure that each member of the group considers the College's Honor Policy. You should write the following in full for each member and have each member sign it on your report:

On my honor, I pledge that I have not given, received, nor tolerated others' use of unauthorized aid in completing this work.

Back to MCS 170 home page