civilization simulator's game

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

No:37321

←

Prev Next

→

civilization simulator
Developer User17003｜Date and time 24/1/21 1:06:28
Build time 14.749 sec｜Game capacity 4.498KB｜

Script

Sure! Here's a simple implementation of a civilization simulator game using JavaScript, enclosed in script tags within a single HTML file:

In this game, the player controls a civilization symbol (🏰) using touch or click events on a smartphone screen. The civilization can collect resources (🌿) by moving over them, and their population (👥) increases accordingly. However, there are also enemies (👽) randomly spawning on the canvas, and if the enemies come into contact with the population, the population decreases. The game continuously updates the state of the game and renders the game on the canvas using the provided pictograms. Resources and enemies spawn randomly, giving the game an element of challenge. Note: The pictograms used may not be supported on all devices or browsers, so you might need to replace them with appropriate symbols or images based on the compatibility of the target device.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's a simple implementation of a civilization simulator game using JavaScript, enclosed in script tags within a single HTML file:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Civilization Simulator</title>
</head>
<body>

// Define pictograms or sprites for the game
    const civilizationSymbol = "🏰";
    const resourceSymbol = "🌿";
    const populationSymbol = "👥";
    const enemySymbol = "👽";

// Initialize game state
    let civilization = {
      x: canvas.width / 2,
      y: canvas.height / 2
    };

let resources = [];
    let population = [];
    let enemies = [];

// Function to randomly place resources on the canvas
    function placeResources() {
      for (let i = 0; i < 10; i++) {
        let x = Math.random() * canvas.width;
        let y = Math.random() * canvas.height;
        resources.push({ x, y });
      }
    }

// Function to spawn enemy at a random location
    function spawnEnemy() {
      let x = Math.random() * canvas.width;
      let y = Math.random() * canvas.height;
      enemies.push({ x, y });
    }

// Function to render the game
    function render() {
      // Clear canvas
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// Render civilization
      ctx.fillStyle = "blue";
      ctx.font = "30px Arial";
      ctx.fillText(civilizationSymbol, civilization.x, civilization.y);

// Render resources
      ctx.fillStyle = "green";
      resources.forEach(resource => {
        ctx.fillText(resourceSymbol, resource.x, resource.y);
      });

// Render population
      ctx.fillStyle = "black";
      population.forEach(person => {
        ctx.fillText(populationSymbol, person.x, person.y);
      });

// Render enemies
      ctx.fillStyle = "red";
      enemies.forEach(enemy => {
        ctx.fillText(enemySymbol, enemy.x, enemy.y);
      });
    }

// Function to update the game logic
    function update() {
      // Move civilization with touch or click events
      canvas.addEventListener("touchstart", moveCivilization);
      canvas.addEventListener("mousedown", moveCivilization);
      
      function moveCivilization(event) {
        const rect = canvas.getBoundingClientRect();
        const touchX = event.clientX || event.touches[0].clientX;
        const touchY = event.clientY || event.touches[0].clientY;
        
        civilization.x = touchX - rect.left;
        civilization.y = touchY - rect.top;
      }

// Check if civilization collects any resources
      resources.forEach((resource, index) => {
        if (
          resource.x === civilization.x &&
          resource.y === civilization.y
        ) {
          population.push(resource);
          resources.splice(index, 1);
        }
      });

// Check if enemies attack the population
      enemies.forEach(enemy => {
        population.forEach((person, index) => {
          if (
            Math.abs(person.x - enemy.x) < 20 &&
            Math.abs(person.y - enemy.y) < 20
          ) {
            population.splice(index, 1);
          }
        });
      });

// Randomly spawn resources and enemies
      if (Math.random() < 0.01) {
        placeResources();
      }

if (Math.random() < 0.005) {
        spawnEnemy();
      }

// Render the updated game state
      render();

// Call the update function again after a delay
      requestAnimationFrame(update);
    }

// Start the game processing
    update();
  </script>

</body>
</html>
```

The game continuously updates the state of the game and renders the game on the canvas using the provided pictograms. Resources and enemies spawn randomly, giving the game an element of challenge.

Note: The pictograms used may not be supported on all devices or browsers, so you might need to replace them with appropriate symbols or images based on the compatibility of the target device.