OC_P6_Turn_Based_Game/index.html at master · AashirSohail/OC_P6_Turn_Based_Game · 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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="favicon.ico">
    <title>Game</title>

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
    <!-- Google Fonts -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
    <!-- Bootstrap core CSS -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
    <!-- Material Design Bootstrap -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.11.0/css/mdb.min.css" rel="stylesheet">

    <link rel="stylesheet" href="./css/styles.css">

</head>
<body>

    <div class="container ">
      <div id = "success">

      </div>
        <div class="row">
            <div class="col-3 pt-5 text-center"  >
                <!-- Card -->
                <div class="card" id = "card1">

                  <!-- Card image -->
                  <div class="view overlay">
                      <img class="card-img-top" src="https://digitalsynopsis.com/wp-content/uploads/2017/02/beautiful-color-gradients-backgrounds-048-strong-bliss.png"
                        alt="Card image cap">
                      <a href="#!">
                        <div class="mask rgba-white-slight"></div>
                      </a>
                  </div>
                  <!-- Card content -->
                  <div class="card-body">
                      <!-- Title -->
                      <h4 class="card-title text-left" id = "nameP1">Aashir <i class="fas fa-circle active"></i> </h4>
                      <!-- Text -->
                      <p id = "textP1" class="card-text text-left">Some quick example text to build on the card title and make up the bulk of the card's
                        content.</p>
                      <!-- Button -->
                      <div class = "row text-center mx-auto align-content-justify" id = "p1btn">
                        <a href="#" id = "p1f" class="btn btn-primary peach-gradient">Attack</a>
                        <a href="#" id = "p1d" class="btn btn-primary peach-gradient">Defend</a>
                      </div>
                      <p id = "textP11" class="card-text text-center pt-2"></p>

                  </div>
                 </div>
                <!-- Card -->

            </div>
            <div class="col-6 text-center align-content-justify pt-2 mx-auto" id = "grid">
                <div class="grid-container mx-auto"></div>

                <a href="#" id = "start" class="btn btn-dark-green waves-effect mt-3">Start</a>
                <a href="#" id = "stop" class="btn btn-danger waves-effect mt-3">Stop</a>

            </div>
            <div class="col-3 pt-5 text-center" >
              <!-- Card -->
                <div class="card" id = "card2">
                  <!-- Card image -->
                  <div class="view overlay">
                      <img class="card-img-top" src="https://webgradients.com/public/webgradients_png/019%20Malibu%20Beach.png"
                        alt="Card image cap">
                      <a href="#!">
                        <div class="mask rgba-white-slight"></div>
                      </a>
                  </div>
                  <!-- Card content -->
                  <div class="card-body">
                      <!-- Title -->
                      <h4 class="card-titl text-left"  id = "nameP2"> Hassaan <i class="far fa-circle inactive"></i> </h4>
                      <!-- Text -->
                      <p id = "textP2" class="card-text text-left">Some quick example text to build on the card title and make up the bulk of the card's
                        content.</p>
                      <!-- Button -->
                      <div class = "row text-center mx-auto align-content-justify" id = "p2btn">
                        <a href="#" id = "p2f" class="btn btn-primary aqua-gradient">Attack</a>
                        <a href="#" id = "p2d" class="btn btn-primary aqua-gradient">Defend</a>
                      </div>
                      <p id = "textP21" class="card-text text-center pt-2"></p>

                  </div>
                 </div>
              <!-- Card -->
            </div>
        </div>
      </div>

      <div id="open-modal" class="modal-window">
        <div>
          <a href="#" title="Close" class="modal-close">Close</a>
          <h1>Two Player Turned Based Game</h1>
          <div>
            <p>1) For each turn, a player can move from one to three boxes (horizontally or vertically) before ending your turn. You obviously can not pass through obstacles directly. You are allowed to stay at the same position.</p>
            <p>2) If a player passes over a box containing a weapon, they leave their current weapon on site and replace it with the new one.</p>
            <p>3) If players cross over adjacent squares (horizontally or vertically), a battle begins. During combat, the game works is as follows:
              <ul>
                <li>Each player attacks in turn.</li>
                <li>The damage depends on the player's weapon.</li>
                <li>The player can choose to attack or defend against the next shot.</li>
                <li>If the player chooses to defend themselves, they sustain 50% less damage.</li>
                <li>As soon as the life points of a player (initially 100) falls to 0, they lose. A message appears and the game is over.</li>
              </ul>
            </p>
          </div>

          <div><small>Customize Players</small></div>
          <a href="#open-modal-player" target="">👉 Get Started</a>
        </div>
      </div>

      <div id="open-modal-player" class="modal-window">
        <div>
          <a href="#" title="Close" class="modal-close">Close</a>
          <div class = "pt-3">
            <!-- Default form subscription -->
            <form class="text-center border border-light p-5" action="#">
              <p class="h4 mb-4">Enter Details</p>
              <p>Player's name will show accordingly once you hit the button.</p>
              <!-- Name -->
              <input type="text" id="p1Name" class="form-control mb-4" placeholder="Entr P1 Name">
              <!-- Email -->
              <input type="text" id="p2Name" class="form-control mb-4" placeholder="Entr P2 Name">
              <!-- Sign in button -->
              <button class="btn btn-warning btn-block" type="submit" onclick="getData()">Lets Play</button>
            </form>
            <!-- Default form subscription -->
          </div>
        </div>
      </div>


<!-- JQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.11.0/js/mdb.min.js"></script>
<script src="./js/script.js"></script>

</body>
</html>