Webleb - Extraits de Code

HTML

<!DOCTYPE html>

<head>

<title>Universe Formation Simulation</title>

<style>

html, body {

margin: 0;

overflow: hidden;

background: black;

}

canvas {

display: block;

}

</style>

</head>

<body>

const canvas = document.getElementById('universe');

const ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;

canvas.height = window.innerHeight;

const bodies = [];

const stars = [];

const G = 0.05; // Gravitational constant

const collisionTime = 10 * 1000;

const newBodyDelay = 10 * 1000;

const now = () => performance.now();

function rand(min, max) {

return Math.random() * (max - min) + min;

}

function createStars(count = 300) {

for (let i = 0; i < count; i++) {

stars.push({

x: rand(0, canvas.width),

y: rand(0, canvas.height),

radius: Math.random() * 1.5,

alpha: Math.random()

});

}

function drawStars() {

for (const star of stars) {

ctx.fillStyle = `rgba(255,255,255,${star.alpha})`;

ctx.beginPath();

ctx.arc(star.x, star.y, star.radius, 0, Math.PI * 2);

ctx.fill();

}

class Body {

constructor(x, y, vx, vy, radius, color) {

this.x = x;

this.y = y;

this.vx = vx;

this.vy = vy;

this.radius = radius;

this.color = color;

this.mass = radius * 2;

this.alive = true;

this.spawnTime = now();

}

applyGravity(others) {

for (const other of others) {

if (this === other || !other.alive) continue;

const dx = other.x - this.x;

const dy = other.y - this.y;

const distSq = dx * dx + dy * dy;

const dist = Math.sqrt(distSq);

if (dist < 2) continue;

const force = G * this.mass * other.mass / distSq;

const ax = force * dx / dist;

const ay = force * dy / dist;

this.vx += ax / this.mass;

this.vy += ay / this.mass;

}

move() {

this.x += this.vx;

this.y += this.vy;

}

draw() {

ctx.fillStyle = this.color;

ctx.beginPath();

ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);

ctx.fill();

}

collidesWith(other) {

const dx = other.x - this.x;

const dy = other.y - this.y;

return Math.hypot(dx, dy) < this.radius + other.radius;

}

function spawnInitialBodies(count = 8) {

for (let i = 0; i < count; i++) {

bodies.push(new Body(

rand(100, canvas.width - 100),

rand(100, canvas.height - 100),

rand(-1, 1),

rand(10, 20),

`hsl(${rand(0, 360)}, 100%, 70%)`

));

}

function handleCollisions() {

for (let i = 0; i < bodies.length; i++) {

for (let j = i + 1; j < bodies.length; j++) {

const a = bodies[i], b = bodies[j];

if (a.alive && b.alive && now() - a.spawnTime > collisionTime && a.collidesWith(b)) {

a.alive = false;

b.alive = false;

const newX = (a.x + b.x) / 2;

const newY = (a.y + b.y) / 2;

setTimeout(() => {

bodies.push(new Body(

newX,

newY,

rand(-0.5, 0.5),

Math.min(a.radius + b.radius, 40),

`hsl(${rand(0, 360)}, 100%, 80%)`

));

}, newBodyDelay);

}

function animate() {

ctx.clearRect(0, 0, canvas.width, canvas.height);

drawStars();

handleCollisions();

for (const body of bodies) {

if (!body.alive) continue;

body.applyGravity(bodies);

body.move();

body.draw();

}

requestAnimationFrame(animate);

}

createStars();

spawnInitialBodies();

animate();

</script>

</body>

</html>

Big Bang HTML

Recommandé

Modèle de page de connexion HTML

Bouton HTML CSS

Code du formulaire de connexion HTML

HTML

CSS

JS

Recommandé

Modèle de page de connexion HTML

Bouton HTML CSS

Code du formulaire de connexion HTML

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS