Prosta tablica szachowa JavaScriptu

Czy ktoś mógłby mi wskazać, jak wygenerować szachownicę (8x8) używając JavaScript, używając znaczników tabeli lub?Prosta tablica szachowa JavaScriptu

mam następujące pory:

<DOCTYPE html> 
<html> 
<head> 
<style> 

div 
{ 
border:1px solid black; 
width:20px; 
height:20px; 
} 

</style> 
</head> 
<body> 
<script type="text/javascript"> 

    // create a chess table 8x8. 

    var count = 0; 

while (count < 64) 
    { 

    if (count % 2 == 0) 

     { 

     if (count % 8 == 0 && count !=0) 
      { 
      document.write('<br/><div style="background-color:#000000;float:left;">&nbsp</div>'); 

      } 
     else  
      { 
      document.write('<div style="background-color:#000000;float:left;">&nbsp</div>');  
      } 
     } 

    else 

     { 
     document.write('<div style="background-color:#FFFFFF;float:left;">&nbsp</div>'); 
     } 
    /* 
    */   
    count++; 
    } 
</script> 

</body> 
</html>

Próbowałem przypisać czerni i bieli do każdej nieparzystej i parzystej liczbie odpowiednio, ale to nie działa w ten sposób.

Z góry dziękuję.

Źródło

2013-05-22 Tyrant

Z odsetek dlaczego chcesz to zrobić z javascript zamiast po prostu ręcznie wypisywanie html? –

Masz szansę użyć OpenGL? jeśli tak, sprawdź http://www.java-tips.org/other-api-tips/jogl/another-method-of-texture-mapping-a-checkerboard-image-onto-two-recta.html bardzo łatwo z opengl –

Możesz również zajrzeć do html5 canvas –

Nie mogę tego przetestować w tej chwili, ale to powinno zadziałać. Ten kod tworzy tabelę 8x8, w której czarne komórki są oznaczone "czarną" klasą, a białe komórki są oznaczone "białą" klasą. Użyj CSS, aby nadać im kolor. Mam nadzieję, że to pomoże.

var table = document.createElement("table"); 
for (var i = 1; i < 9; i++) { 
    var tr = document.createElement('tr'); 
    for (var j = 1; j < 9; j++) { 
     var td = document.createElement('td'); 
     if (i%2 == j%2) { 
      td.className = "white"; 
     } else { 
      td.className = "black"; 
     } 
     tr.appendChild(td); 
    } 
    table.appendChild(tr); 
} 
document.body.appendChild(table);

Źródło

2013-05-22 05:42:22

Dziękujemy! Ta odpowiedź wydaje mi się jak dotąd najodpowiedniejsza (biorąc pod uwagę mój poziom początkujący). – Tyrant

document.write nie jest najlepszym sposobem, aby to zrobić –

document.write usunięte z odpowiedzi! –

-1

Masz niewiele możliwości. Jedna z nich może pomóc w spełnieniu twoich wymagań.

Przykład nr 2 w http://bmarini.github.io/jchess/

Źródło

2013-05-22 05:29:51

Dzięki! Upewnię się, że je przejrzę. – Tyrant

-3

masz na myśli w ten sposób?

.... html..... 
&lt;table&gt; 
&lt;tr&gt; 
&lt;script language='javascript'&gt; 
&lt;!-- 
alternate(); 
//--&gt; 
&lt;/script&gt; 
&lt;/tr&gt; 
&lt;/table&gt; 
....more html..... 

function alternate() 
{ 
var numOfCells = 6; 
var num = 0; 
for (i = 0; i &lt; numOfCells ; i++) 
{ 
txt = "&lt;td bgColor='"; 
txt += (num % 2 == 0) ? 'red' : 'black'; 
txt += "'&gt;" 
document.write(txt); 
num++; 
} 
}

Znak% to mod; zwraca pozostałą część podziału. "(...)? ...: ...;"; konstrukcja jest jak if/else. Jeśli warunek jest spełniony, pierwsza opcja - inaczej druga.

Źródło

2013-05-22 05:34:29

Dziękujemy! Zajęło mi dobre pięć sekund, zanim wymyśliłem <i> :) – Tyrant

Biorąc pod uwagę, że jest to w bloku kodu, możesz chcieć zastąpić lt's i gt z rzeczywistymi <'s and > - w przeciwnym razie ten kod HTML nie zrobi niczego oprócz wizualnego wyświetlenia Kod HTML dla każdego, kto otwiera tę stronę. – doppelgreener

-1

Javascript:

var i, j, clas; 
for (i = 0; i < 8; i++) { 
    for (j = 0; j < 8; j++) { 
     clas = ''; 

     if (j === 0) clas = 'first '; 
     else if (j === 7) clas = 'last '; 
     clas += (i % 2 == j % 2) ? 'white' : 'black'; 

     var field = document.createElement('div'); 
     field.className = clas; 
     document.body.appendChild(field); 
    } 
}

