写出一款超级马里奥的网页游戏的代码要求有游戏开始和结束功能人物角色用数字代替

<!DOCTYPE html>
<html>
<head>
    <title>超级马里奥</title>
    <style>
        #game-board {
            width: 300px;
            height: 200px;
            border: 1px solid black;
        }
        .player {
            width: 20px;
            height: 20px;
            background-color: red;
            position: absolute;
        }
        #start-button, #end-button {
            padding: 10px;
            background-color: green;
            color: white;
            font-weight: bold;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="game-board">
        <div id="player" class="player"></div>
    </div>
    <br>
    <button id="start-button">开始游戏</button>
    <button id="end-button">结束游戏</button>
<pre><code>&lt;script&gt;
    let player = document.getElementById(&quot;player&quot;);
    let gameBoard = document.getElementById(&quot;game-board&quot;);
    let startButton = document.getElementById(&quot;start-button&quot;);
    let endButton = document.getElementById(&quot;end-button&quot;);
    let gameInterval;

    function startGame() {
        let playerPosition = 0;
        player.style.left = playerPosition + &quot;px&quot;;
        gameInterval = setInterval(function() {
            playerPosition += 10;
            player.style.left = playerPosition + &quot;px&quot;;
            if(playerPosition &gt;= gameBoard.offsetWidth - player.offsetWidth) {
                clearInterval(gameInterval);
                alert(&quot;游戏结束&quot;);
            }
        }, 100);
    }

    function endGame() {
        clearInterval(gameInterval);
        player.style.left = &quot;0px&quot;;
    }

    startButton.addEventListener(&quot;click&quot;, startGame);
    endButton.addEventListener(&quot;click&quot;, endGame);
&lt;/script&gt;
</code></pre>
</body>
</html>