Выразительный JavaScript (Хавербеке) - страница 159

На первую страницу

>  table.style.width = this.level.width * scale + "px";

>  this.level.grid.forEach(function(row) {

>    var rowElt = table.appendChild(elt("tr"));

>    rowElt.style.height = scale + "px";

>    row.forEach(function(type) {

>      rowElt.appendChild(elt("td", type));

>    });

>  });

>  return table;

>};

Как мы уже упоминали, фон рисуется через элемент >

. Это удобно соответствует тому факту, что уровень задан в виде решётки – каждый ряд решётки превращается в ряд таблицы (элемент >). Строки решётки используются как имена классов ячеек таблицы (>
). Следующий CSS приводит фон к необходимому нам внешнему виду:

>.background    { background: rgb(52, 166, 251);

>                 table-layout: fixed;

>                 border-spacing: 0;              }

>.background td { padding: 0;                     }

>.lava          { background: rgb(255, 100, 100); }

>.wall          { background: white;              }

Некоторые из настроек (>table-layout, >border-spacing и >padding) используются для подавления нежелательного поведения по умолчанию. Не нужно, чтобы вид таблицы зависел от содержимого ячеек, и не нужны пробелы между ячейками или отступы внутри них.

Правило >background задаёт цвет фона. CSS разрешает задавать цвета словами (>white) и в формате >rgb(R, G, B), где красная, зелёная и синяя компоненты разделены на три числа от 0 до 255. То есть, в записи >rgb(52, 166, 251) красный компонент равен 52, зелёный 166 и синий 251. Поскольку синий компонент самый большой, результирующий цвет будет синеватым. Вы можете видеть, что самый большой компонент в правиле >.lava – красный.

Каждый актёр рисуется созданием элемента DOM и заданием позиции и размера, основываясь на свойства актёра. Значения надо умножать на масштаб >scale, чтобы переходить от единиц игры к пикселям.

>DOMDisplay.prototype.drawActors = function() {

>  var wrap = elt("div");

>  this.level.actors.forEach(function(actor) {

>    var rect = wrap.appendChild(elt("div",

>                                    "actor " + actor.type));

>    rect.style.width = actor.size.x * scale + "px";

>    rect.style.height = actor.size.y * scale + "px";

>    rect.style.left = actor.pos.x * scale + "px";

>    rect.style.top = actor.pos.y * scale + "px";

>  });

>  return wrap;

>};

Чтобы задать элементу больше одного класса, мы разделяем их имена пробелами. В коде CSS класс >actor задаёт позицию >absolute. Имя типа используется в дополнительном классе для задания цвета. Нам не надо заново определять класс >lava, потому что мы повторно используем класс для лавы из решётки, который мы определили ранее.

Следующая страница