太陽系運行模擬程序-html動畫
by AI:
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>交互式太陽系模擬器</title><style>body {margin: 0;overflow: hidden;background-color: #000;font-family: Arial, sans-serif;color: white;}canvas {display: block;}#info {position: absolute;top: 10px;left: 10px;background-color: rgba(0, 0, 0, 0.7);padding: 10px;border-radius: 5px;max-width: 300px;}#controls {position: absolute;bottom: 10px;left: 10px;background-color: rgba(0, 0, 0, 0.7);padding: 10px;border-radius: 5px;}button {background-color: #333;color: white;border: 1px solid #555;padding: 5px 10px;margin: 5px;cursor: pointer;}button:hover {background-color: #444;}#planet-info {position: absolute;right: 10px;top: 10px;background-color: rgba(0, 0, 0, 0.7);padding: 10px;border-radius: 5px;width: 250px;display: none;}</style>
</head>
<body><canvas id="solarSystem"></canvas><div id="info"><h2>太陽系模擬器</h2><p>鼠標拖動可以旋轉視角</p><p>滾輪可以縮放</p><p>點擊行星查看詳細信息</p></div><div id="controls"><button id="speedUp">加速</button><button id="speedDown">減速</button><button id="pause">暫停/繼續</button><button id="realScale">真實比例</button><button id="viewScale">可視比例</button></div><div id="planet-info"><h2 id="planet-name">行星名稱</h2><p id="planet-desc">描述信息...</p><p>直徑: <span id="planet-diameter"></span></p><p>與太陽距離: <span id="planet-distance"></span></p><p>軌道周期: <span id="planet-period"></span></p></div><script>// 初始化畫布const canvas = document.getElementById('solarSystem');const ctx = canvas.getContext('2d');canvas.width = window.innerWidth;canvas.height = window.innerHeight;// 行星數據const planets = [{ name: "太陽", radius: 30, distance: 0, color: "#FDB813", speed: 0, desc: "太陽系的中心恒星", diameter: "1,392,700 km", orbitalPeriod: "" },{ name: "水星", radius: 5, distance: 60, color: "#A9A9A9", speed: 0.04, desc: "最靠近太陽的行星", diameter: "4,880 km", orbitalPeriod: "88 地球日" },{ name: "金星", radius: 9, distance: 90, color: "#E6E6FA", speed: 0.015, desc: "最熱的行星，逆向自轉", diameter: "12,104 km", orbitalPeriod: "225 地球日" },{ name: "地球", radius: 10, distance: 130, color: "#6B93D6", speed: 0.01, desc: "我們美麗的家園", diameter: "12,742 km", orbitalPeriod: "365.25 地球日", moons: [{ radius: 3, distance: 20, speed: 0.05 }] },{ name: "火星", radius: 7, distance: 180, color: "#C1440E", speed: 0.008, desc: "紅色行星，可能有生命", diameter: "6,779 km", orbitalPeriod: "687 地球日", moons: [{ radius: 2, distance: 15, speed: 0.03 }, { radius: 1, distance: 25, speed: 0.02 }] },{ name: "木星", radius: 22, distance: 250, color: "#E3DCCB", speed: 0.002, desc: "太陽系最大的行星", diameter: "139,820 km", orbitalPeriod: "12 地球年", moons: Array(4).fill().map((_, i) => ({ radius: 3 + Math.random(), distance: 30 + i * 10, speed: 0.01 + Math.random() * 0.02 })) },{ name: "土星", radius: 19, distance: 320, color: "#F7EC9E", speed: 0.001, desc: "擁有美麗光環的氣態巨行星", diameter: "116,460 km", orbitalPeriod: "29.5 地球年", rings: { inner: 25, outer: 40 }, moons: Array(7).fill().map((_, i) => ({ radius: 2 + Math.random(), distance: 25 + i * 8, speed: 0.01 + Math.random() * 0.02 })) },{ name: "天王星", radius: 15, distance: 380, color: "#D1E7E7", speed: 0.0007, desc: "側向自轉的冰巨星", diameter: "50,724 km", orbitalPeriod: "84 地球年", moons: Array(5).fill().map((_, i) => ({ radius: 2 + Math.random(), distance: 20 + i * 7, speed: 0.01 + Math.random() * 0.02 })) },{ name: "海王星", radius: 14, distance: 440, color: "#5B5DDF", speed: 0.0005, desc: "太陽系最外圍的行星", diameter: "49,244 km", orbitalPeriod: "165 地球年", moons: Array(2).fill().map((_, i) => ({ radius: 2 + Math.random(), distance: 20 + i * 10, speed: 0.01 + Math.random() * 0.02 })) }];// 模擬狀態let state = {time: 0,speed: 1,paused: false,scale: "view", // "view" or "real"rotationX: 0,rotationY: 0,zoom: 1,lastX: 0,lastY: 0,dragging: false,selectedPlanet: null};// 事件監聽canvas.addEventListener('mousedown', (e) => {state.dragging = true;state.lastX = e.clientX;state.lastY = e.clientY;});canvas.addEventListener('mousemove', (e) => {if (state.dragging) {state.rotationY += (e.clientX - state.lastX) * 0.01;state.rotationX += (e.clientY - state.lastY) * 0.01;state.lastX = e.clientX;state.lastY = e.clientY;}});canvas.addEventListener('mouseup', () => {state.dragging = false;});canvas.addEventListener('wheel', (e) => {state.zoom -= e.deltaY * 0.001;state.zoom = Math.max(0.1, Math.min(2, state.zoom));});canvas.addEventListener('click', (e) => {const rect = canvas.getBoundingClientRect();const x = e.clientX - rect.left;const y = e.clientY - rect.top;// 檢查是否點擊了行星const clickedPlanet = checkPlanetClick(x, y);if (clickedPlanet) {state.selectedPlanet = clickedPlanet;showPlanetInfo(clickedPlanet);} else {state.selectedPlanet = null;document.getElementById('planet-info').style.display = 'none';}});// 控制按鈕document.getElementById('speedUp').addEventListener('click', () => {state.speed *= 1.5;});document.getElementById('speedDown').addEventListener('click', () => {state.speed /= 1.5;});document.getElementById('pause').addEventListener('click', () => {state.paused = !state.paused;});document.getElementById('realScale').addEventListener('click', () => {state.scale = "real";});document.getElementById('viewScale').addEventListener('click', () => {state.scale = "view";});// 檢查行星點擊function checkPlanetClick(x, y) {const centerX = canvas.width / 2;const centerY = canvas.height / 2;for (let i = planets.length - 1; i >= 0; i--) {const planet = planets[i];const scaleFactor = state.scale === "real" ? 0.1 : 1;// 計算行星位置const angle = state.time * planet.speed;const planetX = centerX + Math.cos(angle) * planet.distance * state.zoom;const planetY = centerY + Math.sin(angle) * planet.distance * state.zoom * 0.5;// 考慮旋轉const rotatedX = centerX + (planetX - centerX) * Math.cos(state.rotationY) - (planetY - centerY) * Math.sin(state.rotationY);const rotatedY = centerY + (planetX - centerX) * Math.sin(state.rotationY) + (planetY - centerY) * Math.cos(state.rotationY);// 檢查點擊const distance = Math.sqrt(Math.pow(x - rotatedX, 2) + Math.pow(y - rotatedY, 2));if (distance < planet.radius * state.zoom * scaleFactor) {return planet;}}return null;}// 顯示行星信息function showPlanetInfo(planet) {const infoPanel = document.getElementById('planet-info');document.getElementById('planet-name').textContent = planet.name;document.getElementById('planet-desc').textContent = planet.desc;document.getElementById('planet-diameter').textContent = planet.diameter;document.getElementById('planet-distance').textContent = `${(planet.distance / 10).toFixed(1)} 天文單位`;document.getElementById('planet-period').textContent = planet.orbitalPeriod;infoPanel.style.display = 'block';}// 動畫循環function animate() {if (!state.paused) {state.time += 0.01 * state.speed;}// 清除畫布ctx.fillStyle = 'black';ctx.fillRect(0, 0, canvas.width, canvas.height);// 繪制星空背景drawStars();const centerX = canvas.width / 2;const centerY = canvas.height / 2;const scaleFactor = state.scale === "real" ? 0.1 : 1;// 繪制行星planets.forEach(planet => {const angle = state.time * planet.speed;const planetX = centerX + Math.cos(angle) * planet.distance * state.zoom;const planetY = centerY + Math.sin(angle) * planet.distance * state.zoom * 0.5;// 應用旋轉const rotatedX = centerX + (planetX - centerX) * Math.cos(state.rotationY) - (planetY - centerY) * Math.sin(state.rotationY);const rotatedY = centerY + (planetX - centerX) * Math.sin(state.rotationY) + (planetY - centerY) * Math.cos(state.rotationY);// 繪制軌道ctx.beginPath();ctx.strokeStyle = 'rgba(255, 255, 255, 0.2)';ctx.ellipse(centerX, centerY, planet.distance * state.zoom, planet.distance * state.zoom * 0.5, 0, 0, Math.PI * 2);ctx.stroke();// 繪制行星ctx.save();ctx.translate(rotatedX, rotatedY);ctx.rotate(state.rotationX);// 如果是土星，繪制光環if (planet.name === "土星" && planet.rings) {ctx.beginPath();ctx.strokeStyle = 'rgba(210, 180, 140, 0.7)';ctx.lineWidth = 3;ctx.ellipse(0, 0, planet.rings.outer * scaleFactor * state.zoom, planet.rings.outer * scaleFactor * state.zoom * 0.3, 0, 0, Math.PI * 2);ctx.stroke();ctx.beginPath();ctx.strokeStyle = 'rgba(210, 180, 140, 0.4)';ctx.lineWidth = 5;ctx.ellipse(0, 0, planet.rings.inner * scaleFactor * state.zoom, planet.rings.inner * scaleFactor * state.zoom * 0.3, 0, 0, Math.PI * 2);ctx.stroke();}// 繪制行星主體const gradient = ctx.createRadialGradient(0, 0, 0, 0, 0, planet.radius * scaleFactor * state.zoom);gradient.addColorStop(0, planet.color);gradient.addColorStop(1, darkenColor(planet.color, 0.5));ctx.beginPath();ctx.fillStyle = gradient;ctx.arc(0, 0, planet.radius * scaleFactor * state.zoom, 0, Math.PI * 2);ctx.fill();// 如果是選中的行星，添加高亮if (state.selectedPlanet === planet) {ctx.beginPath();ctx.strokeStyle = 'white';ctx.lineWidth = 2;ctx.arc(0, 0, planet.radius * scaleFactor * state.zoom + 5, 0, Math.PI * 2);ctx.stroke();}// 繪制衛星if (planet.moons) {planet.moons.forEach(moon => {const moonAngle = state.time * moon.speed;const moonX = Math.cos(moonAngle) * moon.distance * scaleFactor * state.zoom;const moonY = Math.sin(moonAngle) * moon.distance * scaleFactor * state.zoom * 0.5;ctx.beginPath();ctx.fillStyle = 'lightgray';ctx.arc(moonX, moonY, moon.radius * scaleFactor * state.zoom, 0, Math.PI * 2);ctx.fill();});}ctx.restore();});requestAnimationFrame(animate);}// 繪制星空背景function drawStars() {for (let i = 0; i < 500; i++) {if (!window.stars) {window.stars = Array(500).fill().map(() => ({x: Math.random() * canvas.width,y: Math.random() * canvas.height,size: Math.random() * 1.5,opacity: Math.random()}));}const star = window.stars[i];ctx.beginPath();ctx.fillStyle = `rgba(255, 255, 255, ${star.opacity})`;ctx.arc(star.x, star.y, star.size, 0, Math.PI * 2);ctx.fill();}}// 顏色變暗函數function darkenColor(color, amount) {const num = parseInt(color.replace("#", ""), 16);let r = (num >> 16) * (1 - amount);let g = ((num >> 8) & 0xFFFF) * (1 - amount);let b = (num & 0xFFFF) * (1 - amount);return `rgb(${Math.round(r)}, ${Math.round(g)}, ${Math.round(b)})`;}// 窗口大小調整window.addEventListener('resize', () => {canvas.width = window.innerWidth;canvas.height = window.innerHeight;window.stars = null; // 重置星星位置});// 開始動畫animate();</script>
</body>
</html>
)
