index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bugs -N- Gems</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>


    <!-- GAME START SCREEN -->

    <div id="game-start" class="modal">
        <div class="modal-body">
            <img src="images/Gem Blue.png" class="gem gem-left"/>
            <img src="images/Gem Orange.png" class="gem gem-right"/>
            <h1>Bugs -N- Gems</h1>
            <h2>Game Instructions:</h2>
            <p>Grab as many gems as you can, and escape the area through the top of the map. Don't run out of time!<br>If you run out of time or lose all your lives, the game is over!</p>
            <h2>Select Your Character:</h2>
            <div class="character-selection">
                <img src="images/char-cat-girl.png" data-value='images/char-cat-girl.png'/>
                <img src="images/char-horn-girl.png" data-value='images/char-horn-girl.png'/>
                <img src="images/char-boy.png" class="selected" data-value='images/char-boy.png'/>
                <img src="images/char-pink-girl.png" data-value='images/char-pink-girl.png'/>
                <img src="images/char-princess-girl.png" data-value='images/char-princess-girl.png'/>
            </div> <!-- character-selection-->
            <a class="btn btn-start">Start Game</a>
        </div> <!-- modal-body -->
    </div> <!-- #gameStart -->


    <!-- LEVEL SCREEN -->

    <div id="game-level" class="hide">
        <h2>Level <span class="current-level">1</span>!</h2>
    </div>

    <!-- GAMEPLAY SCREEN -->

    <div id="game-screen" class="hide">
        <div class="score-panel">
            <div class="player-info">
                <div class="lives-info">
                    <p><span class="life-count">3</span> Lives</p>
                </div> <!-- .lives-info -->
                <div class="current-score">
                    <p><span class="score-info">0</span></p>
                </div> <!-- .score-info -->
            </div> <!-- .player-info -->
            <div class="countdown-timer">
                <p><span class="level-timer">0</span> Seconds!</p>
            </div> <!-- .countdown-timer -->
        </div> <!-- .score-panel -->
        <div id="gameBoard"></div>
    </div> <!-- #game-screen -->


    <!-- GAME OVER SCREEN -->

    <div class="hide" id="game-over">
        <div class="modal-body">
            <h1>Game Over!</h1>
            <p>Final Score is: <span class="score-info">Score</span></p>
            <a class="btn">Play Again?</a>
            <div class="high-scores">
            <h3>High Scores</h3>
                <ul>
                    <li><span class="name">Mamua:</span><span class="score">2000</span></li>
                    <li><span class="name">Papua:</span> <span class="score">2000</span></li>
                    <li><span class="name">Noah:</span> <span class="score">2000</span></li>
                    <li><span class="name">Maximo:</span> <span class="score">2000</span></li>
                </ul>
            </div> <!-- .high-scores -->
            <form id="new-score" class="hide">
                <h2>New High Score!</h2>
                <input type="text" name="player" />
                <button type="submit">Submit</button>
            </form>
        </div>
    </div>

    <script src="js/resources.js"></script>
    <script src="js/app.js"></script>
    <script src="js/engine.js"></script>
</body>
</html>