RockPaperScissorsGame/index.html at main · zuru122/RockPaperScissorsGame · 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" />
    <title>Rock Paper Scisors Game</title>
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="mobile.css" />
    <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"
    />
  </head>
  <body>
    <div class="opening-message">
      <div class="message">
        <h3>Game Overview</h3>
        <p class="padding-bottom">
          Rock, Paper, Scissors is a simple hand game usually played between two
          people. Each player simultaneously forms one of three shapes with an
          outstretched hand: <strong>Rock</strong> (a fist)
          <strong>Paper</strong> (an open hand) <strong>Scissors</strong> (a
          fist with the index and middle fingers extended, forming a V)
        </p>
        <h3>The Choices:</h3>
        <p class="padding-bottom">
          Each player must choose one of the following three options:
        </p>
        <ol class="padding-bottom">
          <li>Rock: Represented by a fist.</li>
          <li>Paper: Represented by an open hand.</li>
          <li>
            Scissors: Represented by a V-shape made with two fingers (like a
            pair of scissors).
          </li>
        </ol>

        <div class="hr"></div>

        <h3>The Rules:</h3>
        <ul>
          <li class="rules-header">Rock beats Scissors:</li>
          <ul>
            <li>Rock crushes Scissors.</li>
            <li>
              If Player 1 chooses Rock and Player 2 chooses Scissors, Player 1
              wins.
            </li>
          </ul>
        </ul>

        <ul>
          <li class="rules-header">Scissors beat Paper:</li>
          <ul>
            <li>Scissors cut Paper.</li>
            <li>
              If Player 1 chooses Scissors and Player 2 chooses Paper, Player 1
              wins.
            </li>
          </ul>
        </ul>

        <ul>
          <li class="rules-header">Paper beats Rock:</li>
          <ul>
            <li>Paper covers Rock.</li>
            <li>
              If Player 1 chooses Paper and Player 2 chooses Rock, Player 1
              wins.
            </li>
          </ul>
        </ul>

        <ul>
          <li class="rules-header">Tie:</li>
          <ul>
            <li>
              If both players choose the same option (e.g., both choose
              Rock),<br />
              the round is a tie, and no one wins..
            </li>
          </ul>
        </ul>
      </div>

      <button class="btn-next">CONTINUE</button>
    </div>

    <div class="winner">
      <div class="winner-message">WINNER</div>

      <button class="restart">REPLAY</button>
    </div>
    <div class="game">
      <nav>
        <p>PLAYER SCORE</p>
        <div class="score">
          <p id="user">0</p>
        </div>
        <div class="score">
          <p id="comp">0</p>
        </div>
        <p>COMPUTER SCORE</p>
      </nav>

      <main>
        <div class="container">
          <div class="choices">
            <div class="user-choice flex-content">
              <div class="text">
                <h1>USER CHOICE</h1>
              </div>

              <div id="user-choice" class="user-seleted-choice box"></div>
            </div>
            <div class="result">
              <div id="result" class="result-content">RESULT</div>
            </div>
            <div class="computer-choice flex-content">
              <div class="text"><h1>COMPUTER CHOICE</h1></div>
              <div id="computer-choice" class="comp-selected-choice box"></div>
            </div>
          </div>

          <div class="user-selection">
            <button class="btn" id="Rock">
              <span>Rock</span>
              <img src="img/Rock.png" alt="rock" width="100px" />
            </button>
            <button class="btn" id="Paper">
              <span>Paper</span>
              <img src="img/Paper.png" alt="paper" width="100px" />
            </button>
            <button class="btn" id="Scissors">
              <span>Scisors</span>
              <img src="img/Scissors.png" alt="rock" width="100px" />
            </button>
          </div>
        </div>
      </main>
    </div>
    <!-- <h2>Computer Choice: <span id="computer-choice"></span></h2>
    <h2>Your Choice: <span id="user-choice"></span></h2>
    <h2>Result: <span id="result"></span></h2>

    <button id="Rock">Rock</button>
    <button id="Paper">Paper</button>
    <button id="Scissors">Scissors</button> -->

    <script src="app.js"></script>
  </body>
</html>