Создание простого градостроительного симулятора в браузере на HTML, CSS и JavaScript — это интересная задача, которая может быть решена разными способами. Ниже предложен базовый пример, как можно создать исключительно простую версию такого симулятора. Этот пример будет включать в себя представление сеткой, на которую пользователь может кликать, чтобы "строить" здания.
Начнем с HTML-файла, который создаст основную структуру страницы с элементом canvas для рисования:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Градостроительный Симулятор</title>
<link rel="stylesheet" href="styles.css">
<h1>Градостроительный Симулятор</h1>
<canvas id="cityCanvas"></canvas>
<script src="script.js"></script>
В CSS файле мы зададим размеры нашего canvas и добавим некоторые базовые стили для оформления:
font-family: Arial, sans-serif;
JavaScript будет использоваться для управления логикой игры. Основная идея — это создать сетку, на которой пользователь сможет "строить" здания путем кликов:
const canvas = document.getElementById('cityCanvas');
const ctx = canvas.getContext('2d');
const cellSize = 40; // Размер клетки на сетке
canvas.width = gridSize * cellSize;
canvas.height = gridSize * cellSize;
const cityGrid = new Array(gridSize).fill(0).map(() => new Array(gridSize).fill(0));
// Функция для отрисовки сетки
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let x = 0; x < gridSize; x++) {
for (let y = 0; y < gridSize; y++) {
ctx.strokeStyle = 'gray';
ctx.strokeRect(x * cellSize, y * cellSize, cellSize, cellSize);
if (cityGrid[x][y] === 1) { // Если построено здание
ctx.fillRect(x * cellSize, y * cellSize, cellSize, cellSize);
canvas.addEventListener('click', (event) => {
const rect = canvas.getBoundingClientRect();
const x = Math.floor((event.clientX - rect.left) / cellSize);
const y = Math.floor((event.clientY - rect.top) / cellSize);
cityGrid[x][y] = cityGrid[x][y] === 0 ? 1 : 0;
// Начальная отрисовка сетки
1. **HTML**: Создает базовый каркас страницы с canvas, где будет происходить рисование.
2. **CSS**: Определяет стили для страницы и canvas, добавляя границу и стили для текста.
3. **JavaScript**: Определяет сетку города, состоящую из массивов. Пользователь может кликать на клетку сетки, чтобы "строить" (или "сносить") здания, используя двумерный массив для отслеживания состояния каждой клетки.
Этот базовый проект можно улучшать и расширять, добавляя больше функций, таких как разные типы зданий, экономика, ресурсы, и так далее.
