Question

HTML/CSS/Javascript Slot Machine How would you implement a slot machine where we have three slots with...

HTML/CSS/Javascript Slot Machine

How would you implement a slot machine where we have three slots with 7 images? You have a spin function so the slots randomizes. You also start off with $50 and can bet fron $1 $5 or $10. If the user wins then the earnings will be: 15*betAmount.
0 0
Add a comment Improve this question Transcribed image text
Answer #1

Solution:

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>Spinning Machine</title>
<link rel="stylesheet" type = "text/css" href = "active.css" />
<meta charset="windows-1252">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
  
<script>
/*
*
* Handling events
* using javascript
*
*/
var bet = 0;
var balance = 50; //set initial balance amount to $50
  
/*
*
* spin the slots
*
*/
function spin() {
if(bet === 0){
alert("Please select a bet amout !!!");
}
else if(balance < bet){
alert("You dont have sufficient balance amout to bet !!!");
}
else{
document.getElementById("slot1").src = 'spin.gif';
document.getElementById("slot2").src = 'spin.gif';
document.getElementById("slot3").src = 'spin.gif';
setTimeout('setNew()', 1000);
}
}
/*
* Changing images
*
*/
function setNew(){
var r1 = Math.random();
r1 = Math.floor(r1 * 10);
r1 %= 8;
if(r1 < 1)
r1 = 1;
// console.log(r1);
document.getElementById("slot1").src = 'img' + r1 + '.jpg';
  
var r2 = Math.random();
r2 = Math.floor(r2 * 10);
r2 %= 8;
if(r2 < 1)
r2 = 1;
// console.log(r2);
document.getElementById("slot2").src = 'img' + r2 + '.jpg';
  
var r3 = Math.random();
r3 = Math.floor(r3 * 10);
r3 %= 8;
if(r3 < 1)
r3 = 1;
//.log(r3);
document.getElementById("slot3").src = 'img' + r3 + '.jpg';
  
if(r1 === r2 && r2 === r3){
balance += (bet * 15);
}
else{
balance -= bet;
}
  
document.getElementById("balance").innerHTML = "<b>Balance $" + balance + "</b>";
}
  
/*
* handling bet for $1 button press
*/
function b1Clicked(){
document.getElementById("bet1").disabled = true;
document.getElementById("bet2").disabled = false;
document.getElementById("bet3").disabled = false;
bet = 1;
}
  
/*
* handling bet for $5 button press
*/
function b2Clicked(){
document.getElementById("bet1").disabled = false;
document.getElementById("bet2").disabled = true;
document.getElementById("bet3").disabled = false;
bet = 5;
}
  
/*
* handling bet for $10 button press
*/
function b3Clicked(){
document.getElementById("bet1").disabled = false;
document.getElementById("bet2").disabled = false;
document.getElementById("bet3").disabled = true;
bet = 10;
}
</script>
  
</head>
<body>
<table border='1px'>
<tr>
<td>
<img id="slot1" src="img2.jpg" height="500" width="300">
</td>
<td>
<img id="slot2" src="img5.jpg" height="500" width="300">
</td>
<td>
<img id="slot3" src="img6.jpg" height="500" width="300">
</td>
<td>
<label id="balance"><b>Balance : $50</b></label>
<br><br><br><br>

<button id = "bet1" onclick="b1Clicked()"><b>Bet for $1</b></button>
<br>
<br>
<button id = "bet2" onclick="b2Clicked()"><b>Bet for $5</b></button>
<br>
<br>
<button id = "bet3" onclick="b3Clicked()"><b>Bet for $10</b></button>
<br>
<br>
<br>
<br>
<button onclick="spin()"><b>Spin It</b></button>
</td>
</tr>
</table>
</body>
</html>

Code screenshot:

Sample run output:

