-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
1 changed file
with
99 additions
and
36 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,44 +1,107 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Gorilla Game</title> | ||
| <link rel="stylesheet" href="styles.css"> | ||
| </head> | ||
| <body> | ||
| <canvas id="gameCanvas"></canvas> | ||
| <div id="playerInfo"> | ||
| <div id="player1"> | ||
| <h3>Player 1</h3> | ||
| <p>Angle: <span id="angle1">0</span>°</p> | ||
| <p>Power: <span id="power1">0</span></p> | ||
| <p>Score: <span id="score1">0</span></p> | ||
| </div> | ||
| <div id="player2"> | ||
| <h3>Player 2</h3> | ||
| <p>Angle: <span id="angle2">0</span>°</p> | ||
| <p>Power: <span id="power2">0</span></p> | ||
| <p>Score: <span id="score2">0</span></p> | ||
| </div> | ||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <title>Gorillas</title> | ||
| <link rel="stylesheet" href="style.css" /> | ||
| <script src="script.js" defer></script> | ||
| </head> | ||
| <body> | ||
| <canvas id="game"></canvas> | ||
|
|
||
| <svg width="200" height="250" id="windmill"> | ||
| <defs> | ||
| <path id="arm" d="M -7 -20 C -7 -10 7 -10 7 -20 L 2 -80 L -2 -80" /> | ||
| </defs> | ||
| <g transform="translate(100, 100)"> | ||
| <g id="windmill-head"> | ||
| <circle r="8"></circle> | ||
| <use href="#arm" /> | ||
| <use href="#arm" transform="rotate(+120)" /> | ||
| <use href="#arm" transform="rotate(-120)" /> | ||
| </g> | ||
| </g> | ||
| <path | ||
| transform="translate(100, 0)" | ||
| d="M -7 250 L 7 250 L 3 115 L -3 115" | ||
| ></path> | ||
| </svg> | ||
|
|
||
| <div id="wind-info">Wind Speed: <span id="wind-speed">0</span></div> | ||
|
|
||
| <div id="info-left"> | ||
| <h3><span class="name">Player</span></h3> | ||
| <p>Angle: <span class="angle">0</span>°</p> | ||
| <p>Velocity: <span class="velocity">0</span></p> | ||
| </div> | ||
| <div id="gameInfo"> | ||
| <p>Wind: <span id="windSpeed">0</span> km/h</p> | ||
| <p>Current Player: <span id="currentPlayer">1</span></p> | ||
|
|
||
| <div id="info-right"> | ||
| <h3><span class="name">Computer</span></h3> | ||
| <p>Angle: <span class="angle">0</span>°</p> | ||
| <p>Velocity: <span class="velocity">0</span></p> | ||
| </div> | ||
| <div id="controls"> | ||
| <button id="newGameBtn">New Game</button> | ||
| <input type="range" id="angleSlider" min="0" max="90" value="45"> | ||
| <input type="range" id="powerSlider" min="0" max="100" value="50"> | ||
| <button id="throwBtn">Throw</button> | ||
|
|
||
| <div id="instructions"> | ||
| <h3 id="game-mode">Player vs. Computer</h3> | ||
| <h1>Drag the bomb to aim!</h1> | ||
| </div> | ||
| <div id="gameOverModal" class="modal"> | ||
| <div class="modal-content"> | ||
| <h2>Game Over</h2> | ||
| <p>Winner: <span id="winner"></span></p> | ||
| <button id="restartBtn">Restart Game</button> | ||
|
|
||
| <div id="bomb-grab-area"></div> | ||
|
|
||
| <div id="congratulations"> | ||
| <h1><span id="winner">?</span> won!</h1> | ||
| <p> | ||
| Game ended | ||
| </p> | ||
| <div class="dropdown"> | ||
| <button class="dropbtn">New Game</button> | ||
| <div class="dropdown-content"> | ||
| <a href="#" class="single-player">Single Player</a> | ||
| <a href="#" class="two-players">Two-Player</a> | ||
| <a href="#" class="auto-play">Autoplay</a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <script src="script.js"></script> | ||
| </body> | ||
|
|
||
| <div id="settings"> | ||
| <div class="dropdown"> | ||
| <button class="dropbtn">New Game</button> | ||
| <div class="dropdown-content"> | ||
| <a href="#" class="single-player">Single Player</a> | ||
| <a href="#" class="two-players">Two-Players</a> | ||
| <a href="#" class="auto-play">Autoplay</a> | ||
| </div> | ||
| </div> | ||
|
|
||
| <button id="color-mode">Dark Mode</button> | ||
|
|
||
|
|
||
|
|
||
| <button id="fullscreen" onclick="toggleFullscreen()"> | ||
| <svg width="30" height="30"> | ||
| <path | ||
| id="enter-fullscreen" | ||
| stroke="white" | ||
| stroke-width="3" | ||
| fill="none" | ||
| d=" | ||
| M 10, 2 L 2,2 L 2, 10 | ||
| M 20, 2 L 28,2 L 28, 10 | ||
| M 28, 20 L 28,28 L 20, 28 | ||
| M 10, 28 L 2,28 L 2, 20" | ||
| /> | ||
| <path | ||
| id="exit-fullscreen" | ||
| stroke="transparent" | ||
| stroke-width="3" | ||
| fill="none" | ||
| d=" | ||
| M 10, 2 L 10,10 L 2, 10 | ||
| M 20, 2 L 20,10 L 28, 10 | ||
| M 28, 20 L 20,20 L 20, 28 | ||
| M 10, 28 L 10,20 L 2, 20" | ||
| /> | ||
| </svg> | ||
| </button> | ||
| </body> | ||
| </html> |