SinglePlayer - Games/Bubble_Blast_Game/index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Bubble Blast</title>
  <script type='text/javascript' src='script.js'></script>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Creepster&family=Foldit&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>

<body id="top" class="aboutgame">

  <div class="Game" id="About">
    <div class="popup" id="popup-1">
      <div class="overlay">
        <div class="content">
          <div class="close-btn" onclick="togglePopup()">&times;</div>
          <h1>Instructions</h1>
          <ul id="list">
            <li id="first">Aim and Shoot: Use the mouse to aim the bubble shooter. Adjust the angle and trajectory to your
              desired position. Click or tap to shoot the bubble towards the top of the grid.</li>
            <li id="second">Match Bubbles: Match three or more bubbles of the same color to make them pop and disappear.</li>
            <li id="third">Clear the Grid: Your goal is to clear the entire grid of bubbles.</li>
            <li id="fourth">Score Points: Earn points for each bubble you pop and for clearing the grid.</li>
            <li id="fifth">Game Over: The game is over if the bubbles reach the bottom of the grid before you clear them all.
            </li>
          </ul>
        </div>
      </div>
    </div>
    
    <button id="btn" onclick="togglePopup()">Hint</button>
    
    <h1 id="left">BUBBLE</h1>
    <h1 id="right">BLAST</h1>
    <p id="dow"> A Fun Bubble Shooter Game </p>
    <div id="move">
    <p id="gr">Welcome to Bubble Blast!</p>
    <p id="greet">Hello, Player! Get ready to shoot some bubbles and have fun!</p>
  </div>
    <canvas id="viewport" width="628" height="625"></canvas>
  </div>
  
</body>

</html>