API tools faq
paste
Advertisement
callmejeki

egsgsgsg

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