Pre-City Mod Game

I'll create a Pre-City Mod game for you. This will be a simple city-building simulation game where players can develop a primitive settlement. Pre-City Mod Game

Build:

Information

Welcome to Pre-City Mod! Start building your settlement.

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Arial', sans-serif; } body { background-color: #f0f0f0; padding: 20px; } .game-container { max-width: 1200px; margin: 0 auto; background-color: #fff; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); overflow: hidden; } .header { background-color: #3a3a3a; color: white; padding: 15px; display: flex; justify-content: space-between; align-items: center; } .resources { display: flex; gap: 15px; } .resource { background-color: #4a4a4a; padding: 5px 10px; border-radius: 4px; font-size: 14px; } .game-area { padding: 20px; min-height: 500px; } .grid-container { display: grid; grid-template-columns: repeat(10, 1fr); grid-template-rows: repeat(10, 1fr); gap: 5px; height: 500px; background-color: #8b5a2b; padding: 10px; border-radius: 4px; } .grid-cell { background-color: #9b7653; border-radius: 4px; cursor: pointer; transition: all 0.2s; display: flex; justify-content: center; align-items: center; font-size: 24px; color: white; } .grid-cell:hover { background-color: #8b6b43; } .grid-cell.hut { background-color: #8b4513; } .grid-cell.farm { background-color: #228b22; } .grid-cell.mine { background-color: #708090; } .grid-cell.lumberyard { background-color: #556b2f; } .controls { display: flex; justify-content: space-between; padding: 15px; background-color: #f5f5f5; border-top: 1px solid #ddd; } .building-options { display: flex; gap: 10px; align-items: center; } button { padding: 8px 12px; background-color: #4a4a4a; color: white; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.2s; } button:hover { background-color: #5a5a5a; } button:disabled { background-color: #aaa; cursor: not-allowed; } .info-panel { padding: 15px; background-color: #f9f9f9; border-top: 1px solid #ddd; } #info-content { margin-top: 10px; padding: 10px; background-color: #fff; border: 1px solid #ddd; border-radius: 4px; min-height: 80px; } // Game state const gameState = { resources: { food: 50, wood: 50, stone: 20, population: 5, maxPopulation: 5 }, buildings: { hut: { count: 0, foodCost: 0, woodCost: 10, stoneCost: 0, populationBoost: 2, icon: '🏠' }, farm: { count: 0, foodCost: 0, woodCost: 15, stoneCost: 5, foodProduction: 10, icon: '🌾' }, mine: { count: 0, foodCost: 0, woodCost: 20, stoneCost: 15, stoneProduction: 8, icon: '⛏️' }, lumberyard: { count: 0, foodCost: 0, woodCost: 15, stoneCost: 10, woodProduction: 12, icon: '🪓' } }, turn: 1, selectedBuilding: null, grid: Array(100).fill(null) }; // DOM Elements const gridContainer = document.getElementById('grid-container'); const foodDisplay = document.querySelector('#food span'); const woodDisplay = document.querySelector('#wood span'); const stoneDisplay = document.querySelector('#stone span'); const populationDisplay = document.querySelector('#population span'); const infoContent = document.getElementById('info-content'); const endTurnButton = document.getElementById('end-turn'); const buildingButtons = document.querySelectorAll('[data-building]'); // Initialize the game function initGame() { createGrid(); updateResourceDisplay(); setupEventListeners(); } // Create the game grid function createGrid() { for (let i = 0; i < 100; i++) { const cell = document.createElement('div'); cell.classList.add('grid-cell'); cell.dataset.index = i; gridContainer.appendChild(cell); } } // Update resource displays function updateResourceDisplay() { foodDisplay.textContent = gameState.resources.food; woodDisplay.textContent = gameState.resources.wood; stoneDisplay.textContent = gameState.resources.stone; populationDisplay.textContent = `${gameState.resources.population}/${gameState.resources.maxPopulation}`; // Update building buttons based on available resources buildingButtons.forEach(button => { const buildingType = button.dataset.building; const building = gameState.buildings[buildingType]; if (gameState.resources.wood < building.woodCost || gameState.resources.stone < building.stoneCost) { button.disabled = true; } else { button.disabled = false; } }); } // Setup event listeners function setupEventListeners() { // Building selection buildingButtons.forEach(button => { button.addEventListener('click', () => { const buildingType = button.dataset.building; gameState.selectedBuilding = buildingType; infoContent.textContent = `Selected: ${buildingType}. Click on the grid to place.`; // Highlight the selected button buildingButtons.forEach(btn => btn.style.border = ''); button.style.border = '2px solid yellow'; }); }); // Grid cell click gridContainer.addEventListener('click', (e) => { if (!e.target.classList.contains('grid-cell')) return; if (!gameState.selectedBuilding) { infoContent.textContent = 'Select a building first!'; return; } const cellIndex = e.target.dataset.index; // Check if cell is already occupied if (gameState.grid[cellIndex]) { infoContent.textContent = 'This cell is already occupied!'; return; } const building = gameState.buildings[gameState.selectedBuilding]; // Check resources if (gameState.resources.wood < building.woodCost || gameState.resources.stone < building.stoneCost) { infoContent.textContent = 'Not enough resources!'; return; } // Place building placeBuilding(cellIndex, gameState.selectedBuilding); }); // End turn endTurnButton.addEventListener('click', endTurn); } // Place a building on the grid function placeBuilding(cellIndex, buildingType) { const building = gameState.buildings[buildingType]; // Deduct resources gameState.resources.wood -= building.woodCost; gameState.resources.stone -= building.stoneCost; // Update building count building.count++; // Update max population if it's a hut if (buildingType === 'hut') { gameState.resources.maxPopulation += building.populationBoost; } // Update grid gameState.grid[cellIndex] = buildingType; // Update UI const cell = document.querySelector(`.grid-cell[data-index="${cellIndex}"]`); cell.classList.add(buildingType); cell.textContent = building.icon; updateResourceDisplay(); infoContent.textContent = `${buildingType} built successfully!`; } // End the current turn function endTurn() { gameState.turn++; // Resource production produceResources(); // Population growth growPopulation(); // Food consumption consumeFood(); // Update UI updateResourceDisplay(); infoContent.textContent = `Turn ${gameState.turn} completed.`; } // Produce resources based on buildings function produceResources() { // Farm produces food gameState.resources.food += gameState.buildings.farm.count * gameState.buildings.farm.foodProduction; // Mine produces stone gameState.resources.stone += gameState.buildings.mine.count * gameState.buildings.mine.stoneProduction; // Lumberyard produces wood gameState.resources.wood += gameState.buildings.lumberyard.count * gameState.buildings.lumberyard.woodProduction; } // Grow population if there's room and food function growPopulation() { if (gameState.resources.population < gameState.resources.maxPopulation && gameState.resources.food >= 10) { gameState.resources.population++; gameState.resources.food -= 10; infoContent.textContent += ' Population increased!'; } } // Consume food based on population function consumeFood() { const foodConsumption = gameState.resources.population * 2; gameState.resources.food -= foodConsumption; // Check for starvation if (gameState.resources.food < 0) { infoContent.textContent += ' Your people are starving!'; // Lose population if no food if (gameState.resources.population > 0) { gameState.resources.population--; infoContent.textContent += ' Lost 1 population due to starvation.'; } gameState.resources.food = 0; } } // Check for game over conditions function checkGameOver() { if (gameState.resources.population <= 0) { alert('Game Over! Your settlement has perished.'); // Reset game or show game over screen } } // Initialize the game window.addEventListener('DOMContentLoaded', initGame); This Pre-City Mod game simulates building a primitive settlement. You start with basic resources (food, wood, stone) and a small population. Here's how to play: 1. Select a building type from the "Build" options 2. Click on an empty grid cell to place the building 3. End your turn to produce resources and grow your population Each building serves a different purpose: - Huts increase your maximum population - Farms produce food each turn - Mines produce stone each turn - Lumberyards produce wood each turn Your population consumes food each turn, and will grow if you have enough food and housing. Be careful not to run out of food, or your population will starve!