Crowd simulation réaction to fire ln canvas's game

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

No:11916

110

←

Prev Next

→

Crowd simulation réaction to fire ln canvas
Developer User4917｜Date and time 23/8/13 3:49:31
Build time 23.456 sec｜Game capacity 3.154KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Crowd Simulation Game</title>
    <style>
        canvas {
            border: 1px solid black;
            background: #fff;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="800" height="600"></canvas>
    <script type="text/javascript">
        // Variables
        var canvas = document.getElementById("gameCanvas");
        var context = canvas.getContext("2d");
        var width = canvas.width;
        var height = canvas.height;
        var crowd = [];

// Pictograms
        var firePictogram = "🔥";

// Game initialization
        function initializeGame() {
            // Create initial crowd
            for (var i = 0; i < 50; i++) {
                var person = {
                    x: Math.random() * width,
                    y: Math.random() * height,
                    velocityX: Math.random() * 4 - 2,
                    velocityY: Math.random() * 4 - 2,
                    isRunning: false
                };
                crowd.push(person);
            }

// Start game loop
            setInterval(updateGame, 1000 / 60); // 60 frames per second
        }

// Game update function
        function updateGame() {
            // Clear canvas
            context.clearRect(0, 0, width, height);

// Update each person in the crowd
            for (var i = 0; i < crowd.length; i++) {
                var person = crowd[i];

// Update position
                person.x += person.velocityX;
                person.y += person.velocityY;

// Check boundaries
                if (person.x < 0 || person.x > width) {
                    person.velocityX *= -1;
                }
                if (person.y < 0 || person.y > height) {
                    person.velocityY *= -1;
                }

// Check if person is close to fire
                var distanceToFire = getDistance(person.x, person.y, width / 2, height / 2);
                if (distanceToFire < 50) {
                    person.isRunning = true;
                }

// Draw person
                drawPerson(person);
            }

// Draw fire
            drawFire(width / 2, height / 2);
        }

// Helper function to calculate distance between two points
        function getDistance(x1, y1, x2, y2) {
            var dx = x2 - x1;
            var dy = y2 - y1;
            return Math.sqrt(dx * dx + dy * dy);
        }

// Helper function to draw a person
        function drawPerson(person) {
            context.beginPath();
            context.arc(person.x, person.y, 10, 0, Math.PI * 2);
            context.fillStyle = person.isRunning ? "red" : "black";
            context.fill();
            context.closePath();
        }

// Helper function to draw fire
        function drawFire(x, y) {
            context.font = "48px sans-serif";
            context.fillStyle = "red";
            context.fillText(firePictogram, x - 24, y + 16);
        }

// Start the game
        initializeGame();
    </script>
</body>
</html>