patternjavascriptModerate

HTML / JS Slot Machine Simulator

Submitted by: @import:stackexchange-codereview·Mar 10, 2026·

Viewed 0 times

machinesimulatorhtmlslot

Problem

This code is a slot machine simulator that uses elements of both HTML and JavaScript. Please pardon the lack of comments.


www.loseloselose.com 
 

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
}

 

Lucky Number Slots

 

  
document.write(one)

document.write(two)

document.write(three)

  

if (one == two && one == three && one != null)    
{
document.write("Winner!")   
sound.play()        
}

 

   

Add Credit   

        
0

Solution

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.


    
    
    www.loseloselose.com

    
        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;
        }
    

    
        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;
        }
    

    Lucky Number Slots

    

    
    

    
    

    
    

    
    0
    

    
    0
    

    
    0
    
    

    

    Add Credit

0

Code Snippets

<!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>

Context

StackExchange Code Review Q#51532, answer score: 10

Revisions (0)

No revisions yet.