Cách nhẹ nhất để tạo ra một mạng lưới cờ vua lớn như thế nào?

Question

Tôi đang làm việc trên một trình duyệt trò chơi và tôi không thể không tự hỏi về cách nào là cách nhẹ nhất để tạo lưới/bảng mà trò chơi diễn ra.

Ngay bây giờ, như một mẫu đơn thuần, tôi sẽ chỉ cho bạn này:

-Link không còn hoạt động, đó là cơ bản một bảng 25x25 + tr + td grid-

Bây giờ, khi lưới điện lớn hơn và lớn hơn, bảng và td của nó tạo ra một trang rất nặng và lần lượt ... hút nhiều tài nguyên hơn từ trình duyệt và máy tính.

Vì vậy, là một bảng với cách xử lý gọn nhẹ nhất của td là một bảng lớn giống như lưới hoặc có thứ gì đó nhẹ hơn mà bạn đề xuất?

Cheers Sotkra

Answer 1

Tính toán bố cục bảng là very complex work cho trình duyệt, bởi vì nó phải biết kích thước của ô cuối cùng để tính chiều rộng chính xác của mỗi cột. Vì vậy, nếu bạn sử dụng một bảng, hãy thêm sớm table-layout:fixed.

Hộp nổi hoặc vị trí tương đối có thể nhanh hơn để hiển thị.

Answer 2

Bạn có thể thử thoát khỏi bàn, thay vì vị trí các mảnh với CSS {position: relative; trên cùng: 20px; left: 20px} vv và vẽ một lưới backrgound lặp lại.

Answer 3

Xóa liên kết và xử lý chúng thông qua sự kiện nhấp chuột trong Javascript (tốt nhất là với một cái gì đó như JQuery) nên cắt giảm rất nhiều về kích thước tệp.

Answer 4

Bạn có thể tạo bảng bằng cách sử dụng JavaScript để thao tác DOM. Nếu nội dung của lưới là rất thường xuyên, mã để làm điều đó sẽ nhỏ hơn nhiều so với việc có 400x400 lần <td></td> cộng với đánh dấu. Tất nhiên hiệu suất sau đó phụ thuộc vào công cụ JavaScript. Nhưng nếu điều đó không hút hoàn toàn, nó thậm chí có thể nhanh hơn phân tích cú pháp tất cả HTML, độc lập với thời gian chuyển mạng.

Answer 5

Bạn có thể xây dựng nó với phao CSS, ví dụ nếu các ô vuông là 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> 

Hãy nhớ sử dụng IE với một DOCTYPE hợp lệ http://htmlhelp.com/tools/validator/doctype.html hoặc sử dụng hacks mô hình hộp trong quirks mode [http://tantek.com/CSS/Examples/boxmodelhack.html].

Bạn có thể làm cho việc nêu trên mất ít hơn nếu bạn sử dụng ID thay vì các lớp và sử dụng các chữ cái duy nhất trong CSS.

Tuy nhiên, nhanh nhất thường phụ thuộc rất nhiều vào trình duyệt, ví dụ: Tôi sẽ không ngạc nhiên nếu IE hoạt động tốt hơn với các bảng, trong khi các trình duyệt khác hoạt động tốt hơn với các DIV/float tương đối.

(Tôi đã không thử nghiệm trên, nhưng một cái gì đó tương tự nên làm việc.)

Sau đó, bạn có thể chuyển đổi ở trên để hoạt Javascript để giảm thời gian tải trang, ví dụ:

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

Đề nghị của tôi là có gạch hoàn toàn được đặt bên trong bảng, để lưu trên HTML (thời gian chuyển) và tính toán vị trí (thời gian tải) bởi trình duyệt. JS để đăng ký các nhấp chuột và xử lý nó (ít HTML = ít chuyển và thời gian tải).

Vì vậy, bạn có thể có cơ sở này 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; 
} 

Sau đó, khi html tạo ra như thế:

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

Trong đó mỗi ngói có vị trí left: [X*TileWidth]px; top: [Y*TileHeight]px;.
Điều đó, hoặc đề xuất của David M.

Bạn cũng có thể cắt giảm thời gian tải trang nếu bạn làm cho kích thước trang nhỏ hơn - vì vậy, như đề nghị, sử dụng JQuery hoặc khung JavaScript khác để tạo sự kích hoạt cho các nhấp chuột trên mỗi div sẽ là lý tưởng.
Tôi không phải là rất hiểu biết, nhưng sử dụng JQuery nó sẽ là một cái gì đó như:

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

Nếu bạn sử dụng một Imagemap để tạo ra trigger cho bảng ca rô của bạn, bạn sẽ chỉ cần nền lặp lại và hình ảnh trong suốt lấp đầy tổng số và chiều cao.