index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta name="description" content="Type fast enough in order to survive.
Use arrows to move." />
    <meta name="title" property="og:title" content="CODE NINJA" />
    <meta property="og:type" content="" />
    <meta name="image" property="og:image" content="https://i.imgur.com/6fAquCB.png" />
    <meta name="author" content="Miguel Ortega Ward & Jean Carlo Castillo Noguera" />
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- BOOTSTRAP -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <!-- FONT -->
    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <!-- STYLE SHEET -->
    <link rel="stylesheet" href="./styles/styles.css">
    <title>Code Ninja</title>
</head>

<body>
    <main>
        <div class="container firstWindow">
            <container id="starting-screen">
                <section class="game-info ">
                    <h1>Code Ninja</h1>
                    <hr>
                    <h2>Intructions:</h2>
                    <p class='instructions'>Type fast enough in order to survive. <br>
                        Use arrows to move.
                    </p>
                </section>
                <section class="Powerups">
                    <div class="row">
                        <div class="col-12">
                            <h2>POWER UPS:</h2>
                        </div>
                        <div class="col-4">
                            <img src="imgs/redSlimePresentation.gif" alt="">
                            <h3>EXPLOSION</h3>
                            <hr>
                            <p>Kills enemies around you</p>
                        </div>
                        <div class="col-4">
                            <img src="imgs\bluelimePresentation.gif" alt="">
                            <h3>FREEZE</h3>
                            <hr>
                            <p>Freezes enemies in screen for 5 seconds</p>
                        </div>
                        <div class="col-4">
                            <img src="imgs\greenSlimePresentation.gif" alt="">
                            <h3>REPEL</h3>
                            <hr>
                            <p>Repels enemies away from you</p>
                        </div>
                    </div>
                </section>
                <div class='centerbutton'>
                    <span id="start-button" class='startbutton'>START</span>
                </div>
            </container>
        </div>

    </main>
    <div class="row gx-0">
        <footer class="d-none order-1">
            <container class="user-input">
                <div class="container">
                    <div class="row">
                        <div
                            class='col-4 d-flex centrartext justify-content-start align-items-center livesleft texthelp'>
                            <h3 class='livestext'>Lives left: </h3>
                        </div>
                        <div class="col-4 d-flex flex-column pt-4 pb-4">
                            <h2 class='centrartext'>Type here:</h2>
                            <input class='inputBox' type="text">
                        </div>
                        <div class='col-4 d-flex centrartext justify-content-end align-items-center score texthelp'>
                            <h3 class='scoretext'>Score: </h3>
                        </div>
                    </div>
                </div>
            </container>
        </footer>
        <div id='gameover' class="containercontainer d-none">
            <div class="container gameOverScreen">
                <div class="row ">
                    <div class="col-12 d-flex  text-align-center justify-content-center gameover">
                        <p class="gameOverText">GAME OVER</p>
                    </div>
                    <div class="col-12 text-align-center justify-content-center  d-flex">
                        <p>You might find useful: </p>
                        <a href="https://developer.mozilla.org/en-US/">MDN docs</a>
                    </div>
                    <div class='centerbutton col-12'>
                        <span id="tryagain-button" class='startbutton tryAgainButton'>TRY AGAIN</span>
                    </div>

                </div>
            </div>

        </div>
        <div id='showgame' class='order-0 d-none'>
            <canvas id="myCanvas"></canvas>
            <script src="js/background.js"></script>
            <script src="js/words.js"></script>
            <script src="js/enemies.js"></script>
            <script src="js/player.js"></script>
            <script src="js/powerUps.js"></script>
            <script src="js/explosion.js"></script>
            <script src="js/code-ninja.js"></script>
            <script src="js/index.js"></script>


        </div>

    </div>

</body>


</html>