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
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.
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.
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.
<!-- 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 -->
<title> Online Slots </TITLE>
function doLoad()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)
wheelOne = randomOneOf(["cherry.jpg", "lemon.jpg", "bar.jpg", "donut.jpg"]);
<body onLoad = "doLoad();">
<img name="slot1" border=1 src="cherry.jpg">
<input type="button" value="Click to Spin" onClick="DoSpin();">
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.
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.
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.
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.
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.
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
(usually by clicking the mouse in it). To disable input in a text box,
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 namedOf 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.
RequestLoanthat is called when this button is clicked. Your
RequestLoanfunction 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.
EXERCISE 7: Modify the behavior of yourIf 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.
RequestLoanfunction 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.
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
PayOnLoanthat 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.
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
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.