Digital Solutions

Race To Forty

fortyrace.html

<!DOCTYPE html>
<html>
    <head>
        <title>Race to Forty</title>
        <link rel="stylesheet" type="text/css" href="fortyrace.css">
    </head>
    <body>
        <table>
            <tr>
                <td>Player 1:</td>
            </tr>
            <tr>
                <td><span id="p1_score">0</span></td>
            </tr>
            <tr>
                <td>CPU:</td>
            </tr>
            <tr>
                <td><span id="cpu_score">0</span></td>
            </tr>
            <tr>
                <td><input type="button" value="play" id="play" onclick="roll()"></td>  
            </tr>
            <tr>
                <td><span id="winner">Who will be the first to reach 40?</span></td>
            </tr>
        </table>
        
        <script src="fortyrace.js"></script>
    </body>
</html>

fortyrace.css

body{
    background-color: aliceblue;
}

table {
    border-collapse: collapse;
}

td {
    border: 3px solid #778899;
    text-align: left;
    padding: 5px;
}

fortyrace.js

var p1_score = 0;
var cpu_score = 0;

function roll(){
    new_number = Math.floor((Math.random() * 6) + 1);
    p1_score = p1_score + new_number;
    document.getElementById("p1_score").innerHTML = p1_score;
    
    another_number = Math.floor((Math.random() * 6) + 1);
    cpu_score = cpu_score + another_number;
    document.getElementById("cpu_score").innerHTML = cpu_score;
    
    checkWinners();
}

function checkWinners(){
    //p1 wins:
    if (p1_score >= 40 && cpu_score < 40) {
        document.getElementById("play").style.display = "none";
        document.getElementById("winner").innerHTML = "Player 1 wins!"
    }
    //cpu wins:
    if (cpu_score >= 40 && p1_score < 40) {
        document.getElementById("play").style.display = "none";
        document.getElementById("winner").innerHTML = "CPU wins!"
    }
    //tie game:
    if (cpu_score >= 40 && p1_score >= 40){
        document.getElementById("play").style.display = "none";
        document.getElementById("winner").innerHTML = "Tie game!"
    }
}

aesthetics?
reset button?
dice images?
wins / loss column?
other enhancements or adaptations?