hack-brick-B/home.html at master · KND-Devsnest/hack-brick-B · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]>      <html class="no-js"> <!--<![endif]-->
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Home</title>
    <meta name="description" content=""/>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="styles.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style></style>
  </head>
  <body class="main">
    <div class="left-bar-wrapper">
      <div class="left-bar">
        <div class="powerup-container"><h2 id="text">Power Ups!</h2><div class="line"></div>
          <ul>
            <!-- "paddleIncrease", "paddleDecrease", "goThrough", "powerBall", "fastBall", "slowBall" -->
            <li><div class="paddle-increase"></div>Paddle Size Increase</li>
            <li><div class="paddle-decrease"></div>Paddle Size Decrease</li>
            <li><div class="go-through"></div>Ball Goes Through Bricks</li>
            <li><div class="power-ball"></div>Power Ball</li>
            <li><div class="fast-ball"></div>Fast - Ball Speed Increase🔺</li>
            <li><div class="slow-ball"></div>SLow - Ball Speed Decrease🔻</li>
          </ul>
        </div>
          <div class="how-to-play"></div>
      </div>
    </div>
      <div class="volumewrapper">
      <div class="volume">
        <div class="mute">🎵</div>
        <div class="unmute hidden"></div>
      </div>
    </div>
      <div class="game-container">
        <canvas
          id="main"
          width="500"
          height="500"
          style="border: 1px solid black"
        ></canvas>
      </div>
      <div class="side-sec">
        <div class="misc">
          <div class="score-container"><h2 id="text">Score</h2><div class="line"></div><div id="score"></div></div>
          <div class="high-score-container"><h2 id="text">High-Score</h2><div class="line"></div><div id="high-score"></div></div>
        </div>
        <div class="exit-btn"><a href="./index.html"><p class="exit-text"><-Exit!</p></div></a>
      </div>
      <div class="game-won-wrapper">
        <div class="game-won">
          <h1 id="game-won-text">Game Won</h1>
          Score:<h4 id="ttl-score"></h4>
          <a id="next-lvl-btn" href=""><div class="next-level-btn"><div class="next-level-text">Next Level ></div></div></a>
        </div>
      </div>
      <div class="game-over-wrapper">
        <div class="game-over">
          <h1 id="game-over-text">Game Over!</h1>
          Score:<h4 id="ttl-score-over"></h4>
          <a href=""><div class="retry-btn"><div class="retry-text">Retry?</div></div></a>
        </div>
      </div>
    <!--[if lt IE 7]>
      <p class="browsehappy">
        You are using an <strong>outdated</strong> browser. Please
        <a href="#">upgrade your browser</a> to improve your experience.
      </p>
    <![endif]-->
    <script src="JS/paddle.js"></script>
    <script src="JS/ball.js"></script>
    <script src="JS/brick.js"></script>
    <script src="JS/levels.js"></script>
    <script src="JS/index.js"></script>
    <script src="JS/effects.js"></script>
  </body>
</html>