Crowd simulation in pixi.js's game

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

No:11909

105

←

Prev Next

→

Crowd simulation in pixi.js
Developer User4917｜Date and time 23/8/13 3:42:21
Build time 20.544 sec｜Game capacity 2.787KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Simulation de foule avec pixi.js</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script>
        const app = new PIXI.Application({
            width: window.innerWidth,
            height: window.innerHeight,
            backgroundColor: 0x000000
        });

document.body.appendChild(app.view);

const textures = {
            person: "person.png", // Replace with the actual path to your pictogram for a person
            goal: "goal.png" // Replace with the actual path to your pictogram for a goal
        };

const numPeople = 100; // Number of people in the simulation

const people = [];

for (let i = 0; i < numPeople; i++) {
            const person = new PIXI.Sprite.from(textures.person);
            person.anchor.set(0.5);
            person.x = Math.random() * app.renderer.width;
            person.y = Math.random() * app.renderer.height;
            person.speed = 1 + Math.random() * 3; // Random speed for each person
            person.vx = Math.random() > 0.5 ? person.speed : -person.speed;
            person.vy = Math.random() > 0.5 ? person.speed : -person.speed;
            
            people.push(person);
            app.stage.addChild(person);
        }

const goal = new PIXI.Sprite.from(textures.goal);
        goal.anchor.set(0.5);
        goal.x = app.renderer.width / 2;
        goal.y = app.renderer.height / 2;
        app.stage.addChild(goal);

function gameLoop() {
            for (let i = 0; i < numPeople; i++) {
                const person = people[i];

if (person.x < 0 || person.x > app.renderer.width) {
                    person.vx *= -1; // Reverse direction if person is out of screen bounds
                }
                if (person.y < 0 || person.y > app.renderer.height) {
                    person.vy *= -1; // Reverse direction if person is out of screen bounds
                }

person.x += person.vx;
                person.y += person.vy;

// Check for collision with goal
                if (collision(person, goal)) {
                    person.tint = 0x00ff00; // Change color to green when person reaches the goal
                }
            }

requestAnimationFrame(gameLoop);
        }

function collision(person, goal) {
            const dx = person.x - goal.x;
            const dy = person.y - goal.y;
            const distance = Math.sqrt(dx * dx + dy * dy);
            return distance < person.width / 2 + goal.width / 2; // Check if distance is smaller than the sum of their radii
        }

gameLoop();
    </script>
</body>
</html>