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\$
  • \$\begingroup\$ why do you reload the page? \$\endgroup\$ – Chococroc May 23 '14 at 14:47
  • \$\begingroup\$ It is the only way that I know to refresh the variables for the numbers displayed. \$\endgroup\$ – DatLumberZach May 23 '14 at 14:48
  • \$\begingroup\$ ahms, and what do you want to review? how to do it without refresh? \$\endgroup\$ – Chococroc May 23 '14 at 14:49
  • \$\begingroup\$ That would be welcome advice :) \$\endgroup\$ – DatLumberZach May 23 '14 at 14:50
  • \$\begingroup\$ mmmm, can you use jquery? or must it be pure js? \$\endgroup\$ – Chococroc May 23 '14 at 14:51
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, privacy policy and cookie policy

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