Add a comment
Know the answer?
Add Answer to:
HTML/CSS/Javascript Slot Machine How would you implement a slot machine where we have three slots with...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions
  • given below are the project description and their Html and css files i need javascript according to the project and other files!

    HTML------------------------------------------------------CSS---------------------------------------------------WEB230 - JavaScript 1 Assignment 7 - FormsSome of these tasks would be better done in HTML or CSS but do them in JavaScript to practice whatwe have learned.1. Select the form element and save it in a variable. From here we can access all of the form fields.2. When the page loads do the following:add the password value "monkey"select the favourite city "New York"clear the textarea3. Add an event handler to the "name" field to change the background color...

  • This is my code so far: <!DOCTYPE html> <html> <head> <title>JavaScript is fun</title> <meta charset="utf-8" />...

    This is my code so far: <!DOCTYPE html> <html> <head> <title>JavaScript is fun</title> <meta charset="utf-8" /> </head> <body> <script type ="text/javascript"> //declare a variable and store text in it var x = "JavaScript is fun"; //write the variable 5 times document.write(x + x + x + x + x); //store 5 as string in variable x x = "5"; //store 3 as string in variable y var y = "3"; //write the value x + y to the document document.write("<br>");...

  • Create a webpage (the last picture has three potential offers not just 2). Use html, JavaScript...

    Create a webpage (the last picture has three potential offers not just 2). Use html, JavaScript and CSS where needed. All information needed is supplied by the picture. Summary Create a dynamic web page that allows users to compare different financing offers for an automobile loan. Purchasers are often presented with different financing offers, and determining the best offer can be difficult. In particular, dealers often have promotions that offer either a lower interest rate or a cash incentive (sometimes...

  • NEED HELP with HTML with Javascript embedding for form validation project below. I have my code...

    NEED HELP with HTML with Javascript embedding for form validation project below. I have my code below but I'm stuck with validation. If anyone can fix it, I'd really appreciate. ****************************************************************************** CODE: <!DOCTYPE html> <!-- To change this license header, choose License Headers in Project Properties. To change this template file, choose Tools | Templates and open the template in the editor. --> <html> <head> <title>Nice</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script> var textFromTextArea; function getWords(){ var text =...

  • Simple JavaScript and HTML: You'll create a simple word guessing game where the user gets infinite...

    Simple JavaScript and HTML: You'll create a simple word guessing game where the user gets infinite tries to guess the word (like Hangman without the hangman, or like Wheel of Fortune without the wheel and fortune). Create two global arrays: one to hold the letters of the word (e.g. 'F', 'O', 'X'), and one to hold the current guessed letters (e.g. it would start with '_', '_', '_' and end with 'F', 'O', 'X'). Write a function called guessLetter that...

  • HTML , Javascript Canvas problem: could you pleaseeee help me to do these things- suppose, user...

    HTML , Javascript Canvas problem: could you pleaseeee help me to do these things- suppose, user draw a picture, then that picture(lines on Canvas) will be saved as commands, so when the user will refresh the webpage or when I will execute the code, then when I will press the "load" button, the last picture which I made will come on the canvas from localStorage. <!DOCTYPE html> <html> <head> <script> var commands = []; var start = 0; var c;...

  • Hey, i'm super stuck on my lab in cs102. I have attempted it but never got...

    Hey, i'm super stuck on my lab in cs102. I have attempted it but never got close to what the end result should be. Please help, due in 2 days!! Assignment You will be writing a program to simulate a slot machine. The player will start with $1000 and you will repeatedly ask the user how much money they wish to insert into the machine before spinning, or allow the player to quit. If the player runs out of money,...

  • PHP, HTML, CSS I have to make a website for a health club. Or a spa. Or some other kind of business where you have a mem...

    PHP, HTML, CSS I have to make a website for a health club. Or a spa. Or some other kind of business where you have a membership and keep track of transactions for those customers. First I need to create a page where the customer is signed up for a membership. The fields should include: First name Last name Street Address City State Zip Code Email Phone Number I should create a table that has all of that data as...

  • Consider a VEX-executing VLIW machine with the following characteristics: The machine supports 4 slots (4-wide machine)...

    Consider a VEX-executing VLIW machine with the following characteristics: The machine supports 4 slots (4-wide machine) with the following resources: 2 memory units each with a load latency of 3 cycles 2 integer-add/sub functional units with a latency of 2 cycle 1 integer-multiply functional unit with a latency of 4 cycles Each functional unit in the machine is pipelined and can be issued a new operation at each cycle. However, the results of an operation are only available after the...

  • given below are the project description and their Html and css files i need javascript according...

    given below are the project description and their Html and css files i need javascript according to the project and other files! WEB230 - JavaScript 1 Assignment 6b - Event Delegation Before starting, study the HTML and open it in a browser so that you understand the structure of the document. You will add functionality to perform several tasks in our shopping list app. Clicking the red "X" at the right of an item will delete that item. Clicking on...

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT