AI game creator

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

No:11549

128

←

Prev Next

→

Water simulator
Developer User4917｜Date and time 23/8/11 2:09:09
Build time 19.038 sec｜Game capacity 2.67KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simulateur d'eau</title>
</head>
<body>
    <div id="canvasContainer">
        <canvas id="waterCanvas"></canvas>
    </div>

// Résolution de l'écran (en pixels)
        var resolution = window.devicePixelRatio || 1;

// Définition des dimensions du canevas
        var width = window.innerWidth * resolution;
        var height = window.innerHeight * resolution;

// Ajuste la taille du canevas en fonction de la résolution de l'écran
        canvas.width = width;
        canvas.height = height;

// Définition des propriétés de l'eau
        var dropletColor = "#00AEEF";
        var dropletSize = 50 * resolution;
        var dropletSpeed = 5 * resolution;

// Liste des gouttes d'eau
        var droplets = [];

// Fonction pour créer une nouvelle goutte d'eau
        function createDroplet(x, y) {
            droplets.push({
                x: x,
                y: y,
                radius: dropletSize,
                speed: dropletSpeed
            });
        }

// Gestionnaire d'événement pour détecter le clic sur l'écran
        canvas.addEventListener("click", function(event) {
            var rect = canvas.getBoundingClientRect();
            var x = (event.clientX - rect.left) * resolution;
            var y = (event.clientY - rect.top) * resolution;

createDroplet(x, y);
        });

// Fonction pour afficher les gouttes d'eau
        function drawDroplets() {
            ctx.clearRect(0, 0, width, height);

for (var i = 0; i < droplets.length; i++) {
                var droplet = droplets[i];

// Dessine la goutte d'eau sur le canevas
                ctx.beginPath();
                ctx.arc(droplet.x, droplet.y, droplet.radius, 0, 2 * Math.PI, false);
                ctx.fillStyle = dropletColor;
                ctx.fill();

// Déplace la goutte d'eau vers le bas
                droplet.y += droplet.speed;

// Supprime la goutte d'eau une fois qu'elle est hors de l'écran
                if (droplet.y - droplet.radius > height) {
                    droplets.splice(i, 1);
                    i--;
                }
            }

requestAnimationFrame(drawDroplets);
        }

requestAnimationFrame(drawDroplets);
    </script>
</body>
</html>