Crowd simulation in canvas with button's game

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

No:11915

112

←

Prev Next

→

Crowd simulation in canvas with button
Developer User4917｜Date and time 23/8/13 3:47:41
Build time 24.191 sec｜Game capacity 3.341KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Simulation de foule</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="crowdCanvas" width="500" height="500"></canvas>
    <button id="startButton">Démarrer</button>
    <button id="stopButton">Arrêter</button>
    <script>
        (function () {
            // Récupérer le canvas et le contexte
            var canvas = document.getElementById("crowdCanvas");
            var ctx = canvas.getContext("2d");

// Variables pour la foule
            var population = 50; // Nombre d'individus dans la foule
            var individuals = [];
            var requestId;

// Structure de base d'un individu de foule
            var Individual = function (x, y, radius) {
                this.x = x;
                this.y = y;
                this.radius = radius;
            };

// Générer les individus de la foule
            function generateIndividuals() {
                for (var i = 0; i < population; i++) {
                    var x = Math.random() * canvas.width;
                    var y = Math.random() * canvas.height;
                    var radius = 10; // Rayon de l'individu
                    individuals.push(new Individual(x, y, radius));
                }
            }

// Dessiner la foule sur le canvas
            function drawCrowd() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);

individuals.forEach(function (individual) {
                    ctx.beginPath();
                    ctx.arc(individual.x, individual.y, individual.radius, 0, Math.PI * 2);
                    ctx.fillStyle = "black";
                    ctx.fill();
                    ctx.closePath();
                });
            }

// Mettre à jour la position de la foule
            function updateCrowd() {
                individuals.forEach(function (individual) {
                    individual.x += Math.random() * 4 - 2; // Mouvement horizontal aléatoire
                    individual.y += Math.random() * 4 - 2; // Mouvement vertical aléatoire

// Vérifier si l'individu sort du canvas et le réinitialiser à l'intérieur
                    if (individual.x < 0 || individual.x > canvas.width) {
                        individual.x = Math.random() * canvas.width;
                    }
                    if (individual.y < 0 || individual.y > canvas.height) {
                        individual.y = Math.random() * canvas.height;
                    }
                });
            }

// Boucle de rendu de la simulation
            function render() {
                drawCrowd();
                updateCrowd();
                requestId = requestAnimationFrame(render);
            }

// Gérer le clic sur le bouton de démarrage
            document.getElementById("startButton").addEventListener("click", function () {
                generateIndividuals();
                render();
            });

// Gérer le clic sur le bouton d'arrêt
            document.getElementById("stopButton").addEventListener("click", function () {
                cancelAnimationFrame(requestId);
            });
        })();
    </script>
</body>
</html>