javascript-game/index.html at master · shivani16btcs/javascript-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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Score Clash</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
    />
    <link rel="stylesheet" type="text/css" href="hithung.css" />
    <script src="cc.js" type="text/javascript"></script>
  </head>
  <body>
    <div class="outer">
      <br />
      <center>
        <div id="rules" class="head">
          <h1>Score Clash</h1>
          <h2>Rules</h2>
          <ol>
            <li>
              There are two teams: Team Red (with red color) and Team Blue (with
              blue color).
            </li>
            <li>Each team has six chances to press the "Hit" button.</li>
            <li>
              Pressing the "Hit" button generates a random point and adds it to
              the team's total score.
            </li>
            <li>
              After pressing the "Hit" button, that team's radio button becomes
              disabled until the other team takes its turn.
            </li>
            <li>
              When both teams press the "Hit" button six times, the game results
              are declared to determine the winner.
            </li>
            <li>To restart the game, simply press the "RESTART" button.</li>
          </ol>
          <br />
          <p>
            <input type="button" value="START" onclick="startGame();" />
          </p>
        </div>
      </center>
      <div id="game">
        <a class="how-to-play" onclick="showRule();" >How to play</a>
        <div id="messageContainer" class="message-container head"></div>
        <center>
          <div class="table_center">
            <!-- TABLE 1 -->
            <div class="table1">
              <table border="0" cellpadding="10" cellspacing="40">
                <tr>
                  <td>
                    <input
                      type="radio"
                      name="select"
                      id="radio1"
                      onclick="radioclick(1);"
                    />
                    <div behavior="alternate" scrollamount="1" class="team-name">
                      Team Red (ˆ-ˆ)
                    </div>
                  </td>
                </tr>
                <tr>
                  <td>
                    <input
                      type="button"
                      id="hit1"
                      value="Hit"
                      onclick="random1();"
                      disabled
                    />
                    <div id="randm1"></div>
                  </td>
                </tr>
                <tr>
                  <td>
                    Chances left
                    <input type="text" id="chanceleft1" value="6" disabled />
                  </td>
                </tr>
                <tr>
                  <td>
                    Total points
                    <input type="text" id="totalpoint1" value="0" disabled />
                      <hr id="hr1" size="15" color="darkpink" class="hr-bar" />
                  </td>
                </tr>
              </table>
            </div>
            <!-- table1 div -->

            <!-- TABLE 2 -->
            <div class="table2">
              <table border="0" cellpadding="10" cellspacing="40">
                <tr>
                  <td>
                    <input
                      type="radio"
                      name="select"
                      id="radio2"
                      onclick="radioclick(2);"
                    />
                    <div behavior="alternate" scrollamount="1" class="team-name">
                      Team Blue (ˆ-ˆ)
                    </div>
                  </td>
                </tr>
                <tr>
                  <td>
                    <input
                      type="button"
                      value="Hit"
                      id="hit2"
                      onclick="random2();"
                      disabled
                    />
                    <div id="randm2"></div>
                  </td>
                </tr>
                <tr>
                  <td>
                    Chances left
                    <input type="text" id="chanceleft2" value="6" disabled />
                  </td>
                </tr>
                <tr>
                  <td>
                    Total points
                    <input type="text" id="totalpoint2" value="0" disabled />
                    <hr id="hr2" size="16" color="blue"  class="hr-bar" />
                  </td>
                </tr>
              </table>
            </div>
            <!-- table2 -->
          </div>
        </center>
      </div>
    </div>
    <!-- outer -->
  </body>
</html>