Crowd who escapes from the fire in canvas's game

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

No:11917

104

←

Prev Next

→

Crowd who escapes from the fire in canvas
Developer User4917｜Date and time 23/8/13 3:51:18
Build time 21.264 sec｜Game capacity 2.532KB｜

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>Crowd Escape Game</title>
    <style>
      #canvas {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas" width="400" height="400"></canvas>

const imageWidth = 50;  // Width of each pictogram
      const imageHeight = 50; // Height of each pictogram
      const crowdSize = 10;   // Number of people in the crowd

const crowd = []; // Array to hold the crowd objects
      let animationFrameId; // Variable to store the animation frame ID

// Create a Person object to represent each person in the crowd
      function Person(x, y) {
        this.x = x;
        this.y = y;
        this.speedX = Math.random() * 5 - 2.5; // Random x-axis speed
        this.speedY = Math.random() * 5 - 2.5; // Random y-axis speed
      }

// Function to randomly position and initialize the crowd objects
      function initializeCrowd() {
        for (let i = 0; i < crowdSize; i++) {
          const x = Math.random() * (canvas.width - imageWidth);
          const y = Math.random() * (canvas.height - imageHeight);
          crowd.push(new Person(x, y));
        }
      }

// Function to draw the crowd on the canvas
      function drawCrowd() {
        context.clearRect(0, 0, canvas.width, canvas.height);

for (const person of crowd) {
          // Draw a pictogram for each person in the crowd
          context.fillRect(person.x, person.y, imageWidth, imageHeight);
        }
      }

// Function to update the positions of the crowd objects
      function updateCrowd() {
        for (const person of crowd) {
          person.x += person.speedX;
          person.y += person.speedY;

// Reverse the direction when hitting the canvas boundaries
          if (person.x <= 0 || person.x >= canvas.width - imageWidth) {
            person.speedX = -person.speedX;
          }
          if (person.y <= 0 || person.y >= canvas.height - imageHeight) {
            person.speedY = -person.speedY;
          }
        }
      }

// Function to start the game loop
      function startGame() {
        initializeCrowd();

function gameLoop() {
          updateCrowd();
          drawCrowd();

animationFrameId = requestAnimationFrame(gameLoop);
        }

gameLoop();
      }

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