Create Your Own Random Game with HTML - Simple Coin Flip Example - 常规

<!DOCTYPE html>
<html>
<head>
    <title>Random Game</title>
    <style>
        body{
            background-color: #e0e0e0;
        }
        #container{
            width: 300px;
            height: 300px;
            margin: 0 auto;
            padding: 10px;
            text-align: center;
            background-color: #fefefe;
            border-radius: 5px;
        }
        #score{
            font-size: 1.5em;
            font-weight: bold;
            margin-bottom: 10px;
        }
        #start-btn{
            background-color: #00aaff;
            color: #fefefe;
            padding: 10px;
            font-size: 1.2em;
            font-weight: bold;
            border-radius: 5px;
        }
        #start-btn:hover{
            background-color: #0088cc;
            color: #fefefe;
        }
    </style>
</head>
<body>
    <div id='container'>
        <div id='score'>Score: 0</div>
        <button id='start-btn'>Start!</button>
    </div>
    <script>
        let score = 0;
        let startBtn = document.getElementById('start-btn');
        let scoreElement = document.getElementById('score');
<pre><code>    startBtn.addEventListener('click', () =&gt; {
        score++;
        scoreElement.innerText = `Score: ${score}`;
        let randomNumber = Math.floor(Math.random() * 2);
        if (randomNumber === 0) {
            startBtn.innerText = 'Heads';
        } else {
            startBtn.innerText = 'Tails';
        }
    });
&lt;/script&gt;
</code></pre>
</body>
</html>