pgbowers
12/18/2017 - 3:59 PM

Multiple game screens

One way to make a Welcome screen, then go to the game play and then to a Game Over screen with an option to play again. Dec 4, 2017 - Peter

screens1.html
content_copyfile_download

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
    <link rel="stylesheet" href="stylesheet.css">
</head>

<body>
    <p> Start with a welcome screen then toggle through game and game-over screens - Dec 4, 2017 - Peter</p>

    <div id="welcome-screen">
        <div>
            <p id="title-text">Welcome to the Game!</p>
            <p id='welcome-text'>It's the best game ever!</p>
            <p id='welcome-text'>You will LOVE it!!!</p>
        </div>
        <button id='playGame-button'>Start</button>
    </div>
    <div id="game-screen">
        <div>
            <p>The main game play happens here</p>
            <p>End button would be replaced with game end routine</p>
        </div>
        <button id='gameOver-button'>End</button>
    </div>
    <div id="gameOver-screen">
        <div>
            <p id="title-text">You won the Game!</p>
            <p id='welcome-text'>You are really smart!</p>
            <p id='welcome-text'>Your score was: </p>
        </div>
        <button id='playAgain-button'>Again</button>
    </div>

    <script src="index.js"></script>
</body>

</html>