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

Question

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

Прямо сейчас, просто как образец, я покажу вам это:

-link больше не активен, он был в основном 25x25 таблицы + тр + тд сеточного

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

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

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

Answer 1

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

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

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

Вы можете построить его с 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 с действительным DOCTYPE http://htmlhelp.com/tools/validator/doctype.html или использовать окно модели хаков в режиме совместимости [http://tantek.com/CSS/Examples/boxmodelhack.html].

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

Что такое Самый быстрый обычно зависит от браузера, хотя, например, Я бы не удивился, если IE лучше работает с таблицами, в то время как другие браузеры лучше работают с относительными DIV/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)} 

Answer 6

Мое предложение имея плитки, абсолютно расположенные внутри доски, чтобы сохранить на 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 7

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> 

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