API tools faq
paste
Advertisement
callmejeki

gimm

callmejeki
Apr 20th, 2024
19
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.84 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Hexagon Game</title>
  6. <style>
  7. #welcomeScreen {
  8. text-align: center;
  9. }
  10. #startButton {
  11. margin-top: 20px;
  12. }
  13. #instructions {
  14. float: left;
  15. width: 50%;
  16. margin-top: 50px;
  17. }
  18. </style>
  19. </head>
  20. <body>
  21. <div id="welcomeScreen">
  22. <h2>Welcome to Hexagon Game</h2>
  23.  
  24. <label for="player1Name">Player 1 Name:</label>
  25. <input type="text" id="player1Name" required><br><br>
  26. <label for="player2Name">Player 2 Name (or Bot):</label>
  27. <input type="text" id="player2Name"><br><br>
  28. <label for="level">Choose Level:</label>
  29. <select id="level">
  30. <option value="easy">Easy</option>
  31. <option value="medium">Medium</option>
  32. <option value="hard">Hard</option>
  33. </select><br><br>
  34. <!-- Disable start button initially -->
  35. <button id="startButton" disabled>Start Game</button>
  36. </div>
  37.  
  38. <canvas id="canvas" width="800" height="700" style="display: none;"></canvas>
  39. <h2 id="name1" style="display: none;"><span id="player1Info"> </span>: <span id="player1Total">0</span></h2>
  40. <h2 id="name2" style="display: none;"><span id="player2Info"> </span>: <span id="player2Total">0</span></h2>
  41.  
  42. <script>
  43. const welcomeScreen = document.getElementById('welcomeScreen');
  44. const startButton = document.getElementById('startButton');
  45. const canvas = document.getElementById('canvas');
  46. const name1 = document.getElementById('name1');
  47. const name2 = document.getElementById('name2');
  48. const ctx = canvas.getContext('2d');
  49.  
  50. const levels = {
  51. easy: { disabledHexagons: 4 },
  52. medium: { disabledHexagons: 6 },
  53. hard: { disabledHexagons: 8 }
  54. };
  55.  
  56. startButton.addEventListener('click', startGame);
  57.  
  58. function startGame() {
  59. // Hide welcome screen
  60. welcomeScreen.style.display = 'none';
  61. // Show canvas
  62. canvas.style.display = 'block';
  63. name1.style.display = 'block';
  64. name2.style.display = 'block';
  65. // // Start game logic
  66. init();
  67. }
  68.  
  69. // Validation logic
  70. const player1NameInput = document.getElementById('player1Name');
  71. const levelSelect = document.getElementById('level');
  72. player1NameInput.addEventListener('input', validateInput);
  73. levelSelect.addEventListener('change', validateInput);
  74.  
  75. function validateInput() {
  76. const player1Name = player1NameInput.value.trim();
  77. const selectedLevel = levelSelect.value;
  78. startButton.disabled = !(player1Name && selectedLevel);
  79. }
  80.  
  81. // Game initialization
  82. const a = 2 * Math.PI / 6;
  83. const r = 40; // Decreased radius to fit more hexagons
  84. let numRows = 8; // Number of rows
  85. let numCols = 10; // Number of columns
  86. const yOffset = r * Math.sin(a); // Y offset between rows
  87. let hexagons = [];
  88. let player1Total = 0;
  89. let player2Total = 0;
  90. let currentPlayer = 1; // Player 1 starts first
  91.  
  92. const player1TotalElement = document.getElementById('player1Total');
  93. const player2TotalElement = document.getElementById('player2Total');
  94.  
  95. document.getElementById("startButton").addEventListener("click", function() {
  96. // Get input values
  97. const player1Name = document.getElementById("player1Name").value;
  98. const player2Name = document.getElementById("player2Name").value;
  99.  
  100. // Show input values in h2 elements
  101. document.getElementById("player1Info").innerText = player1Name;
  102. document.getElementById("player2Info").innerText = player2Name || "Bot";
  103. });
  104.  
  105. // Initialize game
  106. function init() {
  107. // Calculate canvas width and height based on number of rows and columns
  108. const canvasWidth = numCols * r * Math.sqrt(3) + r * Math.sqrt(3) / 2;
  109. const canvasHeight = numRows * r * 1.5 + r * 0.5; // Added extra height for bottom margin
  110. canvas.width = canvasWidth;
  111. canvas.height = canvasHeight;
  112. drawGrid(canvasWidth, canvasHeight);
  113. canvas.addEventListener('click', handleClick);
  114. }
  115.  
  116. // Draw hexagonal grid
  117. function drawGrid(width, height) {
  118. hexagons = []; // Reset hexagons array
  119.  
  120. // Calculate initial position to center the hexagons
  121. const startX = (width - (numCols * r * Math.sqrt(3) + r * Math.sqrt(3) / 2)) / 2;
  122. const startY = (height - (numRows * r * 1 + r * 1)) / 2;
  123.  
  124. for (let row = 0; row < numRows; row++) {
  125. for (let col = 0; col < numCols; col++) {
  126. const x = startX + col * r * Math.sqrt(3) + (row % 2 === 1 ? r * Math.sqrt(3) / 2 : 0);
  127. const y = startY + row * r * 1.5;
  128. drawHexagon(x, y);
  129. hexagons.push({ x, y, active: true, clickedBy: 0, number: 0 }); // Set default status active, clicked by player, and number
  130. }
  131. }
  132.  
  133. // Disable hexagons based on selected level
  134. const level = levelSelect.value;
  135. const disabledHexagons = levels[level].disabledHexagons;
  136. for (let i = 0; i < disabledHexagons; i++) {
  137. const randomIndex = Math.floor(Math.random() * hexagons.length);
  138. hexagons[randomIndex].active = false;
  139. drawDisabledHexagon(hexagons[randomIndex].x, hexagons[randomIndex].y);
  140. }
  141. }
  142.  
  143. // Draw a single hexagon
  144. function drawHexagon(x, y, rotationAngle = Math.PI / 2) {
  145. ctx.beginPath();
  146. for (let i = 0; i < 6; i++) {
  147. const angle = a * i + rotationAngle; // Start angle from the top side
  148. ctx.lineTo(x + r * Math.cos(angle), y + r * Math.sin(angle));
  149. }
  150. ctx.closePath();
  151. ctx.stroke();
  152. }
  153.  
  154. // Draw a disabled hexagon
  155. function drawDisabledHexagon(x, y, rotationAngle = Math.PI / 2) {
  156. ctx.beginPath();
  157. ctx.fillStyle = "#c0c0c0"; // Gray color for disabled hexagons
  158. for (let i = 0; i < 6; i++) {
  159. const angle = a * i + rotationAngle; // Start angle from the top side
  160. ctx.lineTo(x + r * Math.cos(angle), y + r * Math.sin(angle));
  161. }
  162. ctx.closePath();
  163. ctx.fill();
  164. ctx.stroke();
  165. }
  166.  
  167. // Handle click event on hexagons
  168. function handleClick(event) {
  169. const rect = canvas.getBoundingClientRect();
  170. const mouseX = event.clientX - rect.left;
  171. const mouseY = event.clientY - rect.top;
  172.  
  173. hexagons.forEach(hexagon => {
  174. if (hexagon.active && isPointInHexagon(mouseX, mouseY, hexagon.x, hexagon.y)) {
  175. // Check if the clicked hexagon is empty
  176. if (hexagon.clickedBy === 0) {
  177. // Place a random number in the hexagon
  178. hexagon.number = Math.floor(Math.random() * 20) + 1;
  179. // Determine the color based on the current player
  180. ctx.fillStyle = currentPlayer === 1 ? "red" : "blue";
  181. // Fill the hexagon with the player's color
  182. ctx.beginPath();
  183. for (let i = 0; i < 6; i++) {
  184. const angle = a * i + Math.PI / 2; // Start angle from the top side
  185. ctx.lineTo(hexagon.x + r * Math.cos(angle), hexagon.y + r * Math.sin(angle));
  186. }
  187. ctx.closePath();
  188. ctx.fill();
  189. ctx.stroke();
  190. // Draw the number inside the hexagon
  191. ctx.fillStyle = "white";
  192. ctx.font = "16px Arial";
  193. ctx.fillText(hexagon.number, hexagon.x - 10, hexagon.y + 5);
  194. // Update total score for the current player
  195. if (currentPlayer === 1) {
  196. player1Total += hexagon.number;
  197. player1TotalElement.textContent = player1Total;
  198. } else {
  199. player2Total += hexagon.number;
  200. player2TotalElement.textContent = player2Total;
  201. }
  202. // Switch to the next player
  203. currentPlayer = currentPlayer === 1 ? 2 : 1;
  204. }
  205. }
  206. });
  207. }
  208.  
  209. // Function to check if a point is inside a hexagon
  210. function isPointInHexagon(x, y, hexX, hexY) {
  211. // Algorithm to determine if a point is inside a hexagon
  212. const dx = x - hexX;
  213. const dy = y - hexY;
  214. return (Math.abs(dx) < r && Math.abs(dy) < r * Math.sin(a) && Math.abs(dy) < r * Math.sin(Math.PI / 3) - Math.sin(a) * dx / 2);
  215. }
  216. </script>
  217.  
  218. </body>
  219. </html>
  220.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!