Интерактивное меня работает под любой проект ( базовая версия)

    This site uses cookies. By continuing to browse this site, you are agreeing to our Cookie Policy.

    • Интерактивное меня работает под любой проект ( базовая версия)

      Выкладываю полный код меню где юзер сам себе все настроит, это первый вариант я не много переделал под себя убрал горизонтальную развертку в ней смысла нет, так как юзер сам настраивает, а сброс настроек меню вынес в настройки юзеру.. картинки символы меню делаем самостоятельно в js это не сложно , если возникнут трудности с этим то помогу

      Source Code

      1. <!-- Панель управления внизу экрана -->
      2. <div class="control-panel">
      3. <!-- Основное — треугольник вверх -->
      4. <button class="tab-button" data-tab="main" id="tabMain">
      5. <svg viewBox="0 0 24 24">
      6. <path d="M12 4 L22 20 L2 20 Z" fill="#6cf" stroke="#aff" stroke-width="1.5"/>
      7. </svg>
      8. </button>
      9. <!-- Система — треугольник вниз -->
      10. <button class="tab-button" data-tab="system" id="tabSystem">
      11. <svg viewBox="0 0 24 24">
      12. <path d="M12 20 L22 4 L2 4 Z" fill="#6cf" stroke="#aff" stroke-width="1.5"/>
      13. </svg>
      14. </button>
      15. <!-- Кнопка смены ориентации -->
      16. <button class="orient-button" id="orientToggle" title="сменить ориентацию">⟲</button>
      17. </div>
      19. <!-- Контейнер для пунктов меню -->
      20. <div id="menuContainer" class="menu-container"></div>
      22. <div class="sci-fi-overlay"></div>
      Display All
      ниже прикреплен файл js menu_left.zip в нем находятся так же ссылки на пункты меню

      The post was edited 3 times, last by Coder ().

    • меню ставится где угодно по элементам как захочется и где удобно, в своем проекте я сделал все элементы под таким видом все что есть в игре сам юзер располагает там где удобно ему + есть возможность простого редактирования в настройках юзера световой гаммы .. выкладываю от имени DENPUBG базовую версию - так как я это и есть , но к сожалению мою почту заблокировали и нет возможности попасть под своим ником надеюсь администрация восстановит доступ, кстати 2 д здания на подходе скоро поделюсь и ими , один момент нужна будет помощь по галактике как в xcraft я ее сделал , но есть ряд моментов где не справится так как структуру проекта еще не всю изучил . и да я пошел путем клиент-сервер .. так как часть проекта будет скачана юзером и играть возможно только через лаучер что облегчит нагрузку на базу данных , так как много что будет повешено на стороне клиента ... С уважением к сообществу.. по сотрудничеству в области доделки галактики 2д xcraft, но более легкая и быстрая версия чем у них обращайтесь в личку , есть ряд не решенных моментов с подключением миссий, галактика полностью интерактивная и выполнена на js в благодарность за помощь в доработке рабочую базовую версию отдам в знак благодарности

      The post was edited 5 times, last by Coder ().

    • забыл приложить css

      Source Code

      1. body {
      2. background: radial-gradient(circle at 80% 20%, #0c1f2e, #020812);
      3. min-height: 100vh;
      4. font-family: 'Segoe UI', 'Arial', system-ui, sans-serif;
      5. overflow: hidden;
      6. position: relative;
      7. }
      9. /* Сетка Sci-Fi линий */
      10. body::before {
      11. content: "";
      12. position: absolute;
      13. inset: 0;
      14. background-image:
      15. linear-gradient(rgba(0, 255, 255, 0.03) 1px, transparent 1px),
      16. linear-gradient(90deg, rgba(0, 255, 255, 0.03) 1px, transparent 1px);
      17. background-size: 30px 30px;
      18. pointer-events: none;
      19. z-index: 0;
      20. }
      22. html{cursor:grab;}
      23. html:pointer{cursor:pointer;}
      24. html:active{cursor:grabbing;}
      25. .clik:hover {cursor:pointer;}
      27. /* Панель управления внизу экрана */
      28. .control-panel {
      29. position: fixed;
      30. bottom: 30px;
      31. left: 50%;
      32. transform: translateX(-50%);
      33. display: flex;
      34. gap: 25px;
      35. background: transparent;
      36. border: none;
      37. padding: 15px 30px;
      38. z-index: 1000;
      39. filter: drop-shadow(0 0 20px cyan);
      40. }
      42. /* Кнопки-табы в виде треугольников */
      43. .tab-button {
      44. background: transparent;
      45. border: none;
      46. width: 3.5vw;
      47. height: 3.5vw;
      48. min-width: 45px;
      49. min-height: 45px;
      50. display: flex;
      51. align-items: center;
      52. justify-content: center;
      53. cursor: pointer;
      54. filter: drop-shadow(0 0 8px cyan);
      55. transition: transform 0.2s, filter 0.2s;
      56. padding: 0;
      57. }
      59. .tab-button svg {
      60. width: 100%;
      61. height: 100%;
      62. display: block;
      63. }
      65. .tab-button:hover {
      66. transform: scale(1.2);
      67. filter: drop-shadow(0 0 12px white) drop-shadow(0 0 8px lime);
      68. }
      70. .tab-button.active-tab svg {
      71. filter: drop-shadow(0 0 12px #0f0) drop-shadow(0 0 6px #0f0);
      72. }
      74. .tab-button.active-tab path {
      75. fill: #00ffaa !important;
      76. stroke: white !important;
      77. }
      79. /* Кнопка смены ориентации */
      80. .orient-button {
      81. background: transparent;
      82. border: none;
      83. color: #aff;
      84. padding: 5px 20px;
      85. font-size: 2rem;
      86. cursor: pointer;
      87. transition: 0.2s;
      88. filter: drop-shadow(0 0 10px cyan);
      89. line-height: 1;
      90. text-shadow: 0 0 10px cyan;
      91. }
      93. .orient-button:hover {
      94. transform: scale(1.2);
      95. filter: drop-shadow(0 0 15px white) drop-shadow(0 0 10px lime);
      96. color: white;
      97. }
      99. /* Контейнер для пунктов меню */
      100. .menu-container {
      101. position: absolute;
      102. width: fit-content;
      103. height: fit-content;
      105. z-index: 100;
      106. background: transparent;
      107. padding: 20px;
      108. border-radius: 10px;
      109. pointer-events: auto;
      110. cursor: grab;
      111. }
      113. .menu-container:active {
      114. cursor: grabbing;
      115. }
      117. /* Визуальная подсказка области захвата */
      118. .menu-container::before {
      119. content: '';
      120. position: absolute;
      121. top: -5px;
      122. left: -5px;
      123. right: -5px;
      124. bottom: -5px;
      125. border: 1px dashed rgba(0, 255, 255, 0.3);
      126. border-radius: 15px;
      127. pointer-events: none;
      128. opacity: 0.3;
      129. }
      131. /* Каждый пункт — ссылка в виде квадрата */
      132. .menu-item {
      133. position: absolute;
      134. width: 2vw;
      135. height: 2vw;
      136. min-width: 45px;
      137. min-height: 45px;
      138. background: rgba(10, 25, 35, 0.9);
      139. border: .1vw solid #5fdfff;
      140. border-radius: 0;
      142. cursor: default;
      143. backdrop-filter: blur(2px);
      144. z-index: 10;
      145. pointer-events: auto;
      146. transition: transform 0.15s ease-out, background 0.2s, box-shadow 0.2s;
      147. display: block;
      148. text-decoration: none;
      149. will-change: left, top;
      150. }
      152. .menu-item.dragging {
      153. opacity: 0.9;
      154. z-index: 10000;
      155. transition: none;
      156. }
      158. .menu-item.dragging {
      160. border-color: #ff0000 !important;
      161. box-shadow: 0 0 0px #ff0000 !important;
      162. transform: none !important; /* Отключаем увеличение */
      163. opacity: 0.9;
      164. z-index: 10000;
      165. transition: none;
      166. }
      168. .menu-item.active {
      169. background: #2ecc7147;
      170. border-color: #aaffaa;
      171. }
      173. /* Декоративный Sci-Fi обвод */
      174. .sci-fi-overlay {
      175. position: fixed;
      176. top:0; left:0; width:100%; height:100%;
      177. pointer-events: none;
      178. border: 3px solid rgba(0, 255, 255, 0.15);
      179. box-shadow: inset 0 0 70px #0ff2, 0 0 40px #0ff3;
      180. z-index: 300;
      181. }
      Display All