¿Cuál es la forma más liviana de hacer una gran cuadrícula de ajedrez?

Question

Estoy trabajando en un juego de navegador y no puedo evitar preguntarme cuál es la forma más liviana de crear la cuadrícula/tablero en la que se desarrolla el juego.

En este momento, como una simple muestra, te voy a mostrar esto:

-link ya no está activa, era básicamente una mesa de 25x25 + tr + td GRID

Ahora, como la parrilla se hace cada vez más grande, la tabla y sus td crean una página de archivo muy pesada que a su vez ... absorbe más recursos del motor del navegador y la computadora.

Por lo tanto, ¿es una tabla con td la forma más liviana de crear una gran tabla cuadriculada o hay algo más ligero que usted recomiende?

Saludos Sotkra

Answer 1

Calcular un diseño de tabla es very complex work para un navegador, porque debe conocer las dimensiones de la última celda para calcular el ancho exacto de cada columna. Entonces, si usa una tabla, agregue table-layout:fixed temprano.

Las cajas flotantes o el posicionamiento relativo pueden ser más rápidas de renderizar.

Answer 2

usted podría intentar deshacerse de la tabla, en lugar posicionamiento de las piezas con CSS {position: relative; arriba: 20px; left: 20px} etc. y dibuja una grilla repetitiva de backrgound.

Answer 3

Eliminar los enlaces y manejarlos mediante el evento click en Javascript (preferiblemente con algo como JQuery) debería reducir mucho el tamaño del archivo.

Answer 4

Puede construir la tabla usando JavaScript para manipular el DOM. Si el contenido de la cuadrícula es muy regular, el código para hacer eso sería mucho más pequeño que tener 400x400 veces <td></td> más marcado. Por supuesto, el rendimiento depende del motor de JavaScript. Pero si eso no apesta por completo, incluso podría ser más rápido que analizar todo el HTML, independientemente del tiempo de transferencia de la red.

Answer 5

se podría construir con flotadores CSS, por ejemplo, si las plazas son 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> 

recuerde utilizar IE con un tipo de documento válido http://htmlhelp.com/tools/validator/doctype.html o para usar hacks modelo de caja en el modo de peculiaridades [http://tantek.com/CSS/Examples/boxmodelhack.html].

Probablemente pueda hacer que lo anterior ocupe menos si usa ID en lugar de clases y use letras sueltas en el CSS.

Lo que es más rápido generalmente depende mucho del navegador, por ejemplo. No me sorprendería si IE funciona mejor con tablas, mientras que otros navegadores funcionan mejor con DIV/flotantes relativos.

(no he probado lo anterior, pero algo similar debería funcionar.)

A continuación, podría convertir el anterior para JavaScript para reducir los tiempos de carga de la página, por ejemplo:

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

Mi sugerencia es tener las fichas absolutamente posicionadas dentro del tablero, guardar en HTML (tiempo de transferencia) y cálculos de posición (tiempo de carga) en el navegador. JS para registrar los clics y manejarlo (menos HTML = menos transferencia y tiempo de carga).

Por lo tanto, usted podría tener esta base de 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; 
} 

luego tener el código HTML generado así:

<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> 

en el que cada baldosa tiene una posición left: [X*TileWidth]px; top: [Y*TileHeight]px;.
Eso o la sugerencia de David M.

También puede cortar el tiempo de carga de la página si se hace el tamaño de página más pequeño - por lo que, como sugirió, usando jQuery u otro marco de JavaScript para crear el detonante de la clic en cada div sería ideal.
No soy muy inteligente, pero utilizando jQuery sería algo así como:

$(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> 

Si utiliza un mapa de imágenes para producir los factores desencadenantes de su tablero a cuadros sólo se necesita el fondo repetido y una imagen transparente que llena el total con y la altura.