City Builder

City Builder

Money: Infinite

Info / Build Options

Select a tile on the map.

body { margin: 0; overflow: hidden; font-family: sans-serif; background-color: #f0f0f0; display: flex; justify-content: center; align-items: center; min-height: 100vh; } #game-container { display: flex; width: 95vw; height: 95vh; border: 1px solid #ccc; box-shadow: 0 0 10px rgba(0,0,0,0.1); background-color: #fff; } #map-area { flex-grow: 1; position: relative; overflow: hidden; } #game-canvas { display: block; background-color: #a0d0a0; /* Placeholder for grass/terrain */ } #ui-area { width: 300px; padding: 20px; border-left: 1px solid #ccc; display: flex; flex-direction: column; gap: 20px; overflow-y: auto; } #money-display { font-size: 1.2em; font-weight: bold; color: green; } #info-panel h3 { margin-top: 0; margin-bottom: 10px; border-bottom: 1px solid #eee; padding-bottom: 5px; } /* Style for buttons dynamically added to info-panel */ #info-panel .build-option-button { display: block; width: 100%; padding: 10px; margin-bottom: 5px; cursor: pointer; border: 1px solid #ccc; background-color: #eee; text-align: left; } #info-panel .build-option-button:hover { background-color: #ddd; } // Basic structure for the city building game logic const canvas = document.getElementById('game-canvas'); const ctx = canvas ? canvas.getContext('2d') : null; // Check if canvas exists const uiArea = document.getElementById('ui-area'); const infoPanel = document.getElementById('info-panel'); const moneyDisplay = document.getElementById('money-display'); // Game state variables let gameState = { money: Infinity, // User requested infinite money map: [], // Represents the game map (e.g., 2D array of tiles) tileSize: 40, // Size of each tile in pixels mapWidth: 50, // Number of tiles wide mapHeight: 50, // Number of tiles high selectedTile: null // Stores { x, y } of the currently selected tile }; // Available buildings (can be expanded) const buildings = [ { type: 'house', name: 'House' }, { type: 'road', name: 'Road' }, // Add more building types here // { type: 'park', name: 'Park' }, // { type: 'factory', name: 'Factory' }, ]; // --- Initialization --- function initGame() { if (!canvas || !ctx) { console.error("Canvas or context not available. Game cannot initialize."); // Display an error message on the page if UI area is available if (uiArea) { uiArea.innerHTML = "

Error: Canvas not available.

Please ensure your browser supports HTML5 Canvas and the page loaded correctly.

"; } return; // Stop initialization } resizeCanvas(); createMap(); renderMap(); setupEventListeners(); updateUI(); console.log("Game initialized with infinite money!"); } function resizeCanvas() { const mapArea = document.getElementById('map-area'); if (mapArea) { canvas.width = mapArea.clientWidth; canvas.height = mapArea.clientHeight; console.log(`Canvas resized to: ${canvas.width}x${canvas.height}`); // Re-render map after resize renderMap(); } else { console.error("Map area element not found."); } } function createMap() { // Initialize a simple map (e.g., all grass tiles) gameState.map = Array(gameState.mapHeight).fill(null).map(() => Array(gameState.mapWidth).fill({ type: 'grass', building: null }) ); } // --- Rendering --- function renderMap() { if (!ctx) return; // Ensure context is available ctx.clearRect(0, 0, canvas.width, canvas.height); // Simple rendering loop (needs optimization for large maps) // Only render tiles visible in the current canvas view const startTileX = 0; // For now, always start from 0,0 const startTileY = 0; const endTileX = Math.min(gameState.mapWidth, Math.ceil(canvas.width / gameState.tileSize)); const endTileY = Math.min(gameState.mapHeight, Math.ceil(canvas.height / gameState.tileSize)); for (let y = startTileY; y < endTileY; y++) { for (let x = startTileX; x < endTileX; x++) { const tile = gameState.map[y][x]; const screenX = x * gameState.tileSize; const screenY = y * gameState.tileSize; // Draw tile background (e.g., grass) ctx.fillStyle = tile.type === 'grass' ? '#a0d0a0' : '#ccc'; // Basic color based on type ctx.fillRect(screenX, screenY, gameState.tileSize, gameState.tileSize); ctx.strokeStyle = '#88b088'; // Tile border ctx.strokeRect(screenX, screenY, gameState.tileSize, gameState.tileSize); // Draw building if exists if (tile.building) { drawBuilding(tile.building, screenX, screenY); } // Highlight selected tile if (gameState.selectedTile && gameState.selectedTile.x === x && gameState.selectedTile.y === y) { ctx.strokeStyle = 'yellow'; ctx.lineWidth = 2; ctx.strokeRect(screenX, screenY, gameState.tileSize, gameState.tileSize); ctx.lineWidth = 1; // Reset line width } } } } function drawBuilding(building, x, y) { if (!ctx) return; // Ensure context is available // Placeholder function to draw buildings ctx.fillStyle = building.type === 'house' ? 'brown' : building.type === 'road' ? 'gray' : 'purple'; // Basic color ctx.fillRect(x + 2, y + 2, gameState.tileSize - 4, gameState.tileSize - 4); ctx.fillStyle = 'white'; ctx.font = '12px Arial'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(building.type.substring(0, 1).toUpperCase(), x + gameState.tileSize / 2, y + gameState.tileSize / 2); } // --- UI Updates --- function updateUI() { if (moneyDisplay) { moneyDisplay.textContent = `Money: ${gameState.money === Infinity ? 'Infinite' : gameState.money}`; } // updateInfoPanel is called separately based on tile selection } function updateInfoPanelDefault() { if (!infoPanel) return; infoPanel.innerHTML = `

Info / Build Options

Select a tile on the map.

`; } function updateInfoPanelTileInfo(tile, x, y) { if (!infoPanel) return; infoPanel.innerHTML = `

Info / Build Options

Tile: (${x}, ${y})

Tile Type: ${tile.type}

${tile.building ? `

Building: ${tile.building.type}

` : '

No building

'} `; } function showBuildOptions(x, y) { if (!infoPanel) return; infoPanel.innerHTML = `

Build at (${x}, ${y})

Choose a building:

${buildings.map(b => ``).join('')} `; } // --- Event Handling --- function setupEventListeners() { window.addEventListener('resize', resizeCanvas); if (canvas) { canvas.addEventListener('click', handleMapClick); } if (infoPanel) { infoPanel.addEventListener('click', handleInfoPanelClick); } } function handleMapClick(event) { if (!canvas || !ctx) return; const rect = canvas.getBoundingClientRect(); const clickX = event.clientX - rect.left; const clickY = event.clientY - rect.top; const tileX = Math.floor(clickX / gameState.tileSize); const tileY = Math.floor(clickY / gameState.tileSize); if (tileX >= 0 && tileX < gameState.mapWidth && tileY >= 0 && tileY < gameState.mapHeight) { const tile = gameState.map[tileY][tileX]; console.log(`Clicked tile: (${tileX}, ${tileY})`, tile); // Store the selected tile gameState.selectedTile = { x: tileX, y: tileY }; // Show build options or tile info if (!tile.building) { showBuildOptions(tileX, tileY); } else { updateInfoPanelTileInfo(tile, tileX, tileY); } renderMap(); // Re-render to show selected tile highlight } } function handleInfoPanelClick(event) { const target = event.target; if (target.classList.contains('build-option-button')) { const action = target.dataset.action; const buildingType = target.dataset.buildingType; if (action === 'cancel') { console.log("Build cancelled."); gameState.selectedTile = null; // Deselect tile updateInfoPanelDefault(); // Reset info panel renderMap(); // Re-render to remove highlight } else if (buildingType && gameState.selectedTile) { // User selected a building type const { x, y } = gameState.selectedTile; const tile = gameState.map[y][x]; if (!tile.building) { // Double check tile is still empty buildBuilding(x, y, buildingType); gameState.selectedTile = null; // Deselect tile after building updateInfoPanelTileInfo(gameState.map[y][x], x, y); // Show info of the newly built item renderMap(); // Re-render to show new building and remove highlight } else { console.warn(`Tile (${x}, ${y}) is no longer empty.`); gameState.selectedTile = null; // Deselect tile updateInfoPanelTileInfo(tile, x, y); // Show info of whatever is there renderMap(); // Re-render to remove highlight } } } } // --- Game Logic --- function buildBuilding(x, y, type) { // In a real game, this would check costs, requirements, etc. // With infinite money, we just place it. if (gameState.map[y][x].building === null) { gameState.map[y][x].building = { type: type }; console.log(`Built ${type} at (${x}, ${y})`); // Trigger updates (e.g., population, resources, etc. - not implemented here) } else { console.log(`Cannot build ${type} at (${x}, ${y}): Tile already occupied.`); } } // --- Game Loop (Optional for simple games, but needed for simulation) --- // function gameLoop(timestamp) { // // Update game state (e.g., simulate population, resources) // // renderMap(); // Re-render if state changes affect visuals // // requestAnimationFrame(gameLoop); // } // --- Start the game --- // Use DOMContentLoaded to ensure elements are available document.addEventListener('DOMContentLoaded', initGame); // requestAnimationFrame(gameLoop); // Start the game loop if needed // --- Placeholder for "EVERY possible feature" --- // Implementing "EVERY possible feature" is a massive undertaking. // This basic structure provides a canvas and UI layout. // Features like: // - Resource management (power, water, food, etc.) // - Population simulation (growth, jobs, happiness) // - Zoning and land use // - Services (police, fire, health, education) // - Transportation networks (roads, public transport) // - Disasters (fires, floods, earthquakes) // - Economic simulation (taxes, trade) // - Advanced rendering (isometric, 3D) // - Saving/Loading // - AI simulation for citizens/traffic // ...would require significant expansion of the JavaScript logic, // potentially using a game engine or framework, and extensive assets. // This script provides only the most fundamental interaction (placing a building).