Итак, давайте создадим потрясающий ландшафт, который вы можете использовать в своей игре. Первое, что мы должны создать набор плиток для фона. Вы можете создать свой собственный или откуда-нибудь спереть. Я решил воспользоваться этим игровым фоном:
Мне нравится визуально разделять элемент ландшафта на отдельные плитки, а затем маркировать каждую в определенном порядке. Это помогает мне легко увидеть то количество плиток, которое мне потребуется для создания моей карты.
После того, как у нас появится набор плиток, нам нужно создать структуру, которую будет использовать наша игра для формирования плиточного фона. Самый простой способ сделать это использовать двумерный массив, который содержит массив чисел, каждый номер которого представляюет собой плитку (а значит нам нужно промаркировать изображение для простоты использования). Мы можем организовать циклический обход массива и тем самым сгенерировать фон.
Как сделать красивую таблицу на HTML+CSS
Количество строк и столбцов в 2D массиве зависит от вашей игры. Для этого урока мы создадим фон из 32 ячеек по горизонтали и 20 по вертикали. Получится солидная игровая карта размером 1024 × 640 из плиток размером 32 × 32.
Создание массива 2D, честно говоря, самая нудная и трудоемкая часть работы, поэтому есть смысл воспользоваться специальной программой или ее аналогами. Они используют визуальный редактор, так что вы можете выбрать нужную вам плитку, а затем поместить ее там, где вам нужно. Эти программы используют 2D массив, но они делают за вас всю черную работу. Но, так как у нас нет программы, которая могла бы создать его для нас, нам придется сделать это вручную. Это значит, что нам придется вручную вводить в 2D массив номер каждой плитки, соответствующий ее положению на фоне.
Чтобы сэкономить время, я приведу здесь массив с некоторыми заполнеными плитками.
var ground = [ [172, 172, 172, 79, 34, 34, 34, 34, 34, 34, 34, 34, 56, 57, 54, 55, 56, 147, 67, 67, 68, 79, 79, 171, 172, 172, 173, 79, 79, 55, 55, 55], [172, 172, 172, 79, 34, 34, 34, 34, 34, 34, 146, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 155, 142, 172, 159, 189, 79, 79, 55, 55, 55], [172, 172, 172, 79, 79, 34, 34, 34, 34, 34, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 171, 172, 159, 189, 79, 79, 79, 55, 55, 55], [188, 188, 188, 79, 79, 79, 79, 34, 34, 34, 36, 172, 172, 143, 142, 157, 79, 79, 79, 79, 79, 79, 187, 159, 189, 79, 79, 79, 55, 55, 55, 55], [79, 79, 79, 79, 79, 79, 79, 79, 34, 34, 36, 172, 159, 158, 172, 143, 157, 79, 79, 79, 79, 79, 79, 79, 79, 79, 39, 51, 51, 51, 55, 55], [79, 79, 79, 79, 79, 79, 79, 79, 79, 34, 36, 172, 143, 142, 172, 172, 143, 157, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 55], [79, 79, 79, 79, 79, 79, 79, 79, 79, 34, 52, 172, 172, 172, 172, 172, 172, 143, 156, 157, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79], [79, 79, 79, 79, 79, 79, 79, 79, 79, 34, 52, 172, 172, 172, 172, 172, 172, 159, 188, 189, 79, 79, 79, 79, 79, 171, 172, 172, 173, 79, 79, 79], [79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 188, 158, 172, 172, 172, 172, 173, 79, 79, 79, 79, 79, 79, 79, 187, 158, 159, 189, 79, 79, 79], [79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 171, 172, 172, 159, 188, 189, 79, 79, 79, 79, 79, 79, 79, 79, 171, 173, 79, 79, 79, 79], [79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 171, 172, 172, 173, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 171, 173, 79, 79, 79, 79], [155, 142, 157, 79, 79, 79, 79, 79, 79, 79, 79, 79, 187, 188, 188, 189, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 171, 173, 79, 79, 79, 79], [171, 172, 173, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 171, 173, 79, 79, 79, 79], [171, 172, 143, 156, 157, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 187, 189, 79, 79, 79, 79], [187, 188, 158, 172, 173, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79], [79, 79, 79, 188, 189, 79, 79, 79, 79, 79, 79, 155, 156, 156, 157, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 155, 156], [34, 34, 79, 79, 79, 79, 79, 79, 79, 79, 79, 171, 172, 172, 173, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 155, 142, 172], [34, 34, 34, 79, 79, 79, 79, 79, 79, 79, 79, 171, 172, 172, 173, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 171, 172, 172], [34, 34, 34, 34, 79, 79, 79, 79, 79, 79, 155, 172, 172, 159, 189, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 171, 172, 172], [34, 34, 34, 34, 34, 34, 79, 79, 79, 79, 171, 172, 172, 173, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 155, 142, 172, 172] ];
Теперь с помощью этого массива с данными мы должны сгенерировать фон. Для этого нам придется сделать сделать три вещи:
Как сделать HTML grid и отобразить картинки в виде плитки на CSS #shorts
- Пройтись по каждому числу в массиве
- Перевести числа в строке и столбце в соответствующее им плиточное изображения
- Нарисовать плитку на холсте в позиции, соответствующей числам строке и столбце массива
Итак, сначала цикл:
var tilesetImage = new Image(); tilesetImage.src = ‘path/to/image.png’; tilesetImage.onload = drawImage; var canvas = document.getElementById(‘main’); var ctx = canvas.getContext(‘2d’); var tileSize = 32; // Размер плитки (32×32) var rowTileCount = 20; // Количество плиток в каждом ряду фона var colTileCount = 32; // Количество плиток в каждом столбце фона var imageNumTiles = 16; // Количество плиток в каждом ряду тайлсета function drawImage () < for (var r = 0; r < rowTileCount; r++) < for (var c = 0; c < colTileCount; c++) < var tile = ground[ r ][ c ]; // Шаги 2 и 3 >> >
Далее, мы определяем ряд и столбец плитки.
Это не так сложно, как кажется. Чтобы найти ряд плитки, мы делим число на количество плиток в ряду (16) и округляем. Для расчета столбца плитки, мы Mod ( % ) число на количество плиток в ряду и округляем. Например, давайте определим нужные ряд и столбец плитки под номером 10. Это ряд 0 и столбец 10 (то есть, первый ряд и одиннадцатый столбец, но так как мы начали отчет с нуля, нумерация всех рядов и столбцов тоже должна начинаться с нуля, а не с единицы). Используем наш формулу, row = Math.floor(10 / 16) = Math.floor(0.625) = 0 и col = Math.floor(10 % 16) = Math.floor(10) = 10 .
var tileRow = (tile / imageNumTiles) | 0; // Операция «побитовое ИЛИ» var tileCol = (tile % imageNumTiles) | 0;
Операция «побитовое ИЛИ» ( | 0 ) делает тоже самое, что и Math.floor , но гораздо быстрее. Наконец, мы должны нарисовать плитки размером 32×32 на холсте. Удобно, что API canvas предоставляет возможность сделать это с помощью функции DrawImage (). Определяя область отсечения, мы можем отобразить только нужную часть изображения, а не всю картинку.
Чтобы перевести строку и столбец плитки в координаты изображения x и y , мы просто умножим их на размер плитки. Когда мы рисуем изображение на холсте, мы делаем то же самое для r и c , чтобы правильно нарисовать плитку на фотовом изображении.
ctx.drawImage(tilesetImage, (tileCol * tileSize), (tileRow * tileSize), tileSize, tileSize, (c * tileSize), (r * tileSize), tileSize, tileSize);
Собираем все вместе, получаем:
var tilesetImage = new Image(); tilesetImage.src = ‘path/to/image.png’; tilesetImage.onload = drawImage; var canvas = document.getElementById(‘main’); var ctx = canvas.getContext(‘2d’); var tileSize = 32; // Размер плитки (32×32) var rowTileCount = 20; // Количество плиток в каждом ряду фона var colTileCount = 32; // Количество плиток в каждом столбце фона var imageNumTiles = 16; // Количество плиток в каждом ряду тайлсета function drawImage () < for (var r = 0; r < rowTileCount; r++) < for (var c = 0; c < colTileCount; c++) < var tile = ground[ r ][ c ]; var tileRow = (tile / imageNumTiles) | 0; // Операция «побитовое ИЛИ» var tileCol = (tile % imageNumTiles) | 0; ctx.drawImage(tilesetImage, (tileCol * tileSize), (tileRow * tileSize), tileSize, tileSize, (c * tileSize), (r * tileSize), tileSize, tileSize); >> >
И, когда мы пробежимся по всему массиву, мы нарисуем наш ландшафт на холсте.
Расслоение плитки
Как видите, наш фон выглядит не очень интересно. Я бы даже сказал тоскливо. Как вы уже, наверное, догадались, нам потребуется еще один 2D массив, который мы нарисуем сверху первого.
var layer1 = [ [0, 0, 32, 33, 0, 236, 0, 0, 236, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 69, 0, 0, 0, 0, 0, 32, 33], [0, 0, 48, 49, 0, 236, 220, 220, 236, 0, 0, 147, 72, 73, 70, 71, 72, 73, 83, 83, 84, 85, 0, 0, 0, 0, 0, 48, 49], [0, 0, 64, 65, 54, 0, 236, 236, 0, 0, 162, 163, 84, 89, 86, 87, 88, 89, 99, 99, 100, 101, 0, 0, 0, 0, 7, 112, 113], [0, 0, 80, 81, 70, 54, 55, 50, 0, 0, 0, 179, 100, 105, 102, 103, 104, 105, 0, 0, 0, 0, 0, 0, 16, 22, 23, 39], [0, 0, 96, 97, 86, 70, 65, 144, 193, 0, 0, 37, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 48, 49], [0, 0, 0, 0, 102, 86, 81, 160, 161, 0, 0, 37, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 64, 65, 174, 175, 67, 66, 54], [0, 0, 0, 0, 0, 102, 97, 176, 177, 0, 0, 37, 0, 252, 0, 0, 0, 201, 202, 0, 0, 0, 0, 0, 80, 81, 190, 191, 83, 82, 70, 71], [0, 0, 0, 0, 0, 0, 0, 48, 49, 0, 0, 53, 0, 0, 0, 0, 0, 217, 218, 0, 0, 0, 0, 0, 96, 97, 222, 223, 99, 98, 86, 87], [201, 202, 0, 0, 0, 0, 0, 64, 65, 66, 68, 69, 0, 0, 0, 0, 0, 233, 234, 0, 0, 0, 0, 0, 238, 239, 0, 0, 238, 239, 102, 103], [217, 218, 0, 0, 0, 0, 0, 80, 81, 82, 84, 85, 0, 0, 0, 0, 0, 249, 250, 0, 0, 0, 0, 0, 254, 255, 0, 0, 254, 255], [233, 234, 0, 0, 0, 0, 0, 96, 97, 98, 100, 101, 0, 0, 0, 0, 0, 0, 0], [249, 250, 0, 0, 201, 202, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 238, 239, 0, 0, 238, 239], [0, 0, 0, 0, 217, 218, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 254, 255, 0, 0, 254, 255], [0, 0, 0, 0, 233, 234, 196, 197, 198], [2, 3, 4, 0, 249, 250, 228, 229, 230], [18, 19, 20, 8, 0, 0, 244, 245, 246, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 201, 202], [0, 35, 40, 24, 25, 8, 9, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 2, 3, 4, 0, 0, 0, 0, 0, 0, 0, 0, 217, 218], [0, 0, 0, 40, 41, 20, 8, 9, 0, 0, 0, 0, 0, 0, 0, 16, 17, 18, 19, 20, 21, 0, 0, 0, 0, 0, 0, 0, 233, 234], [0, 0, 0, 0, 40, 19, 24, 25, 8, 9, 0, 0, 0, 0, 0, 48, 49, 50, 51, 52, 115, 3, 4, 0, 0, 0, 0, 0, 249, 250], [0, 0, 0, 0, 0, 0, 40, 41, 20, 21, 0, 0, 0, 0, 0, 64, 65, 66, 67, 52, 19, 19, 20, 21] ];
Добавляем новый слой в нашем цикле:
for (var r = 0; r < rowTileCount; r++) < for (var c = 0; c < colTileCount; c++) < var tile = ground[ r ][ c ]; var tileRow = (tile / imageNumTiles) | 0; // Операция «побитовое ИЛИ» var tileCol = (tile % imageNumTiles) | 0; ctx.drawImage(tilesetImage, (tileCol * tileSize), (tileRow * tileSize), tileSize, tileSize, (c * tileSize), (r * tileSize), tileSize, tileSize); tile = layer1[ r ][ c ]; tileRow = (tile / imageNumTiles) | 0; tileCol = (tile % imageNumTiles) | 0; ctx.drawImage(tilesetImage, (tileCol * tileSize), (tileRow * tileSize), tileSize, tileSize, (c * tileSize), (r * tileSize), tileSize, tileSize); >>
Вы можете добавить столько слоев, сколько вам нужно, чтобы создать то изображение, которое вы хотите.
Вывод
Набор плиток является отличным способом, чтобы создать большие и стильные карты без необходимости в отдельных изображений для карт игрового мира. Повторяясь в нужных местах, плитки уменьшают число необходимых файлов для карт, а значит скорость, с которой игра загружается увеличивается. Этот простой движок может быть использованг в любой вашей игре для создания плиточного фона.
Источник: websketches.ru
Строчно-блочные элементы
Блочные и строчные элементы отлично дополняют друг друга при вёрстке, занимая каждый свою определённую нишу. Но возникают ситуации, когда характеристик этих элементов явно недостаточно. Галерея фотографий, представленная на рис. 1 состоит из секций, в которые входит изображение с подписью к нему, при этом секции выстраиваются по горизонтали, занимая всю доступную ширину. При уменьшении окна браузера секции переходят на другую строку.
Рис. 1. Галерея фотографий
Если для формирования секций использовать блочный элемент, то он будет каждый раз начинаться с новой строки. Для строчных элементов нельзя задавать размеры всей секции. Одним из решений является применение строчно-блочных элементов, которые сочетают преимущества строчных и блочных элементов.
Строчно-блочный элемент можно определить, задав ему в стилях свойство display со значением inline-block .
Кроме того, в HTML существует ряд элементов, для которых значение inline-block задано по умолчанию: , , , .
Характеристики этих элементов следующие.
- Высота и ширина элемента вычисляется браузером автоматически, исходя из содержимого блока.
- Размеры содержимого можно устанавливать через свойства width и height .
- Ширина блока получается сложением значений width , margin , border и padding .
- Высота блока получается сложением значений height , margin , border и padding .
- Несколько элементов идущих подряд располагаются на одной строке и переносятся на другую строку при необходимости.
- Элементы можно выравнивать по вертикали с помощью свойства vertical-align.
- Перенос текста считается за пробел.
Чтобы создать галерею, представленную на рис. 1, в стилях для figure следует задать значение display как inline-block , а внутрь элемента добавить изображение и подпись к нему через (пример 1).
Пример 1. Создание галереи
Галерея .photo < background: #d9dabb; /* Цвет фона */ width: 150px; /* Ширина */ margin: 0 10px 10px 0; /* Отступы справа и снизу */ padding: 10px 0; /* Поля сверху и снизу */ text-align: center; /* Выравнивание по центру */ display: inline-block; /* Строчно-блочный элемент */ vertical-align: top; /* Выравнивание по верхнему краю */ >.photo img < border: 2px solid #8b8e4b; /* Параметры рамки */ > Софийский собор Польский костёл Купеческий клуб Памятник Св. Владимиру
Обратите внимание, что высота секций различается, поскольку в стилях высота никак не ограничена, в отличие от ширины. Выравнивание секций можно установить через свойство vertical-align , в данном примере выравнивание делается по верхнему краю с помощью значения top .
Строчно-блочные элементы также применяются для создания макетов веб-страниц. В качестве примера возьмём трёхколоночный макет, ширина колонок задаётся в процентах (пример 2).
Пример 2. Макет из трёх колонок
Колонки создаём с помощью элементов и в стилях для каждой колонки устанавливаем свойство display со значением inline-block , а также задаём выравнивание по верхнему краю через vertical-align . Поскольку padding оказывает влияние на ширину блока, то для упрощения добавляем box-sizing со значением border-box . После этого свойство width определяет уже ширину всего блока, а не его содержимого, как раньше.
Если посмотреть на результат примера (рис. 2), то последняя колонка оказывается где-то внизу и между колонок появился небольшой промежуток.
Рис. 2. Перенос колонки на другую строку
Это связано с особенностью строчных элементов, что перенос текста в коде воспринимается как пробел. Соответственно, этот пробел и виден между колонок, он же и оказывает влияние на общую ширину макета, что и приводит к переносу последней колонки на новую строку. Ей просто не хватает места.
Способов борьбы с этой особенностью несколько, они связаны как с редактирование кода HTML, так и воздействием через CSS. В HTML всё сводится к тому, чтобы не стало пробелов между закрывающим и открывающим тегами. Перечислим некоторые популярные методы.
Перенос атрибутов в на другую строку.
Колонка 2Колонка 3
В HTML допустимо переносить закрывающую угловую скобку.
Перенос текста внутри .
Использование комментариев в HTML.
Один из изящных способов борьбы с пробелом в HTML — использование комментариев. Это позволяет сохранить структуру кода без дополнительных переносов.
В CSS тоже есть несколько методов.
Отрицательный margin-right или margin-left . Способ не очень универсальный, поскольку величина отступа зависит от размера шрифта и настроек браузера.
section
Нулевой размер шрифта. Для родительского элемента ставим нулевое значение font-size , а затем для возвращаем его в желаемое значение.
main < font-size: 0; >section
После этих манипуляций с HTML или CSS колонки выстраиваются нужным нам образом (рис. 3).
Рис. 3. Макет из трёх колонок
Источник: webref.ru
Masonry — блоки в виде кирпичной кладки на чистом css
Всем привет! Сегодня я бы хотел рассказать о том, как можно без плагинов и скриптов сделать блоки в виде кирпичной кладки (masonry с англ. — кирпичная кладка), то есть блоки разной высоты будут красиво друг под другом располагаться без больших пустых отступов. Да! Всё это можно очень легко сделать с помощью css.
В css есть свойство, с помощью которого можно создать многоколоночный текст или блоки. Им и воспользуемся.
Свойство так и называется columns. Это универсальное свойство, которое позволяет сразу задать ширину и количество колонок. Подробнее о нём вы можете почитать в хорошем css справочнике .
Итак, всё на самом деле очень просто. Например, у нас есть 6 элементов разной высоты, но одинаковой ширины. Яркий пример — это сайдбар (боковая колонка) на сайтах. Тут все блоки одинаковой ширины, но разной высоты. Обычно в мобильной версии сайта сайдбар располагают после основного контента, внизу сайта, а сам контент делают на всю ширину экрана.
Естественно так же в одну колонку располагать сайдбар нерационально, так как по бокам будет много свободного места, особенно, если смотреть с планшета.
Но, если блокам задать свойство display: inline-block, то они автоматически, если хватает ширины контейнера, расположатся в несколько колонок. Однако всё может выглядеть не очень красиво:
Согласитесь, эти отступы между блоками совсем не смотрятся. Поэтому это срочно нужно исправить! Для этого к блоку контейнера, в котором располагаются блоки, нужно добавить необходимые стили:
-moz-columns: 300px auto; -webkit-columns: 300px auto; columns: 300px auto;
Для кроссбраузерности используем свойства для Firefox и Webkit браузеров(Chrome, Safari, Android). Например мы расположим блоки с помощью маркированного списка тогда стили для примера на картинке будут выглядеть так:
ul < width: 1050px; -moz-columns: 300px auto; -webkit-columns: 300px auto; columns: 300px auto; >li
В таком случае блоки будут располагаться в несколько колонок минимальной шириной 300px, а количество колонок будет автоматически определяться браузером. Это удобно для создания адаптивности. В данном случае будет 3 колонки, и вот как это будет выглядеть:
Ширину контейнера(1050px) придётся подобрать, если хотите, чтобы расстояние между блоками по вертикали совпадало с расстоянием по горизонтали. Иначе ширина между колонками установится браузером автоматически. Есть свойство column-gap, которое задаёт расстояние между колонками. Но в данном случае оно будет работать не так, как хочется.
Есть другой вариант: для блоков нужно установить свойство width:100%. Также, если установлено свойство padding, как в моём случае, то необходимо установить свойство box-sizing: border-box. Теперь можно смело добавлять к контейнеру свойство column-gap, чтобы установить расстояние между колонками. Так оно будет работать как нужно.
Согласитесь, так смотрится гораздо лучше! Так же вы сможете расположить «div» блоки внутри контейнера «div». Либо, если вам нужно распределить текст на несколько колонок то, просто в тег «p» с, например, классом «text» добавляем нужный текст и для этого класса прописываем свойство columns.
Вот и всё! Так просто без лишних скриптов можно расположить блоки в виде кирпичной кладки или текст в несколько колонок. Но учтите, что в данном случае будет красиво смотреться только, если блоки будут одинаковой ширины. В другом случае остаётся только использовать хороший скрипт masonry . Скрипт автоматически абсолютно позиционирует каждый блок. Но это уже другая тема…
На этом всё! Если появились какие-то вопросы или замечания, оставляйте их в комментариях. Удачи!
Источник: computerism.ru