Big Bang HTML

1008 kevekıbhack

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

12 December 2025

Jeu HTML5 Friday Night Funkin' Intégration

8 March 2024

Menu HTML

15 July 2025

Modèle HTML de générateur de citations en français

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é

Jeu HTML5 Friday Night Funkin' Intégration

Menu HTML

Modèle HTML de générateur de citations en français

HTML

CSS

JS

Recommandé

Jeu HTML5 Friday Night Funkin' Intégration

Menu HTML

Modèle HTML de générateur de citations en français

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS