maze/index.html at master · dqoder/maze · 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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html lang="en">

<head>
  <script src="p5.js"></script>
  <script src="p5.sound.min.js"></script>
  <script src="1372735d92.js" crossorigin="anonymous"></script>

  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

  <link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/segment7" type="text/css" />
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="icon" href="res/logo.png" type="image/png">
  <title> MAZE</title>
  <meta charset="utf-8">

</head>

<body>
  <!--loading animation-->
  <!-- <div class="loader-wrapper">

    <span class="loader">L<br><text>G</text><span class="loader-inner"></span></span>
    <span class="loader">O<br><text>A</text><span class="loader-inner"></span></span>
    <span class="loader">A<br><text>M</text><span class="loader-inner"></span></span>
    <span class="loader">D<br><text>E</text><span class="loader-inner"></span></span>
  </div> -->
  <div class="loader-wrapper">
    <span class="loader"><span class="loader-inner">L<br><text>G</text></span></span>
    <span class="loader"><span class="loader-inner">O<br><text>A</text></span></span>
    <span class="loader"><span class="loader-inner">A<br><text>M</text></span></span>
    <span class="loader"><span class="loader-inner">D<br><text>E</text></span></span>
  </div>

  <div class="grid-box">
    <div id="menuPanel">
      <button id="setting" onclick="openSettings()">
        <i class="fas fa-cog"></i>
      </button>
      <div id="logo" onclick="">
        <!-- <img src="res/logo.png" /> -->
      </div>
      <div id="time-moves-container">
        <time id="timer">
          00:00:00
        </time>
        <text id="moves">
          00
        </text>
      </div>
    </div>
    <div id="canvasContainer">
      <!-- canvas is inserted through script.js -->
    </div>
    <div id="controlContainer">
      <div id="controlPanel">
        <button id="upB" class="controls" onclick="movementByButton('u')"> <i class="fas fa-arrow-up "></i></button>
        <button id="leftB" class="controls" onclick="movementByButton('l')"><i class="fas fa-arrow-left "></i> </button>
        <button id="downB" class="controls" onclick="movementByButton('d')"> <i class="fas fa-arrow-down "></i></button>
        <button id="rightB" class="controls" onclick="movementByButton('r')"> <i
            class="fas fa-arrow-right"></i></button>
        <div id="dummy1" class="dummyControl"></div>
        <div id="dummy2" class="dummyControl"></div>
      </div>
    </div>
  </div>

  <div class="pop-up hidden ">
    <div class="pop-up-card hidden">
      <div class="middle-of-pop-up-card">
        <div class="congrats-msg">
          Congrats! You have
          <!-- sdfsafdsfsd asdf sdfas  sdkfj ;lasjfsadj fsdf safjsal;f jdslfj -->
          completed it.
        </div>

        <div id="anotherOne">
          <button onclick="newGame(); closePopUps()">TRY ANOTHER ONE </button>
          <button onclick="closePopUps();openSettings();">OPEN SETTINGS </button>
        </div>

      </div>


      <button class="pop-up-close" onclick="closePopUps()">
        <i class="far fa-window-close"></i>
      </button>
    </div>


    <div class="pop-up-card hidden ">
      <ul class="middle-of-pop-up-card">
        <li><button onclick="changeLevel('EASY'); closePopUps()">EASY</button> </li>
        <li><button onclick="changeLevel('MED'); closePopUps()">MEDIUM</button></li>
        <li><button onclick="changeLevel('HARD'); closePopUps()">HARD</button></li>
        <li><button onclick="newGame(); closePopUps()">NEW </button></li>
      </ul>
      <button class="pop-up-close" onclick="closePopUps()">
        <i class="far fa-window-close"></i>
      </button>
    </div>
  </div>
  <script src="sketch.js"></script>

  <script>
    $(window).on("load", () => {
      $(".loader-wrapper").fadeOut("slow");
    });
  </script>


</body>

</html>