Web-программирование

Всем привет, окунитесь в обычный рабочий день frontend разработчика. Жена пикабушника делает листинг каталога для онлайн бронирования vr игр

Приятного просмотра, с удовольствием отвечу на все вопросы по теме

<script src="script.js"></script>

</body>

</html>

```

### CSS

В CSS файле мы зададим размеры нашего canvas и добавим некоторые базовые стили для оформления:

```css

body {

display: flex;

flex-direction: column;

align-items: center;

font-family: Arial, sans-serif;

}

canvas {

border: 1px solid black;

margin-top: 20px;

cursor: pointer;

}

h1 {

margin-bottom: 0;

}

```

### JavaScript

JavaScript будет использоваться для управления логикой игры. Основная идея — это создать сетку, на которой пользователь сможет "строить" здания путем кликов:

```javascript

const canvas = document.getElementById('cityCanvas');

const ctx = canvas.getContext('2d');

const gridSize = 10;

const cellSize = 40; // Размер клетки на сетке

canvas.width = gridSize * cellSize;

canvas.height = gridSize * cellSize;

const cityGrid = new Array(gridSize).fill(0).map(() => new Array(gridSize).fill(0));

// Функция для отрисовки сетки

function drawGrid() {

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.fillStyle = 'blue';

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;

drawGrid();

});

// Начальная отрисовка сетки

drawGrid();

```

### Описание

1. **HTML**: Создает базовый каркас страницы с canvas, где будет происходить рисование.

2. **CSS**: Определяет стили для страницы и canvas, добавляя границу и стили для текста.

3. **JavaScript**: Определяет сетку города, состоящую из массивов. Пользователь может кликать на клетку сетки, чтобы "строить" (или "сносить") здания, используя двумерный массив для отслеживания состояния каждой клетки.

Этот базовый проект можно улучшать и расширять, добавляя больше функций, таких как разные типы зданий, экономика, ресурсы, и так далее.

Посмотреть: рутуб, youtube

С озвучкой помог Борис из SaluteSpeech

Содержание:

• Страница с чатами и совпадениями

Посмотреть: рутуб, youtube

С озвучкой помог Максим бот из fretts

Содержание:

• Всплывающие уведомления при совпадении

• Страница с историей лайков/дизлайков