pacman-ccloud/pacman/index.html

<html>

    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
    </head>

    <style>
        input {
            max-width: 200px;
            border-radius: 8px;
            padding: 0 0.5em;
            font-size: 20px;
        }
    </style>

    <script>

        function checkName() {
            if (window.name != null | window.name.length > 0) {
                document.getElementById("user").value = window.name;
            }
        }

        function enter(e) {
            if (event.which == 13 || event.keyCode == 13) {
                play();
            }
        }

        function play() {
            var user = document.getElementById("user").value;
            if (user == '') {
                alert('You need to provide a name.');
                return;
            }
            window.name = user;
            window.location.href = "start.html";
        }

    </script>

    <body bgcolor="black" onload="checkName()">
        <center>
            <img src="game/img/pac-man-logo.png" width="300" height="200" />
            <h3 style="color:white;">Enter your Name:</h3>
            <input type="text" id="user" value="" onkeydown="enter(event)" />
            <input type="button" value="Play" onclick="play()" />
        </center>
    </body>

</html>