एक विशाल शतरंज की तरह ग्रिड बनाने का सबसे हल्का तरीका क्या है?

Question

मैं ब्राउज़र-गेम पर काम कर रहा हूं और मैं इस बात की परवाह नहीं कर सकता कि ग्रिड/बोर्ड बनाने के लिए सबसे हल्का तरीका क्या है।

-लिंक अब सक्रिय नहीं है, वहां मूलतः एक 25x25 तालिका + टीआर + टीडी grid-

अब ग्रिड के रूप में,:

अभी, एक मात्र नमूना के रूप में, मैं तुम्हें इस दिखाता हूँ बड़ा और बड़ा हो जाता है, तालिका और उसके टीडी एक बहुत भारी फ़ाइल पेज बनाते हैं जो बदले में ... ब्राउज़र इंजन और कंप्यूटर से अधिक संसाधनों में बेकार है।

तो, एक बड़ी ग्रिड जैसी बोर्ड बनाने के लिए टीडी का सबसे हल्का तरीका वाला टेबल है या क्या आप कुछ हल्का सुझाव देते हैं?

चीयर्स Sotkra

Answer 1

एक ब्राउज़र लेआउट की गणना एक ब्राउज़र के लिए very complex work है, क्योंकि इसे प्रत्येक कॉलम की सटीक चौड़ाई की गणना करने के लिए अंतिम सेल के आयामों को जानना है। इसलिए, यदि आप किसी तालिका का उपयोग करते हैं, तो table-layout:fixed प्रारंभ करें।

फ़्लोटिंग बॉक्स या रिश्तेदार स्थिति प्रस्तुत करने के लिए तेज़ी से हो सकती है।

Answer 2

आप, टेबल से छुटकारा पाने की कोशिश कर सकते बजाय स्थिति सीएसएस के साथ टुकड़े {स्थिति: रिश्तेदार; शीर्ष: 20 पीएक्स; बाएं: 20 पीएक्स} इत्यादि। और एक दोहराव बैकग्राउंड ग्रिड खींचें।

Answer 3

लिंक को हटाने और जावास्क्रिप्ट में क्लिक ईवेंट के माध्यम से उन्हें संभालने (अधिमानतः JQuery जैसे कुछ के साथ) को फाइलसाइज पर बहुत कुछ कम करना चाहिए।

Answer 4

आप डोम में हेरफेर करने के लिए जावास्क्रिप्ट का उपयोग कर तालिका बना सकते हैं। यदि ग्रिड की सामग्री बहुत नियमित होती है, तो ऐसा करने के लिए कोड 400x400 बार <td></td> प्लस मार्कअप होने से बहुत छोटा होगा। बेशक प्रदर्शन जावास्क्रिप्ट इंजन पर निर्भर करता है। लेकिन अगर वह पूरी तरह से चूसता नहीं है, तो यह नेटवर्क हस्तांतरण समय के स्वतंत्र, सभी HTML को पार्स करने से भी तेज हो सकता है।

Answer 5

आप सीएसएस तैरता है, उदाहरण के साथ इसे बनाने सकता है अगर वर्गों 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> 

एक वैध doctype http://htmlhelp.com/tools/validator/doctype.html साथ आईई उपयोग करने के लिए या quirks मोड [http://tantek.com/CSS/Examples/boxmodelhack.html] में बॉक्स मॉडल हैक्स उपयोग करना न भूलें।

यदि आप कक्षाओं के बजाय आईडी का उपयोग करते हैं और सीएसएस में एकल अक्षरों का उपयोग करते हैं तो आप शायद उपर्युक्त कम कर सकते हैं।

क्या है आमतौर पर ब्राउज़र पर जंगली रूप से निर्भर करता है, उदाहरण के लिए मैं आश्चर्यचकित नहीं होगा अगर आईई टेबल के साथ बेहतर प्रदर्शन करता है, जबकि अन्य ब्राउज़र रिश्तेदार डीआईवी/फ्लोट के साथ बेहतर प्रदर्शन करते हैं।

(मैं ऊपर का परीक्षण किया है नहीं, लेकिन कुछ इसी तरह काम करना चाहिए।)

फिर आप जावास्क्रिप्ट को ऊपर परिवर्तित कर सकते हैं पृष्ठ लोड समय, जैसे कम करने के लिए:

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 (स्थानांतरण समय) और स्थिति गणना (लोड समय) पर सहेजने के लिए, बोर्ड के अंदर पूरी तरह से स्थित टाइलें रखती हैं। जेएस क्लिक पंजीकृत करने और इसे संभालने के लिए (कम HTML = कम स्थानांतरण और लोड समय)।

#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; 
} 

फिर होने एचटीएमएल ऐसे ही उत्पन्न:

<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 या किसी अन्य जावास्क्रिप्ट ढांचे का उपयोग कर प्रत्येक 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> 

आप एक ImageMap का उपयोग करते हैं अपने चेकर बोर्ड तुम सिर्फ आवश्यकता होगी के लिए ट्रिगर का उत्पादन करने के दोहराई गई पृष्ठभूमि और एक पारदर्शी छवि जो कुल और ऊंचाई को भरती है।