Flüssigkeitssimulation. Gib keinerlei Erklärungen , nur den Code.'s game

Click here for free DL of the app version that can save data.

No:28657

152

←

Prev Next

→

Flüssigkeitssimulation. Gib keinerlei Erklärungen ..ALL
Developer User14077｜Date and time 23/12/13 22:41:09
Build time 32.539 sec｜Game capacity 2.629KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
    <title>Flüssigkeitssimulation</title>
    <style>
        #container {
           width: 100%;
           height: 100vh;
           display: flex;
           align-items: center;
           justify-content: center;
        }
    </style>
</head>
<body>
    <div id="container">
        <canvas id="canvas"></canvas>
    </div>

// Variablen für die Simulation
        var canvas, ctx, particles;

// Funktion zum Starten der Simulation
        function startSimulation() {
            // Canvas-Element auswählen
            canvas = document.getElementById("canvas");
            ctx = canvas.getContext("2d");

// Canvas-Größe festlegen
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;

// Array für die Partikel initialisieren
            particles = [];

// Partikel erstellen
            for (var i = 0; i < 100; i++) {
                particles.push({
                    x: Math.random() * canvas.width,
                    y: Math.random() * canvas.height,
                    radius: Math.random() * 5 + 1,
                    vx: Math.random() * 2 - 1,
                    vy: Math.random() * 2 - 1,
                    color: "blue"  // Farbe für die Partikel (Blau)
                });
            }

// Animationsschleife starten
            requestAnimationFrame(animate);
        }

// Funktion zum Animieren der Partikel
        function animate() {
            // Canvas zurücksetzen
            ctx.clearRect(0, 0, canvas.width, canvas.height);

// Partikel aktualisieren und zeichnen
            particles.forEach(function(particle) {
                particle.x += particle.vx;
                particle.y += particle.vy;

// Randüberprüfung
                if (particle.x < 0 || particle.x > canvas.width) {
                    particle.vx *= -1;
                }

if (particle.y < 0 || particle.y > canvas.height) {
                    particle.vy *= -1;
                }

// Partikel zeichnen
                ctx.beginPath();
                ctx.arc(particle.x, particle.y, particle.radius, 0, 2 * Math.PI);
                ctx.fillStyle = particle.color;
                ctx.fill();
            });

// Animationsschleife erneut aufrufen
            requestAnimationFrame(animate);
        }

// Simulation starten
        startSimulation();
    </script>
</body>
</html>