太阳系运行模拟程序-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>
)
