\$\begingroup\$
\$\endgroup\$
7
This code is a slot machine simulator that uses elements of both HTML and JavaScript. Please pardon the lack of comments.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>www.loseloselose.com</title>
<font color="white">
<script>
function Refresh()
{
if (count > 0)
{
window.location.reload()
}
}
var sound = new Audio("winner.wav")
var count = 0
var one = Math.floor((Math.random()*9)+1)
var two = Math.floor((Math.random()*9)+1)
var three = Math.floor((Math.random()*9)+1)
function countClicks()
{
count = count + 1
document.getElementById("p2").innerHTML = count
}
</script>
</head>
<body style="background-color:black;">
<center>
<font size="500">
<font face="arial">
<p>
Lucky Number Slots
</p>
</font>
</font>
</center>
<center>
<svg width="550" height="250" viewBox="0 0 1600 500">
<rect x="0" y="10" width="500" height="500" fill="black" stroke="white" stroke-width="10">
</rect>
<rect x="550" y="10" width="500" height="500" fill="black" stroke="white" stroke-width="10">
</rect>
<rect x="1100" y="10" width="500" height="500" fill="black" stroke="white" stroke-width="10">
</rect>
<text x="100" y="415" font-family="courier" font-size="500" fill="white">
<script>
document.write(one)
</script>
</text>
<text x="650" y="415" font-family="courier" font-size="500" fill="white">
<script>
document.write(two)
</script>
</text>
<text x="1200" y="415" font-family="courier" font-size="500" fill="white">
<script>
document.write(three)
</script>
</text>
</svg>
</center>
<center>
<script>
if (one == two && one == three && one != null)
{
document.write("<font face=arial color=white size=50>Winner!</font>")
sound.play()
}
</script>
</center>
<form>
<center>
<input type="button" value="Click Here To Spin" onClick="Refresh()">
</center>
</form>
<center>
<p>
<a href="javascript:countClicks()">
<font color="white">
Add Credit
</font>
</a>
</p>
<font size="10">
<p id="p2">
0
</p>
</font>
</center>
</body>
</font>
</html>
Jamal
35.2k13 gold badges134 silver badges238 bronze badges
asked May 23, 2014 at 14:26
-
\$\begingroup\$ why do you reload the page? \$\endgroup\$Federico J.– Federico J.2014年05月23日 14:47:10 +00:00Commented May 23, 2014 at 14:47
-
\$\begingroup\$ It is the only way that I know to refresh the variables for the numbers displayed. \$\endgroup\$DatLumberZach– DatLumberZach2014年05月23日 14:48:29 +00:00Commented May 23, 2014 at 14:48
-
\$\begingroup\$ ahms, and what do you want to review? how to do it without refresh? \$\endgroup\$Federico J.– Federico J.2014年05月23日 14:49:32 +00:00Commented May 23, 2014 at 14:49
-
\$\begingroup\$ That would be welcome advice :) \$\endgroup\$DatLumberZach– DatLumberZach2014年05月23日 14:50:22 +00:00Commented May 23, 2014 at 14:50
-
\$\begingroup\$ mmmm, can you use jquery? or must it be pure js? \$\endgroup\$Federico J.– Federico J.2014年05月23日 14:51:49 +00:00Commented May 23, 2014 at 14:51
1 Answer 1
\$\begingroup\$
\$\endgroup\$
Some improvements:
Use of refresh() as a function used to generate the number values, which generate the values AND writes into the DOM element.
Use of a function to manage all user messages, write_message()
Remove of all the old fashion HTML tags, and change it for CSS.
A function for managing spending the "credits" to make it easier to manage them.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>www.loseloselose.com</title>
<script>
var count = 0;
var sound = new Audio("winner.wav");
function write_message( $message ) {
document.getElementById('messages').innerHTML = $message;
}
function refresh()
{
if ( count > 0 ) {
refreshCounts(-1);
var one = Math.floor((Math.random()*9)+1);
var two = Math.floor((Math.random()*9)+1);
var three = Math.floor((Math.random()*9)+1);
document.getElementById('first').innerHTML = one;
document.getElementById('second').innerHTML = two;
document.getElementById('third').innerHTML = three;
if ( one == two && two == three && three == one ) {
write_message( 'winner!' );
} else {
write_message( 'wasted try...' );
}
} else {
write_message( 'I need credits to give you fun!' );
}
}
function refreshCounts( value ) {
count = count + value;
document.getElementById("p2").innerHTML = count;
}
</script>
<style>
body {
text-align: center;
background-color: black;
}
p, a {
color: yellow;
font-weight: 12px;
}
.title {
font-size: 50px;
text-align: center;
}
#machine {
text-align: center;
}
</style>
</head>
<body>
<p class="title">
Lucky Number Slots
</p>
<div id="machine">
<svg width="550" height="250" viewBox="0 0 1600 500">
<rect x="0" y="10" width="500" height="500" fill="black" stroke="white" stroke-width="10">
</rect>
<rect x="550" y="10" width="500" height="500" fill="black" stroke="white" stroke-width="10">
</rect>
<rect x="1100" y="10" width="500" height="500" fill="black" stroke="white" stroke-width="10">
</rect>
<text x="100" y="415" font-family="courier" font-size="500" fill="white" id="first">
0
</text>
<text x="650" y="415" font-family="courier" font-size="500" fill="white" id ="second">
0
</text>
<text x="1200" y="415" font-family="courier" font-size="500" fill="white" id="third">
0
</text>
</svg>
</div>
<p>
<input type="button" value="Click Here To Spin" onClick="refresh()">
</p>
<p>
<a href="javascript:refreshCounts(+1)">Add Credit</a>
</p>
<p id="p2">0</p>
<p id="messages"></p>
answered May 23, 2014 at 16:19
default