Какой самый легкий способ сделать огромную шахматную сетку?

Question

Я работаю над браузерной игрой, и я не могу не задуматься о том, какой самый легкий способ сделать сетку / доску, на которой происходит игра.

Прямо сейчас, в качестве простого примера, я покажу вам это:

-ссылка больше не активна, в основном это таблица 25x25 + tr + td grid-

Теперь, когда сетка становится все больше и больше, таблица и ее td создают очень тяжелую файловую страницу, которая, в свою очередь ... потребляет больше ресурсов из движка браузера и компьютера.

Итак, таблица с тд - самый легкий способ изготовить огромную решетчатую доску или есть что-то более легкое, что вы рекомендуете?

Приветствие Sotkra

Answer 1

Вычисление макета таблицы - это очень сложная работа для браузера, поскольку он должен знать размеры последней ячейки, чтобы вычислить точную ширину каждого столбца. Итак, если вы используете таблицу, добавьте table-layout:fixed в начале.

Плавающие блоки или относительное позиционирование могут отображаться быстрее.

Answer 2

Вы можете построить таблицу, используя JavaScript для управления DOM. Если содержимое сетки очень регулярное, то код для этого будет гораздо меньше, чем 400x400 <td></td> плюс разметка. Конечно, производительность зависит от движка JavaScript. Но если это не полный отстой, это может быть даже быстрее, чем синтаксический анализ всего HTML, независимо от времени передачи по сети.

Answer 3

Удаление ссылок и обработка их с помощью события click в Javascript (желательно с чем-то вроде JQuery) должно сильно сократить размер файла.

Answer 4

Вы можете попробовать избавиться от таблицы, вместо этого расположив куски с помощью CSS {position :lative; верх: 20 пикселей; left: 20px} и т. д. и нарисуйте повторяющуюся фоновую сетку.

Answer 5

Мое предложение состоит в том, чтобы плитки располагались абсолютно внутри доски, чтобы сэкономить на HTML (время передачи) и вычисления позиции (время загрузки) браузером. JS регистрирует клики и обрабатывает их (меньше HTML = меньше время передачи и загрузки).

Итак, у вас может быть этот базовый CSS:

#board {
  display: block;
  width: [BoardWidth]px; /* TileWidth * NumberOrColumns */
  height: [BoardHeight]px; /* TileHeight * NumberOfRows */
  position: relative;
}
.tile {
  display: block;
  width: [TileWidth]px;
  height: [TileHeight]px;
  float: left;
}

Затем генерируем html следующим образом:

<div id="board">
<div class="tile" style="position: absolute; left:0px; top:0px;"></div>
<div class="tile" style="position: absolute; left:20px; top:0px;"></div>
<div class="tile" style="position: absolute; left:40px; top:0px;"></div>
<div class="tile" style="position: absolute; left:60px; top:0px;"></div>
<div class="tile" style="position: absolute; left:0px; top:20px;"></div>
<div class="tile" style="position: absolute; left:20px; top:20px;"></div>
<div class="tile" style="position: absolute; left:40px; top:20px;"></div>
<div class="tile" style="position: absolute; left:60px; top:20px;"></div>
<div class="tile" style="position: absolute; left:0px; top:40px;"></div>
<!--(...)-->
</div>

В которой каждая плитка имеет позицию left: [X*TileWidth]px; top: [Y*TileHeight]px;.
Это или предложение Дэвида М.

Вы также можете сократить время загрузки страницы, если уменьшите размер страницы, поэтому, как и предполагалось, с использованием JQuery или другой платформы JavaScript для создания триггера для клика по каждому div будет идеальным .
Я не очень сообразителен, но с использованием JQuery это было бы что-то вроде:

$(document).ready(function() {
  $(".tile").click(function() {
    // find out which square was clicked, and perhaps redirect to a page with get variables
  });
});

Answer 6

http://www.w3schools.com/TAGS/tag_map.asp

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun" />
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury" />
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus" />
</map>

Если вы используете карту изображений для создания триггеров для своей клетчатой ​​доски, вам просто понадобится повторный фон и прозрачное изображение, которое заполняет общее значение и высоту.

Answer 7

Вы можете создать его с помощью CSS-чисел, например, если квадраты 20x20px:

<style type="text/css">
div.container {
width: Xpx; /* 20px [square box width]+1px [border width of each square])) * number of squares */
height: Xpx; /* similar to above] */
border: solid black;
border-width: 1px 0px 0px 1px;} /* North East South West */

div.square {
float: left;
width: 20px;
height: 20px;
border: solid black;
border-width: 0px 1px 1px 0px;}

div.row {
clear: both;}
</style>


<div class="container">
    <div class="row">
        <div class="square">
        </div>
        ...
    </div>
...
</div>

Не забудьте использовать IE с допустимым типом документа http://htmlhelp.com/tools/validator/doctype.html или использовать взломы блочной модели в режиме причуд [http://tantek.com/CSS/Examples/boxmodelhack.html].

Вероятно, вы могли бы сделать вышеописанное менее трудным, если бы вы использовали идентификаторы вместо классов и использовали отдельные буквы в CSS.

Что самый быстрый обычно сильно зависит от браузера, например, например. Я не удивлюсь, если IE будет лучше работать с таблицами, в то время как другие браузеры будут работать лучше с относительными DIVs / float.

(я не проверял выше, но что-то подобное должно работать.)

Затем вы можете преобразовать вышеупомянутое в JavaScript, чтобы сократить время загрузки страницы, например:

function GenHTML(NumRows, NumCols) {
    var LRows = []
    for (var x=0; x<NumRows; x++) {
        var LCols = []
        for (var y=0; y<NumCols; y++) {
            var HTML = '<div class="square"></div>'
            LCols.push(HTML)}

        LRows.push('<div class="row">'+ LCols.join('') +'</div>')}
    return LRows.join('')}

function SetHTML(NumRows, NumCols) {
    document.getElementById('container').innerHTML = GenHTML(NumRows, NumCols)}