<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8">
<title>Orbitující Planety kolem Slunce</title>
<style>
body {
margin: 0;
background-color: #000; /* Černé pozadí pro vesmírný efekt */
}
canvas {
display: block;
margin: 0 auto;
background-color: #000; /* Černé pozadí canvasu */
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
// Získání canvas a jeho 2D kontextu
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let width = canvas.width;
let height = canvas.height;
window.addEventListener('resize', () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
width = canvas.width;
height = canvas.height;
});
let rotationX = 0;
let rotationY = 0;
let zoom = 1;
let isDragging = false;
let lastMouseX, lastMouseY;
// Parametry slunce
const sun = {
x: 0,
y: 0,
z: 0,
radius: 50,
color: 'yellow'
};
// Pole planet
const planets = [
{
distance: 100,
radius: 10,
angle: 0,
speed: 0.03,
color: 'gray' // Merkur
},
{
distance: 150,
radius: 15,
angle: 0,
speed: 0.02,
color: 'orange' // Venuše
},
{
distance: 200,
radius: 20,
angle: 0,
speed: 0.015,
color: 'blue' // Země
},
{
distance: 250,
radius: 18,
angle: 0,
speed: 0.01,
color: 'red' // Mars
},
{
distance: 350,
radius: 30,
angle: 0,
speed: 0.008,
color: 'orange' // Jupiter
},
{
distance: 450,
radius: 25,
angle: 0,
speed: 0.006,
color: 'gold' // Saturn
},
{
distance: 550,
radius: 22,
angle: 0,
speed: 0.004,
color: 'lightblue' // Uran
},
{
distance: 650,
radius: 20,
angle: 0,
speed: 0.002,
color: 'darkblue' // Neptun
}
];
// Funkce pro rotaci bodu v 3D podle rotationX a rotationY
function rotate3D(x, y, z) {
// Rotace kolem X
let cosX = Math.cos(rotationX);
let sinX = Math.sin(rotationX);
let y1 = y * cosX - z * sinX;
let z1 = y * sinX + z * cosX;
// Rotace kolem Y
let cosY = Math.cos(rotationY);
let sinY = Math.sin(rotationY);
let x2 = x * cosY + z1 * sinY;
let z2 = -x * sinY + z1 * cosY;
return { x: x2, y: y1, z: z2 };
}
// Funkce pro transformaci 3D souřadnic na 2D souřadnice
function project(point) {
const perspectiveScale = 1 / (1 + point.z * 0.001);
return {
x: point.x * perspectiveScale,
y: point.y * perspectiveScale
};
}
// Funkce pro kreslení kruhu
function drawCircle(x, y, radius, color) {
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2);
ctx.fillStyle = color;
ctx.fill();
}
// Funkce pro kreslení orbitu
function drawOrbit(distance) {
ctx.beginPath();
const steps = 360;
for (let i = 0; i <= steps; i++) {
const theta = (i / steps) * 2 * Math.PI;
// Body na orbitě v 3D
const x = distance * Math.cos(theta);
const y = distance * Math.sin(theta);
const z = 0;
// Rotace bodu
const rotated = rotate3D(x, y, z);
// Projekce na 2D
const projected = project(rotated);
// Aplikace zoomu a posunutí na střed canvasu
const zoomedX = projected.x * zoom + width / 2;
const zoomedY = projected.y * zoom + height / 2;
if (i === 0) {
ctx.moveTo(zoomedX, zoomedY);
} else {
ctx.lineTo(zoomedX, zoomedY);
}
}
ctx.closePath();
ctx.strokeStyle = 'rgba(255, 255, 255, 0.2)'; // Poloprůhledná bílá barva
ctx.stroke();
}
// Funkce pro animaci
function animate() {
// Z-Buffer pro správné překrývání objektů
let zBuffer = [];
// Vymazání plátna
ctx.clearRect(0, 0, width, height);
// Kreslení orbitů
planets.forEach(planet => {
drawOrbit(planet.distance);
});
// Aktualizace a rotace slunce
const rotatedSun = rotate3D(sun.x, sun.y, sun.z);
const projectedSun = project(rotatedSun);
const zoomedSunX = projectedSun.x * zoom + width / 2;
const zoomedSunY = projectedSun.y * zoom + height / 2;
zBuffer.push({
type: 'sun',
x: sun.x,
y: sun.y,
z: rotatedSun.z,
projectedX: zoomedSunX,
projectedY: zoomedSunY,
radius: sun.radius * zoom,
color: sun.color
});
// Kreslení a animace planet
planets.forEach(planet => {
// Aktualizace úhlu orbitace
planet.angle += planet.speed;
// Výpočet aktuálních 3D souřadnic planety
const x = planet.distance * Math.cos(planet.angle);
const y = planet.distance * Math.sin(planet.angle);
const z = 0;
// Rotace pozice planety
const rotated = rotate3D(x, y, z);
// Projekce 3D souřadnic na 2D souřadnice
const projected = project(rotated);
// Aplikace zoomu a posunutí na střed canvasu
const zoomedX = projected.x * zoom + width / 2;
const zoomedY = projected.y * zoom + height / 2;
// Přidání do z-bufferu
zBuffer.push({
type: 'planet',
x: x,
y: y,
z: rotated.z,
projectedX: zoomedX,
projectedY: zoomedY,
radius: planet.radius * zoom,
color: planet.color
});
});
// Seřazení objektů podle jejich vzdálenosti od pozorovatele (z)
zBuffer.sort((a, b) => b.z - a.z);
// Vykreslení objektů podle z-bufferu
zBuffer.forEach(obj => {
drawCircle(obj.projectedX, obj.projectedY, obj.radius, obj.color);
});
// Pokračování v animaci
requestAnimationFrame(animate);
}
// Přidání posluchačů událostí pro rotaci a zoom pomocí myši
canvas.addEventListener('mousedown', (e) => {
isDragging = true;
lastMouseX = e.clientX;
lastMouseY = e.clientY;
});
canvas.addEventListener('mouseup', () => {
isDragging = false;
});
canvas.addEventListener('mouseleave', () => {
isDragging = false;
});
canvas.addEventListener('mousemove', (e) => {
if (isDragging) {
const deltaX = e.clientX - lastMouseX;
const deltaY = e.clientY - lastMouseY;
rotationY -= deltaX * 0.005; // Inverze směru rotace pro intuitivnější ovládání
rotationX = Math.min(Math.max(rotationX + deltaY * 0.005, -Math.PI / 2), Math.PI / 2);
lastMouseX = e.clientX;
lastMouseY = e.clientY;
}
});
// Přidání posluchače události pro zoom kolečkem myši
canvas.addEventListener('wheel', (e) => {
zoom += e.deltaY * -0.001;
zoom = Math.max(0.1, zoom);
e.preventDefault();
}, { passive: false });
// Spuštění animace
animate();
</script>
</body>
</html>
Write, Run & Share HTML code online using OneCompiler's HTML online Code editor for free. It's one of the robust, feature-rich online Code editor for HTML language, running on the latest version HTML5. Getting started with the OneCompiler's HTML compiler is simple and pretty fast. The editor shows sample boilerplate code when you choose language as HTML. You can also specify the stylesheet information in styles.css tab and scripts information in scripts.js tab and start coding.
HTML(Hyper Text Markup language) is the standard markup language for Web pages, was created by Berners-Lee in the year 1991. Almost every web page over internet might be using HTML.
<!DOCTYPE html><html> and ends with </html><h1> to <h6> where <h1> is the highest important heading and <h6> is the least important sub-heading.<p>..</p> tag.<a> tag.
<a href="https://onecompiler.com/html">HTML online compiler</a>
<img> tag, where src attribute consists of image name.<button>..</button> tag<ul> for unordered/bullet list and <ol> for ordered/number list, and the list items are defined in <li>.<a href="https://onecompiler.com/html">HTML online compiler</a>
CSS(cascading style sheets) describes how HTML elements will look on the web page like color, font-style, font-size, background color etc.
Below is a sample style sheet which displays heading in green and in Candara font with padding space of 25px.
body{
padding: 25px;
}
.title {
color: #228B22;
font-family: Candara;
}
<table> tag.<tr> tag<th> tag<td> tag<caption> tag<script> is the tag used to write scripts in HTML<script src="script.js"></script>