API tools faq
paste
Advertisement
Anukun_Lucifer

Code เกมขับยานสำรวจอวกาศ 3 มิติ

Anukun_Lucifer
Jun 7th, 2025
183
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 53.24 KB | TV | 0 0
raw download clone embed print report
  1. body {
  2.         margin: 0;
  3.         overflow: hidden;
  4.         font-family: 'Prompt', sans-serif;
  5.     }
  6.    
  7.     #gameCanvas {
  8.         position: fixed;
  9.         top: 0;
  10.         left: 0;
  11.         width: 100%;
  12.         height: 100%;
  13.     }
  14.    
  15.     .start-screen {
  16.         position: fixed;
  17.         top: 0;
  18.         left: 0;
  19.         width: 100%;
  20.         height: 100%;
  21.         background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  22.         display: flex;
  23.         flex-direction: column;
  24.         justify-content: center;
  25.         align-items: center;
  26.         z-index: 100;
  27.     }
  28.    
  29.     .planet-info {
  30.         position: fixed;
  31.         bottom: 20px;
  32.         left: 20px;
  33.         background: rgba(15, 23, 42, 0.8);
  34.         border-radius: 10px;
  35.         padding: 15px;
  36.         color: white;
  37.         max-width: 300px;
  38.         transform: translateY(150%);
  39.         transition: transform 0.3s ease-out;
  40.         z-index: 10;
  41.     }
  42.    
  43.     .planet-info.visible {
  44.         transform: translateY(0);
  45.     }
  46.    
  47.     .controls-info {
  48.         position: fixed;
  49.         top: 20px;
  50.         right: 20px;
  51.         background: rgba(15, 23, 42, 0.8);
  52.         border-radius: 10px;
  53.         padding: 15px;
  54.         color: white;
  55.         z-index: 10;
  56.     }
  57.    
  58.     .orbit-info {
  59.         position: fixed;
  60.         top: 50%;
  61.         left: 50%;
  62.         transform: translate(-50%, -50%);
  63.         background: rgba(15, 23, 42, 0.9);
  64.         border-radius: 10px;
  65.         padding: 20px;
  66.         color: white;
  67.         max-width: 500px;
  68.         z-index: 20;
  69.         display: none;
  70.     }
  71.    
  72.     .mini-map {
  73.         position: fixed;
  74.         bottom: 20px;
  75.         right: 20px;
  76.         width: 150px;
  77.         height: 150px;
  78.         background: rgba(15, 23, 42, 0.8);
  79.         border-radius: 50%;
  80.         z-index: 10;
  81.         overflow: hidden;
  82.     }
  83.    
  84.     .star {
  85.         position: absolute;
  86.         background-color: white;
  87.         border-radius: 50%;
  88.     }
  89.    
  90.     .button-pulse {
  91.         animation: pulse 2s infinite;
  92.     }
  93.    
  94.     @keyframes pulse {
  95.         0% {
  96.             box-shadow: 0 0 0 0 rgba(79, 209, 197, 0.7);
  97.         }
  98.         70% {
  99.             box-shadow: 0 0 0 15px rgba(79, 209, 197, 0);
  100.         }
  101.         100% {
  102.             box-shadow: 0 0 0 0 rgba(79, 209, 197, 0);
  103.         }
  104.     }
  105.    
  106.     .gravity-indicator {
  107.         position: fixed;
  108.         top: 20px;
  109.         left: 20px;
  110.         background: rgba(15, 23, 42, 0.8);
  111.         border-radius: 10px;
  112.         padding: 10px 15px;
  113.         color: white;
  114.         z-index: 10;
  115.         display: none;
  116.     }
  117.    
  118.     .gravity-indicator.active {
  119.         display: block;
  120.     }
  121.    
  122.     .gravity-bar {
  123.         width: 100%;
  124.         height: 10px;
  125.         background: rgba(255, 255, 255, 0.2);
  126.         border-radius: 5px;
  127.         margin-top: 5px;
  128.         overflow: hidden;
  129.     }
  130.    
  131.     .gravity-bar-fill {
  132.         height: 100%;
  133.         background: linear-gradient(90deg, #4fd1c5 0%, #3182ce 100%);
  134.         border-radius: 5px;
  135.         width: 0%;
  136.         transition: width 0.3s ease;
  137.     }
  138.    
  139.     .boost-button {
  140.         position: fixed;
  141.         bottom: 20px;
  142.         left: 50%;
  143.         transform: translateX(-50%);
  144.         background: linear-gradient(90deg, #f43f5e 0%, #ec4899 100%);
  145.         color: white;
  146.         border: none;
  147.         border-radius: 50px;
  148.         padding: 12px 30px;
  149.         font-size: 18px;
  150.         font-weight: 600;
  151.         cursor: pointer;
  152.         z-index: 10;
  153.         transition: all 0.3s ease;
  154.         box-shadow: 0 4px 10px rgba(236, 72, 153, 0.5);
  155.     }
  156.    
  157.     .boost-button:hover {
  158.         transform: translateX(-50%) translateY(-3px);
  159.         box-shadow: 0 6px 15px rgba(236, 72, 153, 0.6);
  160.     }
  161.    
  162.     .boost-button:active {
  163.         transform: translateX(-50%) translateY(-1px);
  164.     }
  165.    
  166.     .boost-button.boosting {
  167.         background: linear-gradient(90deg, #f97316 0%, #f43f5e 100%);
  168.         animation: boosting 0.5s infinite alternate;
  169.     }
  170.    
  171.     @keyframes boosting {
  172.         0% {
  173.             box-shadow: 0 0 15px rgba(249, 115, 22, 0.7);
  174.         }
  175.         100% {
  176.             box-shadow: 0 0 25px rgba(244, 63, 94, 0.9);
  177.         }
  178.     }
  179.    
  180.     .boost-meter {
  181.         position: fixed;
  182.         bottom: 80px;
  183.         left: 50%;
  184.         transform: translateX(-50%);
  185.         width: 200px;
  186.         height: 8px;
  187.         background: rgba(255, 255, 255, 0.2);
  188.         border-radius: 4px;
  189.         overflow: hidden;
  190.         z-index: 10;
  191.     }
  192.    
  193.     .boost-meter-fill {
  194.         height: 100%;
  195.         background: linear-gradient(90deg, #f43f5e 0%, #ec4899 100%);
  196.         border-radius: 4px;
  197.         width: 100%;
  198.         transition: width 0.3s ease;
  199.     }
  200.    
  201.     .boost-meter-fill.depleting {
  202.         background: linear-gradient(90deg, #f97316 0%, #f43f5e 100%);
  203.     }
  204.    
  205.     .boost-meter-fill.recharging {
  206.         background: linear-gradient(90deg, #4ade80 0%, #2dd4bf 100%);
  207.     }
  208.    
  209.     .engine-glow {
  210.         animation: glow 1s infinite alternate;
  211.     }
  212.    
  213.     @keyframes glow {
  214.         0% {
  215.             opacity: 0.5;
  216.             scale: 0.9;
  217.         }
  218.         100% {
  219.             opacity: 0.8;
  220.             scale: 1.1;
  221.         }
  222.     }
  223.    
  224.     .boost-glow {
  225.         animation: boostGlow 0.2s infinite alternate;
  226.     }
  227.    
  228.     @keyframes boostGlow {
  229.         0% {
  230.             opacity: 0.7;
  231.             scale: 1.2;
  232.         }
  233.         100% {
  234.             opacity: 1;
  235.             scale: 1.5;
  236.         }
  237.     }
  238. </style>
  239. <div class="start-screen" id="startScreen">
  240.     <div class="relative w-full h-full">
  241.         <!-- Stars background -->
  242.         <div id="stars" class="absolute inset-0 overflow-hidden"></div>
  243.        
  244.         <div class="absolute inset-0 flex flex-col items-center justify-center">
  245.             <div class="text-center">
  246.                 <h1 class="text-5xl md:text-7xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-teal-400 to-blue-500 mb-6">นักสำรวจระบบสุริยะ</h1>
  247.                 <p class="text-xl md:text-2xl text-gray-300 mb-8">ผจญภัยไปในอวกาศและสำรวจดาวเคราะห์ในระบบสุริยะของเรา</p>
  248.                
  249.                 <button id="startButton" class="bg-gradient-to-r from-teal-500 to-blue-600 text-white text-xl font-medium py-3 px-8 rounded-full hover:from-teal-600 hover:to-blue-700 transition-all duration-300 button-pulse">
  250.                     เริ่มการสำรวจ
  251.                 </button>
  252.                
  253.                 <div class="mt-12 text-gray-400">
  254.                     <p class="mb-2">การควบคุม:</p>
  255.                     <div class="grid grid-cols-2 gap-4 max-w-md mx-auto text-sm">
  256.                         <div class="bg-gray-800 p-3 rounded-lg">
  257.                             <span class="inline-block bg-gray-700 px-2 py-1 rounded mr-2">W</span> เคลื่อนที่ไปข้างหน้า
  258.                         </div>
  259.                         <div class="bg-gray-800 p-3 rounded-lg">
  260.                             <span class="inline-block bg-gray-700 px-2 py-1 rounded mr-2">S</span> เคลื่อนที่ถอยหลัง
  261.                         </div>
  262.                         <div class="bg-gray-800 p-3 rounded-lg">
  263.                             <span class="inline-block bg-gray-700 px-2 py-1 rounded mr-2">A</span> หมุนซ้าย
  264.                         </div>
  265.                         <div class="bg-gray-800 p-3 rounded-lg">
  266.                             <span class="inline-block bg-gray-700 px-2 py-1 rounded mr-2">D</span> หมุนขวา
  267.                         </div>
  268.                         <div class="bg-gray-800 p-3 rounded-lg">
  269.                             <span class="inline-block bg-gray-700 px-2 py-1 rounded mr-2">Q</span> เคลื่อนที่ขึ้น
  270.                         </div>
  271.                         <div class="bg-gray-800 p-3 rounded-lg">
  272.                             <span class="inline-block bg-gray-700 px-2 py-1 rounded mr-2">E</span> เคลื่อนที่ลง
  273.                         </div>
  274.                         <div class="bg-gray-800 p-3 rounded-lg">
  275.                             <span class="inline-block bg-gray-700 px-2 py-1 rounded mr-2">I</span> แสดงข้อมูลวงโคจร
  276.                         </div>
  277.                         <div class="bg-gray-800 p-3 rounded-lg">
  278.                             <span class="inline-block bg-gray-700 px-2 py-1 rounded mr-2">SPACE</span> เร่งความเร็ว
  279.                         </div>
  280.                     </div>
  281.                 </div>
  282.             </div>
  283.         </div>
  284.     </div>
  285. </div>
  286.  
  287. <div class="planet-info" id="planetInfo">
  288.     <h2 class="text-xl font-bold text-teal-400 mb-2" id="planetName"></h2>
  289.     <p id="planetDescription" class="text-sm"></p>
  290.     <div class="mt-3 pt-3 border-t border-gray-600">
  291.         <div class="grid grid-cols-2 gap-2 text-xs">
  292.             <div>
  293.                 <span class="text-gray-400">รัศมี:</span>
  294.                 <span id="planetRadius" class="text-white"></span>
  295.             </div>
  296.             <div>
  297.                 <span class="text-gray-400">ระยะห่างจากดวงอาทิตย์:</span>
  298.                 <span id="planetDistance" class="text-white"></span>
  299.             </div>
  300.             <div>
  301.                 <span class="text-gray-400">อุณหภูมิเฉลี่ย:</span>
  302.                 <span id="planetTemp" class="text-white"></span>
  303.             </div>
  304.             <div>
  305.                 <span class="text-gray-400">แรงโน้มถ่วง:</span>
  306.                 <span id="planetGravity" class="text-white"></span>
  307.             </div>
  308.         </div>
  309.     </div>
  310. </div>
  311.  
  312. <div class="controls-info">
  313.     <div class="text-sm">
  314.         <div class="mb-2"><span class="inline-block bg-gray-700 px-2 py-1 rounded mr-2">W</span> เคลื่อนที่ไปข้างหน้า</div>
  315.         <div class="mb-2"><span class="inline-block bg-gray-700 px-2 py-1 rounded mr-2">S</span> เคลื่อนที่ถอยหลัง</div>
  316.         <div class="mb-2"><span class="inline-block bg-gray-700 px-2 py-1 rounded mr-2">A</span> หมุนซ้าย</div>
  317.         <div class="mb-2"><span class="inline-block bg-gray-700 px-2 py-1 rounded mr-2">D</span> หมุนขวา</div>
  318.         <div class="mb-2"><span class="inline-block bg-gray-700 px-2 py-1 rounded mr-2">Q</span> เคลื่อนที่ขึ้น</div>
  319.         <div class="mb-2"><span class="inline-block bg-gray-700 px-2 py-1 rounded mr-2">E</span> เคลื่อนที่ลง</div>
  320.         <div class="mb-2"><span class="inline-block bg-gray-700 px-2 py-1 rounded mr-2">I</span> แสดงข้อมูลวงโคจร</div>
  321.         <div><span class="inline-block bg-gray-700 px-2 py-1 rounded mr-2">SPACE</span> เร่งความเร็ว</div>
  322.     </div>
  323. </div>
  324.  
  325. <div class="orbit-info" id="orbitInfo">
  326.     <div class="flex justify-between items-center mb-4">
  327.         <h2 class="text-xl font-bold text-teal-400">กลไกการโคจรและระยะทาง</h2>
  328.         <button id="closeOrbitInfo" class="text-gray-400 hover:text-white">
  329.             <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  330.                 <line x1="18" y1="6" x2="6" y2="18"></line>
  331.                 <line x1="6" y1="6" x2="18" y2="18"></line>
  332.             </svg>
  333.         </button>
  334.     </div>
  335.     <div class="space-y-4">
  336.         <p>ดาวเคราะห์โคจรรอบดวงอาทิตย์ในวงรีเนื่องจากแรงโน้มถ่วง โดยดาวเคราะห์ที่อยู่ใกล้ดวงอาทิตย์จะโคจรเร็วกว่าดาวเคราะห์ที่อยู่ไกล</p>
  337.        
  338.         <div class="bg-gray-800 p-3 rounded-lg">
  339.             <h3 class="font-medium text-teal-400 mb-2">ระยะทางเฉลี่ยจากดวงอาทิตย์:</h3>
  340.             <ul class="space-y-1 text-sm">
  341.                 <li>ดาวพุธ: 57.9 ล้านกิโลเมตร (0.39 AU)</li>
  342.                 <li>ดาวศุกร์: 108.2 ล้านกิโลเมตร (0.72 AU)</li>
  343.                 <li>โลก: 149.6 ล้านกิโลเมตร (1.00 AU)</li>
  344.                 <li>ดาวอังคาร: 227.9 ล้านกิโลเมตร (1.52 AU)</li>
  345.                 <li>ดาวพฤหัสบดี: 778.5 ล้านกิโลเมตร (5.20 AU)</li>
  346.                 <li>ดาวเสาร์: 1,434 ล้านกิโลเมตร (9.58 AU)</li>
  347.                 <li>ดาวยูเรนัส: 2,871 ล้านกิโลเมตร (19.22 AU)</li>
  348.                 <li>ดาวเนปจูน: 4,495 ล้านกิโลเมตร (30.05 AU)</li>
  349.             </ul>
  350.             <p class="text-xs text-gray-400 mt-2">AU (Astronomical Unit) คือหน่วยวัดระยะทางในอวกาศ โดย 1 AU เท่ากับระยะทางเฉลี่ยจากโลกถึงดวงอาทิตย์</p>
  351.         </div>
  352.        
  353.         <div class="bg-gray-800 p-3 rounded-lg">
  354.             <h3 class="font-medium text-teal-400 mb-2">กฎของเคปเลอร์:</h3>
  355.             <ol class="list-decimal list-inside space-y-1 text-sm">
  356.                 <li>วงโคจรของดาวเคราะห์เป็นวงรี โดยมีดวงอาทิตย์อยู่ที่จุดโฟกัสหนึ่ง</li>
  357.                 <li>เส้นที่ลากจากดวงอาทิตย์ถึงดาวเคราะห์จะกวาดพื้นที่เท่ากันในเวลาที่เท่ากัน</li>
  358.                 <li>กำลังสองของคาบการโคจรแปรผันตรงกับกำลังสามของระยะทางเฉลี่ยจากดวงอาทิตย์</li>
  359.             </ol>
  360.         </div>
  361.     </div>
  362. </div>
  363.  
  364. <div class="mini-map" id="miniMap"></div>
  365.  
  366. <div class="gravity-indicator" id="gravityIndicator">
  367.     <div class="flex justify-between items-center">
  368.         <span class="text-sm font-medium">แรงโน้มถ่วง:</span>
  369.         <span class="text-sm" id="gravityValue">0%</span>
  370.     </div>
  371.     <div class="gravity-bar">
  372.         <div class="gravity-bar-fill" id="gravityBarFill"></div>
  373.     </div>
  374. </div>
  375.  
  376. <button class="boost-button" id="boostButton">เร่งความเร็ว</button>
  377. <div class="boost-meter">
  378.     <div class="boost-meter-fill" id="boostMeterFill"></div>
  379. </div>
  380.  
  381. <script>
  382.     // ข้อมูลดาวเคราะห์
  383.     const planetData = {
  384.         "Sun": {
  385.             name: "ดวงอาทิตย์ (Sun)",
  386.             description: "ดวงอาทิตย์เป็นดาวฤกษ์ที่อยู่ศูนย์กลางของระบบสุริยะ มีมวลคิดเป็น 99.86% ของมวลทั้งหมดในระบบสุริยะ",
  387.             radius: "696,340 กิโลเมตร",
  388.             distance: "0 กิโลเมตร",
  389.             temperature: "5,500°C (พื้นผิว)",
  390.             gravity: "274 m/s²",
  391.             color: 0xffcc00,
  392.             size: 5,
  393.             position: [0, 0, 0],
  394.             orbitRadius: 0,
  395.             orbitSpeed: 0,
  396.             gravityStrength: 100
  397.         },
  398.         "Mercury": {
  399.             name: "ดาวพุธ (Mercury)",
  400.             description: "ดาวเคราะห์ที่เล็กที่สุดและอยู่ใกล้ดวงอาทิตย์มากที่สุดในระบบสุริยะ มีพื้นผิวเต็มไปด้วยหลุมอุกกาบาต",
  401.             radius: "2,440 กิโลเมตร",
  402.             distance: "57.9 ล้านกิโลเมตร",
  403.             temperature: "-173°C ถึง 427°C",
  404.             gravity: "3.7 m/s²",
  405.             color: 0xbebebe,
  406.             size: 0.4,
  407.             position: [10, 0, 0],
  408.             orbitRadius: 10,
  409.             orbitSpeed: 0.04,
  410.             gravityStrength: 10
  411.         },
  412.         "Venus": {
  413.             name: "ดาวศุกร์ (Venus)",
  414.             description: "ดาวเคราะห์ที่มีขนาดและมวลใกล้เคียงกับโลก แต่มีบรรยากาศหนาแน่นที่ประกอบด้วยคาร์บอนไดออกไซด์ ทำให้เกิดปรากฏการณ์เรือนกระจกรุนแรง",
  415.             radius: "6,052 กิโลเมตร",
  416.             distance: "108.2 ล้านกิโลเมตร",
  417.             temperature: "462°C",
  418.             gravity: "8.87 m/s²",
  419.             color: 0xe6e6e6,
  420.             size: 0.9,
  421.             position: [15, 0, 0],
  422.             orbitRadius: 15,
  423.             orbitSpeed: 0.03,
  424.             gravityStrength: 20
  425.         },
  426.         "Earth": {
  427.             name: "โลก (Earth)",
  428.             description: "บ้านของเรา เป็นดาวเคราะห์เพียงดวงเดียวที่ทราบว่ามีสิ่งมีชีวิตอาศัยอยู่ มีน้ำในสถานะของเหลวและบรรยากาศที่เหมาะสมต่อการดำรงชีวิต",
  429.             radius: "6,371 กิโลเมตร",
  430.             distance: "149.6 ล้านกิโลเมตร",
  431.             temperature: "-88°C ถึง 58°C",
  432.             gravity: "9.8 m/s²",
  433.             color: 0x2b82c9,
  434.             size: 1,
  435.             position: [20, 0, 0],
  436.             orbitRadius: 20,
  437.             orbitSpeed: 0.025,
  438.             gravityStrength: 25
  439.         },
  440.         "Mars": {
  441.             name: "ดาวอังคาร (Mars)",
  442.             description: "ดาวเคราะห์สีแดง มีบรรยากาศบางเบาและพื้นผิวที่แห้งแล้ง มีภูเขาไฟที่ใหญ่ที่สุดในระบบสุริยะคือ Olympus Mons",
  443.             radius: "3,390 กิโลเมตร",
  444.             distance: "227.9 ล้านกิโลเมตร",
  445.             temperature: "-153°C ถึง 20°C",
  446.             gravity: "3.71 m/s²",
  447.             color: 0xc1440e,
  448.             size: 0.5,
  449.             position: [25, 0, 0],
  450.             orbitRadius: 25,
  451.             orbitSpeed: 0.02,
  452.             gravityStrength: 15
  453.         },
  454.         "Jupiter": {
  455.             name: "ดาวพฤหัสบดี (Jupiter)",
  456.             description: "ดาวเคราะห์ที่ใหญ่ที่สุดในระบบสุริยะ เป็นดาวเคราะห์ก๊าซยักษ์ที่มีจุดแดงใหญ่ซึ่งเป็นพายุที่มีอายุมากกว่า 300 ปี",
  457.             radius: "69,911 กิโลเมตร",
  458.             distance: "778.5 ล้านกิโลเมตร",
  459.             temperature: "-145°C",
  460.             gravity: "24.79 m/s²",
  461.             color: 0xd8ca9d,
  462.             size: 2.5,
  463.             position: [35, 0, 0],
  464.             orbitRadius: 35,
  465.             orbitSpeed: 0.01,
  466.             gravityStrength: 60
  467.         },
  468.         "Saturn": {
  469.             name: "ดาวเสาร์ (Saturn)",
  470.             description: "ดาวเคราะห์ที่มีวงแหวนที่สวยงามและโดดเด่น วงแหวนประกอบด้วยน้ำแข็งและฝุ่นที่โคจรรอบดาวเสาร์",
  471.             radius: "58,232 กิโลเมตร",
  472.             distance: "1,434 ล้านกิโลเมตร",
  473.             temperature: "-178°C",
  474.             gravity: "10.44 m/s²",
  475.             color: 0xead6b8,
  476.             size: 2.2,
  477.             position: [45, 0, 0],
  478.             orbitRadius: 45,
  479.             orbitSpeed: 0.008,
  480.             gravityStrength: 50
  481.         },
  482.         "Uranus": {
  483.             name: "ดาวยูเรนัส (Uranus)",
  484.             description: "ดาวเคราะห์ก๊าซยักษ์ที่มีแกนหมุนเอียงมากจนเหมือนกลิ้งไปตามวงโคจร มีสีฟ้าอมเขียวจากก๊าซมีเทนในบรรยากาศ",
  485.             radius: "25,362 กิโลเมตร",
  486.             distance: "2,871 ล้านกิโลเมตร",
  487.             temperature: "-224°C",
  488.             gravity: "8.69 m/s²",
  489.             color: 0x75c1e0,
  490.             size: 1.8,
  491.             position: [55, 0, 0],
  492.             orbitRadius: 55,
  493.             orbitSpeed: 0.006,
  494.             gravityStrength: 40
  495.         },
  496.         "Neptune": {
  497.             name: "ดาวเนปจูน (Neptune)",
  498.             description: "ดาวเคราะห์ที่อยู่ไกลที่สุด (หลังจากที่ดาวพลูโตถูกจัดเป็นดาวเคราะห์แคระ) มีสีน้ำเงินเข้มและพายุรุนแรงที่สุดในระบบสุริยะ",
  499.             radius: "24,622 กิโลเมตร",
  500.             distance: "4,495 ล้านกิโลเมตร",
  501.             temperature: "-218°C",
  502.             gravity: "11.15 m/s²",
  503.             color: 0x3b55ce,
  504.             size: 1.7,
  505.             position: [65, 0, 0],
  506.             orbitRadius: 65,
  507.             orbitSpeed: 0.005,
  508.             gravityStrength: 45
  509.         }
  510.     };
  511.  
  512.     // สร้างดาวบนหน้าเริ่มต้น
  513.     function createStars() {
  514.         const starsContainer = document.getElementById('stars');
  515.         const starCount = 200;
  516.        
  517.         for (let i = 0; i < starCount; i++) {
  518.            const star = document.createElement('div');
  519.            star.className = 'star';
  520.            
  521.            // สุ่มขนาดและตำแหน่ง
  522.            const size = Math.random() * 3;
  523.            const left = Math.random() * 100;
  524.            const top = Math.random() * 100;
  525.            
  526.            star.style.width = `${size}px`;
  527.            star.style.height = `${size}px`;
  528.            star.style.left = `${left}%`;
  529.            star.style.top = `${top}%`;
  530.            star.style.opacity = Math.random();
  531.            
  532.            starsContainer.appendChild(star);
  533.        }
  534.    }
  535.    
  536.    createStars();
  537.  
  538.    // ตัวแปรสำหรับ Three.js
  539.    let scene, camera, renderer, spaceship;
  540.    let planets = {};
  541.    let orbits = {};
  542.    let miniMapScene, miniMapCamera, miniMapRenderer;
  543.    let keys = {};
  544.    let currentPlanet = null;
  545.    let velocity = new THREE.Vector3();
  546.    let gravityInfluence = false;
  547.    
  548.    // ตัวแปรสำหรับระบบเร่งความเร็ว
  549.    let boostEnergy = 100;
  550.    let isBoosting = false;
  551.    let boostCooldown = false;
  552.    let engineGlow, boostGlow;
  553.    
  554.    // เริ่มเกม
  555.    document.getElementById('startButton').addEventListener('click', function() {
  556.        document.getElementById('startScreen').style.display = 'none';
  557.        initGame();
  558.    });
  559.    
  560.    // ปิดข้อมูลวงโคจร
  561.    document.getElementById('closeOrbitInfo').addEventListener('click', function() {
  562.        document.getElementById('orbitInfo').style.display = 'none';
  563.    });
  564.    
  565.    // ฟังก์ชันเริ่มเกม
  566.    function initGame() {
  567.        initThreeJS();
  568.        createSpaceship();
  569.        createPlanets();
  570.        createOrbits();
  571.        createStarfield();
  572.        createMiniMap();
  573.        setupBoostSystem();
  574.        
  575.        // ตรวจจับการกดปุ่ม
  576.        window.addEventListener('keydown', function(e) {
  577.            keys[e.key.toLowerCase()] = true;
  578.            
  579.            // แสดงข้อมูลวงโคจร
  580.            if (e.key.toLowerCase() === 'i') {
  581.                const orbitInfo = document.getElementById('orbitInfo');
  582.                orbitInfo.style.display = orbitInfo.style.display === 'block' ? 'none' : 'block';
  583.            }
  584.            
  585.            // เร่งความเร็ว
  586.            if (e.key === ' ' && !boostCooldown && boostEnergy > 0) {
  587.                 activateBoost();
  588.             }
  589.         });
  590.        
  591.         window.addEventListener('keyup', function(e) {
  592.             keys[e.key.toLowerCase()] = false;
  593.            
  594.             // หยุดเร่งความเร็ว
  595.             if (e.key === ' ') {
  596.                 deactivateBoost();
  597.             }
  598.         });
  599.        
  600.         animate();
  601.     }
  602.    
  603.     // ฟังก์ชันเริ่มต้น Three.js
  604.     function initThreeJS() {
  605.         // สร้าง Scene
  606.         scene = new THREE.Scene();
  607.         scene.background = new THREE.Color(0x000510);
  608.        
  609.         // สร้าง Camera
  610.         camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  611.         camera.position.set(0, 10, 30);
  612.         camera.lookAt(0, 0, 0);
  613.        
  614.         // สร้าง Renderer
  615.         renderer = new THREE.WebGLRenderer({ antialias: true });
  616.         renderer.setSize(window.innerWidth, window.innerHeight);
  617.         document.getElementById('gameCanvas').appendChild(renderer.domElement);
  618.        
  619.         // สร้างแสง
  620.         const ambientLight = new THREE.AmbientLight(0x333333);
  621.         scene.add(ambientLight);
  622.        
  623.         const sunLight = new THREE.PointLight(0xffffff, 2, 300);
  624.         sunLight.position.set(0, 0, 0);
  625.         scene.add(sunLight);
  626.        
  627.         // ปรับขนาดหน้าจอเมื่อมีการเปลี่ยนแปลง
  628.         window.addEventListener('resize', function() {
  629.             camera.aspect = window.innerWidth / window.innerHeight;
  630.             camera.updateProjectionMatrix();
  631.             renderer.setSize(window.innerWidth, window.innerHeight);
  632.            
  633.             if (miniMapRenderer) {
  634.                 miniMapRenderer.setSize(150, 150);
  635.             }
  636.         });
  637.     }
  638.    
  639.     // สร้างยานอวกาศ
  640.     function createSpaceship() {
  641.         // สร้างยานอวกาศด้วย SVG
  642.         spaceship = new THREE.Group();
  643.        
  644.         // ตัวยาน
  645.         const bodyGeometry = new THREE.ConeGeometry(0.5, 2, 8);
  646.         const bodyMaterial = new THREE.MeshPhongMaterial({ color: 0x888888 });
  647.         const body = new THREE.Mesh(bodyGeometry, bodyMaterial);
  648.         body.rotation.x = Math.PI / 2;
  649.         spaceship.add(body);
  650.        
  651.         // ปีก
  652.         const wingGeometry = new THREE.BoxGeometry(2, 0.1, 0.7);
  653.         const wingMaterial = new THREE.MeshPhongMaterial({ color: 0x3182ce });
  654.         const wings = new THREE.Mesh(wingGeometry, wingMaterial);
  655.         wings.position.z = -0.5;
  656.         spaceship.add(wings);
  657.        
  658.         // หน้าต่างยาน
  659.         const windowGeometry = new THREE.SphereGeometry(0.2, 16, 16);
  660.         const windowMaterial = new THREE.MeshPhongMaterial({ color: 0x4fd1c5, emissive: 0x4fd1c5, emissiveIntensity: 0.5 });
  661.         const window = new THREE.Mesh(windowGeometry, windowMaterial);
  662.         window.position.y = 0.3;
  663.         window.position.z = 0.5;
  664.         spaceship.add(window);
  665.        
  666.         // เครื่องยนต์
  667.         const engineGeometry = new THREE.CylinderGeometry(0.2, 0.3, 0.5, 8);
  668.         const engineMaterial = new THREE.MeshPhongMaterial({ color: 0x555555 });
  669.         const engine = new THREE.Mesh(engineGeometry, engineMaterial);
  670.         engine.position.z = -1;
  671.         engine.rotation.x = Math.PI / 2;
  672.         spaceship.add(engine);
  673.        
  674.         // ไฟเครื่องยนต์ปกติ
  675.         engineGlow = new THREE.Mesh(
  676.             new THREE.ConeGeometry(0.2, 0.8, 8),
  677.             new THREE.MeshBasicMaterial({
  678.                 color: 0xff6600,
  679.                 transparent: true,
  680.                 opacity: 0.7
  681.             })
  682.         );
  683.         engineGlow.position.z = -1.5;
  684.         engineGlow.rotation.x = -Math.PI / 2;
  685.         engineGlow.userData.defaultScale = new THREE.Vector3(1, 1, 1);
  686.         spaceship.add(engineGlow);
  687.        
  688.         // ไฟเร่งความเร็ว
  689.         boostGlow = new THREE.Mesh(
  690.             new THREE.ConeGeometry(0.3, 1.2, 8),
  691.             new THREE.MeshBasicMaterial({
  692.                 color: 0xff0066,
  693.                 transparent: true,
  694.                 opacity: 0
  695.             })
  696.         );
  697.         boostGlow.position.z = -1.8;
  698.         boostGlow.rotation.x = -Math.PI / 2;
  699.         spaceship.add(boostGlow);
  700.        
  701.         // ปรับขนาดและตำแหน่งยาน
  702.         spaceship.scale.set(0.5, 0.5, 0.5);
  703.         spaceship.position.set(0, 0, 25);
  704.        
  705.         scene.add(spaceship);
  706.        
  707.         // เก็บข้อมูลยานอวกาศ
  708.         spaceship.userData = {
  709.             velocity: new THREE.Vector3(),
  710.             rotationVelocity: new THREE.Vector3(),
  711.             speed: 0.1,
  712.             rotationSpeed: 0.03,
  713.             boostSpeed: 0.3
  714.         };
  715.     }
  716.    
  717.     // สร้างดาวเคราะห์
  718.     function createPlanets() {
  719.         for (const [key, planet] of Object.entries(planetData)) {
  720.             const geometry = new THREE.SphereGeometry(planet.size, 32, 32);
  721.            
  722.             let material;
  723.            
  724.             if (key === "Sun") {
  725.                 // สร้างดวงอาทิตย์ให้มีการเรืองแสง
  726.                 material = new THREE.MeshBasicMaterial({
  727.                     color: planet.color,
  728.                     emissive: planet.color,
  729.                     emissiveIntensity: 1
  730.                 });
  731.             } else {
  732.                 material = new THREE.MeshPhongMaterial({ color: planet.color });
  733.             }
  734.            
  735.             const mesh = new THREE.Mesh(geometry, material);
  736.            
  737.             mesh.position.set(...planet.position);
  738.             scene.add(mesh);
  739.            
  740.             planets[key] = {
  741.                 mesh: mesh,
  742.                 data: planet
  743.             };
  744.            
  745.             // สร้างวงแหวนสำหรับดาวเสาร์
  746.             if (key === "Saturn") {
  747.                 const ringGeometry = new THREE.RingGeometry(planet.size + 0.5, planet.size + 2, 32);
  748.                 const ringMaterial = new THREE.MeshBasicMaterial({
  749.                     color: 0xc2a278,
  750.                     side: THREE.DoubleSide,
  751.                     transparent: true,
  752.                     opacity: 0.8
  753.                 });
  754.                 const ring = new THREE.Mesh(ringGeometry, ringMaterial);
  755.                 ring.rotation.x = Math.PI / 2;
  756.                 mesh.add(ring);
  757.             }
  758.            
  759.             // สร้างบรรยากาศสำหรับโลก
  760.             if (key === "Earth") {
  761.                 const atmosphereGeometry = new THREE.SphereGeometry(planet.size + 0.05, 32, 32);
  762.                 const atmosphereMaterial = new THREE.MeshPhongMaterial({
  763.                     color: 0x4fc3f7,
  764.                     transparent: true,
  765.                     opacity: 0.3
  766.                 });
  767.                 const atmosphere = new THREE.Mesh(atmosphereGeometry, atmosphereMaterial);
  768.                 mesh.add(atmosphere);
  769.             }
  770.            
  771.             // สร้างพื้นผิวพิเศษสำหรับดาวพฤหัสบดี
  772.             if (key === "Jupiter") {
  773.                 const bands = new THREE.Object3D();
  774.                
  775.                 for (let i = 0; i < 5; i++) {
  776.                    const bandGeometry = new THREE.TorusGeometry(planet.size * (0.85 + i * 0.03), 0.05, 16, 100);
  777.                    const bandMaterial = new THREE.MeshBasicMaterial({
  778.                        color: i % 2 === 0 ? 0xd8ca9d : 0xc2a278,
  779.                        transparent: true,
  780.                        opacity: 0.7
  781.                    });
  782.                    const band = new THREE.Mesh(bandGeometry, bandMaterial);
  783.                    band.rotation.x = Math.PI / 2;
  784.                    bands.add(band);
  785.                }
  786.                
  787.                mesh.add(bands);
  788.            }
  789.        }
  790.    }
  791.    
  792.    // สร้างวงโคจร
  793.    function createOrbits() {
  794.        for (const [key, planet] of Object.entries(planetData)) {
  795.            if (planet.orbitRadius > 0) {
  796.                 const orbitGeometry = new THREE.BufferGeometry();
  797.                 const points = [];
  798.                
  799.                 for (let i = 0; i <= 100; i++) {
  800.                    const angle = (i / 100) * Math.PI * 2;
  801.                    points.push(
  802.                        new THREE.Vector3(
  803.                            Math.cos(angle) * planet.orbitRadius,
  804.                            0,
  805.                            Math.sin(angle) * planet.orbitRadius
  806.                        )
  807.                    );
  808.                }
  809.                
  810.                orbitGeometry.setFromPoints(points);
  811.                
  812.                const orbitMaterial = new THREE.LineBasicMaterial({
  813.                    color: 0x444444,
  814.                    transparent: true,
  815.                    opacity: 0.3
  816.                });
  817.                
  818.                const orbit = new THREE.Line(orbitGeometry, orbitMaterial);
  819.                scene.add(orbit);
  820.                
  821.                orbits[key] = orbit;
  822.            }
  823.        }
  824.    }
  825.    
  826.    // สร้างดาวในอวกาศ
  827.    function createStarfield() {
  828.        const starsGeometry = new THREE.BufferGeometry();
  829.        const starsMaterial = new THREE.PointsMaterial({
  830.            color: 0xffffff,
  831.            size: 0.1,
  832.            transparent: true
  833.        });
  834.        
  835.        const starsVertices = [];
  836.        for (let i = 0; i < 10000; i++) {
  837.            const x = (Math.random() - 0.5) * 2000;
  838.            const y = (Math.random() - 0.5) * 2000;
  839.            const z = (Math.random() - 0.5) * 2000;
  840.            starsVertices.push(x, y, z);
  841.        }
  842.        
  843.        starsGeometry.setAttribute('position', new THREE.Float32BufferAttribute(starsVertices, 3));
  844.        const starField = new THREE.Points(starsGeometry, starsMaterial);
  845.        scene.add(starField);
  846.    }
  847.    
  848.    // สร้างแผนที่ขนาดเล็ก
  849.    function createMiniMap() {
  850.        miniMapScene = new THREE.Scene();
  851.        miniMapScene.background = new THREE.Color(0x000510);
  852.        
  853.        miniMapCamera = new THREE.OrthographicCamera(-70, 70, 70, -70, 1, 1000);
  854.        miniMapCamera.position.set(0, 100, 0);
  855.        miniMapCamera.lookAt(0, 0, 0);
  856.        
  857.        miniMapRenderer = new THREE.WebGLRenderer({ antialias: true });
  858.        miniMapRenderer.setSize(150, 150);
  859.        document.getElementById('miniMap').appendChild(miniMapRenderer.domElement);
  860.        
  861.        // สร้างดาวเคราะห์ในแผนที่ขนาดเล็ก
  862.        for (const [key, planet] of Object.entries(planetData)) {
  863.            const geometry = new THREE.SphereGeometry(planet.size * 0.5, 16, 16);
  864.            const material = new THREE.MeshBasicMaterial({ color: planet.color });
  865.            const mesh = new THREE.Mesh(geometry, material);
  866.            
  867.            mesh.position.set(...planet.position);
  868.            miniMapScene.add(mesh);
  869.        }
  870.        
  871.        // สร้างตัวแทนยานอวกาศในแผนที่ขนาดเล็ก
  872.        const shipGeometry = new THREE.SphereGeometry(0.5, 8, 8);
  873.        const shipMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff });
  874.        const shipMesh = new THREE.Mesh(shipGeometry, shipMaterial);
  875.        miniMapScene.add(shipMesh);
  876.        
  877.        // เก็บตัวแทนยานอวกาศไว้ใช้ในการอัปเดตตำแหน่ง
  878.        miniMapScene.userData.shipMesh = shipMesh;
  879.    }
  880.    
  881.    // ตั้งค่าระบบเร่งความเร็ว
  882.    function setupBoostSystem() {
  883.        const boostButton = document.getElementById('boostButton');
  884.        const boostMeterFill = document.getElementById('boostMeterFill');
  885.        
  886.        // อัปเดตแถบพลังงาน
  887.        updateBoostMeter();
  888.        
  889.        // เพิ่มการตรวจจับการคลิกปุ่มเร่งความเร็ว
  890.        boostButton.addEventListener('mousedown', function() {
  891.            if (!boostCooldown && boostEnergy > 0) {
  892.                 activateBoost();
  893.             }
  894.         });
  895.        
  896.         boostButton.addEventListener('mouseup', function() {
  897.             deactivateBoost();
  898.         });
  899.        
  900.         boostButton.addEventListener('mouseleave', function() {
  901.             deactivateBoost();
  902.         });
  903.        
  904.         // เพิ่มการตรวจจับการสัมผัสสำหรับอุปกรณ์มือถือ
  905.         boostButton.addEventListener('touchstart', function(e) {
  906.             e.preventDefault();
  907.             if (!boostCooldown && boostEnergy > 0) {
  908.                activateBoost();
  909.             }
  910.         });
  911.        
  912.         boostButton.addEventListener('touchend', function(e) {
  913.             e.preventDefault();
  914.             deactivateBoost();
  915.         });
  916.     }
  917.    
  918.     // เปิดใช้งานการเร่งความเร็ว
  919.     function activateBoost() {
  920.         if (boostCooldown || boostEnergy <= 0) return;
  921.        
  922.        isBoosting = true;
  923.        
  924.        // เปลี่ยนสถานะปุ่ม
  925.        const boostButton = document.getElementById('boostButton');
  926.        boostButton.classList.add('boosting');
  927.        boostButton.textContent = 'กำลังเร่งความเร็ว!';
  928.        
  929.        // เปลี่ยนสถานะแถบพลังงาน
  930.        const boostMeterFill = document.getElementById('boostMeterFill');
  931.        boostMeterFill.classList.add('depleting');
  932.        boostMeterFill.classList.remove('recharging');
  933.        
  934.        // เปิดใช้งานเอฟเฟกต์ไฟเร่งความเร็ว
  935.        boostGlow.material.opacity = 0.9;
  936.        
  937.        // เริ่มลดพลังงาน
  938.        if (!spaceship.userData.boostInterval) {
  939.            spaceship.userData.boostInterval = setInterval(function() {
  940.                if (isBoosting && boostEnergy > 0) {
  941.                     boostEnergy = Math.max(0, boostEnergy - 2);
  942.                     updateBoostMeter();
  943.                    
  944.                     if (boostEnergy <= 0) {
  945.                        deactivateBoost();
  946.                        startBoostCooldown();
  947.                    }
  948.                }
  949.            }, 100);
  950.        }
  951.    }
  952.    
  953.    // ปิดใช้งานการเร่งความเร็ว
  954.    function deactivateBoost() {
  955.        if (!isBoosting) return;
  956.        
  957.        isBoosting = false;
  958.        
  959.        // เปลี่ยนสถานะปุ่ม
  960.        const boostButton = document.getElementById('boostButton');
  961.        boostButton.classList.remove('boosting');
  962.        boostButton.textContent = 'เร่งความเร็ว';
  963.        
  964.        // เปลี่ยนสถานะแถบพลังงาน
  965.        const boostMeterFill = document.getElementById('boostMeterFill');
  966.        boostMeterFill.classList.remove('depleting');
  967.        
  968.        if (boostEnergy < 100 && !boostCooldown) {
  969.            boostMeterFill.classList.add('recharging');
  970.        }
  971.        
  972.        // ปิดใช้งานเอฟเฟกต์ไฟเร่งความเร็ว
  973.        boostGlow.material.opacity = 0;
  974.        
  975.        // หยุดลดพลังงาน
  976.        if (spaceship.userData.boostInterval) {
  977.            clearInterval(spaceship.userData.boostInterval);
  978.            spaceship.userData.boostInterval = null;
  979.        }
  980.        
  981.        // เริ่มชาร์จพลังงาน
  982.        if (!spaceship.userData.rechargeInterval && !boostCooldown) {
  983.            spaceship.userData.rechargeInterval = setInterval(function() {
  984.                if (!isBoosting && boostEnergy < 100) {
  985.                    boostEnergy = Math.min(100, boostEnergy + 0.5);
  986.                    updateBoostMeter();
  987.                    
  988.                    if (boostEnergy >= 100) {
  989.                         const boostMeterFill = document.getElementById('boostMeterFill');
  990.                         boostMeterFill.classList.remove('recharging');
  991.                        
  992.                         clearInterval(spaceship.userData.rechargeInterval);
  993.                         spaceship.userData.rechargeInterval = null;
  994.                     }
  995.                 }
  996.             }, 100);
  997.         }
  998.     }
  999.    
  1000.     // เริ่มคูลดาวน์หลังจากใช้พลังงานหมด
  1001.     function startBoostCooldown() {
  1002.         boostCooldown = true;
  1003.        
  1004.         const boostButton = document.getElementById('boostButton');
  1005.         boostButton.textContent = 'กำลังชาร์จ...';
  1006.         boostButton.disabled = true;
  1007.         boostButton.style.opacity = '0.5';
  1008.         boostButton.style.cursor = 'not-allowed';
  1009.        
  1010.         setTimeout(function() {
  1011.             boostCooldown = false;
  1012.             boostButton.textContent = 'เร่งความเร็ว';
  1013.             boostButton.disabled = false;
  1014.             boostButton.style.opacity = '1';
  1015.             boostButton.style.cursor = 'pointer';
  1016.            
  1017.             // เริ่มชาร์จพลังงาน
  1018.             const boostMeterFill = document.getElementById('boostMeterFill');
  1019.             boostMeterFill.classList.add('recharging');
  1020.            
  1021.             if (!spaceship.userData.rechargeInterval) {
  1022.                 spaceship.userData.rechargeInterval = setInterval(function() {
  1023.                     if (!isBoosting && boostEnergy < 100) {
  1024.                        boostEnergy = Math.min(100, boostEnergy + 0.5);
  1025.                         updateBoostMeter();
  1026.                        
  1027.                         if (boostEnergy >= 100) {
  1028.                             boostMeterFill.classList.remove('recharging');
  1029.                            
  1030.                             clearInterval(spaceship.userData.rechargeInterval);
  1031.                             spaceship.userData.rechargeInterval = null;
  1032.                         }
  1033.                     }
  1034.                 }, 100);
  1035.             }
  1036.         }, 3000);
  1037.     }
  1038.    
  1039.     // อัปเดตแถบพลังงาน
  1040.     function updateBoostMeter() {
  1041.         const boostMeterFill = document.getElementById('boostMeterFill');
  1042.         boostMeterFill.style.width = `${boostEnergy}%`;
  1043.     }
  1044.    
  1045.     // ฟังก์ชันอนิเมชัน
  1046.     function animate() {
  1047.         requestAnimationFrame(animate);
  1048.        
  1049.         // อัปเดตตำแหน่งดาวเคราะห์
  1050.         updatePlanets();
  1051.        
  1052.         // ควบคุมยานอวกาศ
  1053.         controlSpaceship();
  1054.        
  1055.         // คำนวณแรงโน้มถ่วง
  1056.         calculateGravity();
  1057.        
  1058.         // ตรวจสอบการเข้าใกล้ดาวเคราะห์
  1059.         checkPlanetProximity();
  1060.        
  1061.         // อัปเดตแผนที่ขนาดเล็ก
  1062.         updateMiniMap();
  1063.        
  1064.         // อัปเดตเอฟเฟกต์ไฟเครื่องยนต์
  1065.         updateEngineEffects();
  1066.        
  1067.         // เรนเดอร์ฉาก
  1068.         renderer.render(scene, camera);
  1069.         miniMapRenderer.render(miniMapScene, miniMapCamera);
  1070.     }
  1071.    
  1072.     // อัปเดตตำแหน่งดาวเคราะห์
  1073.     function updatePlanets() {
  1074.         for (const [key, planet] of Object.entries(planets)) {
  1075.             if (key !== "Sun") {
  1076.                 const orbitRadius = planet.data.orbitRadius;
  1077.                 const orbitSpeed = planet.data.orbitSpeed;
  1078.                 const time = Date.now() * 0.001;
  1079.                
  1080.                 const x = Math.cos(time * orbitSpeed) * orbitRadius;
  1081.                 const z = Math.sin(time * orbitSpeed) * orbitRadius;
  1082.                
  1083.                 planet.mesh.position.set(x, 0, z);
  1084.                
  1085.                 // อัปเดตตำแหน่งในแผนที่ขนาดเล็ก
  1086.                 const miniPlanet = miniMapScene.children.find(child =>
  1087.                     child instanceof THREE.Mesh &&
  1088.                    child.geometry instanceof THREE.SphereGeometry &&
  1089.                    Math.abs(child.position.x - planet.mesh.position.x) < 0.1 &&
  1090.                    Math.abs(child.position.z - planet.mesh.position.z) < 0.1
  1091.                );
  1092.                
  1093.                 if (miniPlanet) {
  1094.                     miniPlanet.position.copy(planet.mesh.position);
  1095.                 }
  1096.             }
  1097.            
  1098.             // หมุนดาวเคราะห์
  1099.             planet.mesh.rotation.y += 0.005;
  1100.         }
  1101.     }
  1102.    
  1103.     // ควบคุมยานอวกาศ
  1104.     function controlSpaceship() {
  1105.         // กำหนดความเร็วตามสถานะการเร่งความเร็ว
  1106.         const moveSpeed = isBoosting ? spaceship.userData.boostSpeed : spaceship.userData.speed;
  1107.         const rotateSpeed = spaceship.userData.rotationSpeed;
  1108.        
  1109.         // หมุนซ้าย-ขวา
  1110.         if (keys['a']) {
  1111.             spaceship.rotation.y += rotateSpeed;
  1112.         }
  1113.         if (keys['d']) {
  1114.             spaceship.rotation.y -= rotateSpeed;
  1115.         }
  1116.        
  1117.         // หมุนขึ้น-ลง
  1118.         if (keys['q']) {
  1119.             spaceship.position.y += moveSpeed;
  1120.         }
  1121.         if (keys['e']) {
  1122.             spaceship.position.y -= moveSpeed;
  1123.         }
  1124.        
  1125.         // เคลื่อนที่ไปข้างหน้า-ถอยหลัง
  1126.         const direction = new THREE.Vector3(0, 0, -1);
  1127.         direction.applyQuaternion(spaceship.quaternion);
  1128.        
  1129.         if (keys['w']) {
  1130.             spaceship.position.addScaledVector(direction, moveSpeed);
  1131.         }
  1132.         if (keys['s']) {
  1133.             spaceship.position.addScaledVector(direction, -moveSpeed);
  1134.         }
  1135.        
  1136.         // เร่งความเร็วด้วยปุ่ม Space
  1137.         if (keys[' '] && !boostCooldown && boostEnergy > 0) {
  1138.            activateBoost();
  1139.         } else if (!keys[' '] && isBoosting) {
  1140.            deactivateBoost();
  1141.         }
  1142.        
  1143.         // อัปเดตตำแหน่งกล้อง
  1144.         const cameraOffset = new THREE.Vector3(0, 1, 5);
  1145.         cameraOffset.applyQuaternion(spaceship.quaternion);
  1146.        
  1147.         camera.position.copy(spaceship.position).add(cameraOffset);
  1148.         camera.lookAt(spaceship.position);
  1149.        
  1150.         // อัปเดตตำแหน่งยานอวกาศในแผนที่ขนาดเล็ก
  1151.         if (miniMapScene.userData.shipMesh) {
  1152.             miniMapScene.userData.shipMesh.position.set(
  1153.                 spaceship.position.x,
  1154.                 0,
  1155.                 spaceship.position.z
  1156.             );
  1157.         }
  1158.     }
  1159.    
  1160.     // คำนวณแรงโน้มถ่วง
  1161.     function calculateGravity() {
  1162.         let maxGravity = 0;
  1163.         let closestPlanetName = null;
  1164.        
  1165.         for (const [key, planet] of Object.entries(planets)) {
  1166.             const distance = spaceship.position.distanceTo(planet.mesh.position);
  1167.             const gravityRadius = planet.data.size * 10;
  1168.            
  1169.             if (distance < gravityRadius) {
  1170.                // ลดผลกระทบของแรงโน้มถ่วงเมื่อเร่งความเร็ว
  1171.                const gravityMultiplier = isBoosting ? 0.3 : 1.0;
  1172.                const gravityStrength = planet.data.gravityStrength * (1 - distance / gravityRadius) * gravityMultiplier;
  1173.                
  1174.                if (gravityStrength > maxGravity) {
  1175.                     maxGravity = gravityStrength;
  1176.                     closestPlanetName = key;
  1177.                 }
  1178.             }
  1179.         }
  1180.        
  1181.         // แสดงตัวบ่งชี้แรงโน้มถ่วง
  1182.         const gravityIndicator = document.getElementById('gravityIndicator');
  1183.         const gravityValue = document.getElementById('gravityValue');
  1184.         const gravityBarFill = document.getElementById('gravityBarFill');
  1185.        
  1186.         if (maxGravity > 0) {
  1187.             gravityIndicator.classList.add('active');
  1188.             gravityValue.textContent = `${Math.round(maxGravity)}% (${planets[closestPlanetName].data.name})`;
  1189.             gravityBarFill.style.width = `${maxGravity}%`;
  1190.            
  1191.             // ใช้แรงโน้มถ่วงดึงยานอวกาศ
  1192.             const direction = new THREE.Vector3();
  1193.             direction.subVectors(planets[closestPlanetName].mesh.position, spaceship.position).normalize();
  1194.            
  1195.             spaceship.position.addScaledVector(direction, maxGravity * 0.0005);
  1196.         } else {
  1197.             gravityIndicator.classList.remove('active');
  1198.         }
  1199.     }
  1200.    
  1201.     // ตรวจสอบการเข้าใกล้ดาวเคราะห์
  1202.     function checkPlanetProximity() {
  1203.         let closestPlanet = null;
  1204.         let closestDistance = Infinity;
  1205.        
  1206.         for (const [key, planet] of Object.entries(planets)) {
  1207.             const distance = spaceship.position.distanceTo(planet.mesh.position);
  1208.            
  1209.             // ตรวจสอบระยะห่างจากดาวเคราะห์
  1210.             if (distance < closestDistance) {
  1211.                closestDistance = distance;
  1212.                closestPlanet = planet;
  1213.            }
  1214.        }
  1215.        
  1216.        // แสดงข้อมูลดาวเคราะห์เมื่อเข้าใกล้
  1217.        const planetInfo = document.getElementById('planetInfo');
  1218.        
  1219.        if (closestDistance < 10 && closestPlanet !== currentPlanet) {
  1220.            currentPlanet = closestPlanet;
  1221.            
  1222.            document.getElementById('planetName').textContent = closestPlanet.data.name;
  1223.            document.getElementById('planetDescription').textContent = closestPlanet.data.description;
  1224.            document.getElementById('planetRadius').textContent = closestPlanet.data.radius;
  1225.            document.getElementById('planetDistance').textContent = closestPlanet.data.distance;
  1226.            document.getElementById('planetTemp').textContent = closestPlanet.data.temperature;
  1227.            document.getElementById('planetGravity').textContent = closestPlanet.data.gravity;
  1228.            
  1229.            planetInfo.classList.add('visible');
  1230.        } else if (closestDistance >= 10 && planetInfo.classList.contains('visible')) {
  1231.            planetInfo.classList.remove('visible');
  1232.             currentPlanet = null;
  1233.         }
  1234.     }
  1235.    
  1236.     // อัปเดตแผนที่ขนาดเล็ก
  1237.     function updateMiniMap() {
  1238.         // อัปเดตมุมมองของกล้องในแผนที่ขนาดเล็ก
  1239.         miniMapCamera.position.set(0, 100, 0);
  1240.         miniMapCamera.lookAt(0, 0, 0);
  1241.     }
  1242.    
  1243.     // อัปเดตเอฟเฟกต์ไฟเครื่องยนต์
  1244.     function updateEngineEffects() {
  1245.         // อนิเมชันไฟเครื่องยนต์ปกติ
  1246.         if (engineGlow) {
  1247.             if (keys['w']) {
  1248.                 engineGlow.material.opacity = 0.7;
  1249.                 engineGlow.scale.z = 1 + Math.sin(Date.now() * 0.01) * 0.2;
  1250.             } else {
  1251.                 engineGlow.material.opacity = 0.4;
  1252.                 engineGlow.scale.z = 0.8 + Math.sin(Date.now() * 0.005) * 0.1;
  1253.             }
  1254.         }
  1255.        
  1256.         // อนิเมชันไฟเร่งความเร็ว
  1257.         if (boostGlow && isBoosting) {
  1258.            boostGlow.scale.z = 1.2 + Math.sin(Date.now() * 0.02) * 0.3;
  1259.             boostGlow.scale.x = 1 + Math.sin(Date.now() * 0.03) * 0.2;
  1260.             boostGlow.scale.y = 1 + Math.cos(Date.now() * 0.03) * 0.2;
  1261.         }
  1262.     }
  1263. </script>
Tags: html canva
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!