Make a Civilization game where you Take turns and make history the start era is 100000 BCE and end is 6000 AD's game

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

No:17543

102

←

Prev Next

→

Make a Civilization game where you Take turns and ..ALL
Developer User7632｜Date and time 23/9/23 20:48:51
Build time 32.98 sec｜Game capacity 2.716KB｜

Script

Sure! Here's a simple implementation of a Civilization game as a single HTML file using JavaScript:

Current Era:

The game starts in the "Prehistoric" era with a dinosaur icon. Each time the player clicks the "Next Turn" button, the game advances by 100 years and the era updates accordingly. The game continues until reaching the year 6000 AD. After that, the button will be disabled and display "Game Over". The game uses the Font Awesome library to display pictogram-style icons. You can find the library linked in the HTML file using the `<link>` tag. Please note that this is a basic implementation, and you can further expand it by adding more game mechanics, features, and interactions based on your requirements and preferences.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

Sure! Here's a simple implementation of a Civilization game as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Civilization Game</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
  <style>
    #game-container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    
    #btn-next {
      display: none;
    }
    
    .era-text {
      font-size: 24px;
      margin-bottom: 20px;
    }
    
    .era-icon {
      font-size: 48px;
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
  <div id="game-container">
    <div id="era-container">
      <p class="era-text">Current Era:</p>
      <i class="era-icon fas fa-landmark"></i>
    </div>
    <button id="btn-next">Next Turn</button>
  </div>

// DOM elements
    var eraName = document.querySelector('.era-text');
    var eraIcon = document.querySelector('.era-icon');
    var nextBtn = document.getElementById('btn-next');

// Initialize game
    function initializeGame() {
      eraName.textContent = 'Current Era: ' + era.name;
      eraIcon.className = 'era-icon fas ' + era.icon;
      nextBtn.style.display = 'block';

nextBtn.addEventListener('click', function() {
        nextTurn();
      });
    }

// Perform a turn and update era
    function nextTurn() {
      era.startYear += 100;
      era.endYear += 100;

if (era.startYear >= 0) {
        era.name = 'AD ' + Math.abs(era.startYear);
      } else {
        era.name = 'BCE ' + Math.abs(era.startYear);
      }

// Update the era display
      eraName.textContent = 'Current Era: ' + era.name;

// Check if game ends
      if (era.endYear >= 6000) {
        nextBtn.textContent = 'Game Over';
        nextBtn.disabled = true;
      }
    }

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

The game uses the Font Awesome library to display pictogram-style icons. You can find the library linked in the HTML file using the `<link>` tag.

Please note that this is a basic implementation, and you can further expand it by adding more game mechanics, features, and interactions based on your requirements and preferences.