CSS:

div { 
    float: left; 
    width: 20px; 
    height: 20px; 
} 
.first { 
    clear: left; 
} 
.black { 
    background: black; 
} 
.white { 
    background: red; 
}

Próbka: Kod http://jsfiddle.net/YJnXG/2/

Źródło

2013-05-22 05:46:55

Dziękuję za wspaniałą sugestię! – Tyrant

W pewnym momencie dla mnie ten stał golf:

http://jsfiddle.net/4Ap4M/

JS:

for (var i=0; i< 64; i++){ 
    document.getElementById("mainChessBoard").appendChild(document.createElement("div")).style.backgroundColor = parseInt((i/8) + i) % 2 == 0 ? '#ababab' : 'white';  
}

HTML:

<div id="mainChessBoard"> 
</div>

CSS:

#mainChessBoard 
{ 
    width:160px; 
    height:160px; 
    border:1px solid black; 
} 

div 
{ 
width:20px; 
height:20px; 
float:left; 
}

Źródło

2013-05-22 06:12:20 aquinas

+1 Kocham to. :) – doppelgreener

Można wygenerować płyt o dowolnym rozmiarze chcesz, i w ten sposób jest dość łatwe do zmiany wielkość kwadratów i kolorów. nie musisz zmieniać niczego innego.

Dobrą praktyką jest zachowanie wyglądu arkusza stylów. także don't use document.write

http://jsfiddle.net/YEJ9A/1/

JavaScript

var x=8; 
var y=8; 

var chessBoard = document.getElementById("chessBoard"); 

for (var i=0; i<y; i++){ 
    var row = chessBoard.appendChild(document.createElement("div")); 
    for (var j=0; j<x; j++){ 
     row.appendChild(document.createElement("span")); 
    } 
}

CSS

#chessBoard span{ 
    display: inline-block; 
    width: 32px; 
    height: 32px; 
} 

#chessBoard div:nth-child(odd) span:nth-child(even), 
#chessBoard div:nth-child(even) span:nth-child(odd){ 
    background-color: black; 
} 
#chessBoard div:nth-child(even) span:nth-child(even), 
#chessBoard div:nth-child(odd) span:nth-child(odd){ 
    background-color: silver; 
}

Źródło

2013-09-09 01:27:50

Jest to podstawowy fundament do budowania szachownicy.
Możesz sprawdzić wzór szachownicy w konsoli.

var chessBoard = function(size){ 
    var hash = '#' 
    var space = '_' 
    for (var i = 0; i < size; i++) 
    {   

     hash += '\n' 

     for (var j = 0; j < size; j++) 
     { 
     if((i +j) % 2 == 0) 
     { 
     hash += space 
     } 
     else 
     { 
     hash += "#" 
     } 
    }; 

}; 

console.log(hash) 
}(8)

Źródło

2014-12-05 01:01:35 user3449311

Eloquent JavaScript by Marijn Haverbeke. – Fulvio

Poniższy kod będzie drukować szachownicę przy użyciu wyłącznie HTML i JavaScript.

<script> 
    document.write("<table border='1' width='200' height='200'>"); 
    for(var i=1; i<=8; i++) 
    { 
    document.write("<tr>"); 
    for(var j=1; j<=8; j++) 
    { 
    if((i+j)%2!=0) 
    { 
    document.write("<td bgcolor='white'></td>"); 
    } 
    else 
    { 
    document.write("<td bgcolor='black'></td>"); 
    } 
    } 
    document.write("</tr>"); 
    } 
    document.write("</table>"); 
    </script>

Źródło

2016-05-03 11:10:34 NachuArun

Może chcesz zrobić z divs, nie przy stole. Oto rozwiązanie.

$(document).ready(function() { 
 
    for (var i = 1; i <= 8; i++) { 
 
    var divRow = $("<div>", { 
 
     class: "row", 
 
    }); 
 
    for (var j = 1; j <= 8; j++) { 
 
     var div = $("<div>", { 
 
     class: "square" 
 
     }); 
 

 
     if (i % 2 == j % 2) { 
 
     $(div).addClass("white"); 
 
     } else { 
 
     $(div).addClass("black"); 
 
     } 
 
     divRow.append(div); 
 
    } 
 
    $("#board").append(divRow); 
 
    } 
 
});

#board { 
 
    margin: 0; 
 
    width: 256px; 
 
    height: 256px; 
 
    border: solid 1px #333; 
 
} 
 

 
#board .row { 
 
    margin: 0; 
 
} 
 

 
.square { 
 
    height: 32px; 
 
    width: 32px; 
 
    background: #efefef; 
 
    float: left; 
 
} 
 

 
.square.white { 
 
    background: #fff; 
 
} 
 

 
.square.black { 
 
    background: #333; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div id="board"></div>

Źródło

2017-09-29 08:13:06

Prosta tablica szachowa JavaScriptu

Odpowiedz

Powiązane problemy