太阳系运行模拟程序-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>
扫一扫
311
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
