8
\$\begingroup\$

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>
\$\endgroup\$
7
  • \$\begingroup\$ why do you reload the page? \$\endgroup\$
    – Federico J.
    Commented 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
    Commented May 23, 2014 at 14:48
  • \$\begingroup\$ ahms, and what do you want to review? how to do it without refresh? \$\endgroup\$
    – Federico J.
    Commented May 23, 2014 at 14:49
  • \$\begingroup\$ That would be welcome advice :) \$\endgroup\$
    – DatLumberZach
    Commented May 23, 2014 at 14:50
  • \$\begingroup\$ mmmm, can you use jquery? or must it be pure js? \$\endgroup\$
    – Federico J.
    Commented May 23, 2014 at 14:51

1 Answer 1

Reset to default
10
\$\begingroup\$

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>

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.