Semplice scacchiera JavaScript

Qualcuno potrebbe darmi un suggerimento su come generare una scacchiera (8x8) usando JavaScript, usando un tag tabella o?Semplice scacchiera JavaScript

ho ottenuto il seguente finora:

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

ho cercato di assegnare rispettivamente in bianco e nero per ogni numero pari e dispari, ma non funziona in questo modo.

Grazie in anticipo.

fonte

2013-05-22 Tyrant

Fuori di interesse perché vuoi fare questo con javascript invece di manualmente scrivendo il codice HTML? –

hai qualche possibilità di usare opengl? se è così, controlla http://www.java-tips.org/other-api-tips/jogl/another-method-of-texture-mapping-a-checkerboard-image-onto-two-recta.html molto facile con opengl –

Si potrebbe anche voler guardare la tela HTML5 –

Non riesco a testarlo in questo momento ma questo dovrebbe funzionare. Questo codice crea una tabella 8x8 in cui le celle nere sono contrassegnate con classe "nera" e le celle bianche sono contrassegnate con classe "bianca". Usa i CSS per dare loro il colore. Spero possa essere d'aiuto.

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

fonte

2013-05-22 05:42:22

Grazie! Questa risposta mi sembra così la più adatta (dato il mio livello di novizio). – Tyrant

document.write non è il modo migliore per farlo –

document.write rimosso dalla risposta! –

-1

avete poche scelte. Uno di questi può aiutare il tuo requisito.

Esempio per nessun 2 http://bmarini.github.io/jchess/

fonte

2013-05-22 05:29:51

Grazie! Farò in modo di rivederli – Tyrant

-3

Vuoi dire come questo?

.... 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++; 
} 
}

Il segno% è mod; restituisce il resto di una divisione. il "(...) ? ... : ...;" la costruzione è come un se/altro. Se la condizione è vera, la prima opzione, altrimenti la seconda.

fonte

2013-05-22 05:34:29

Grazie! Mi ci sono voluti cinque secondi buoni prima di capire <e> :) – Tyrant

Considerando che questo è in un blocco di codice, potresti voler sostituire il lt's e il gt con lo <'s and > effettivo - altrimenti questo codice HTML non farà altro che visualizzare visivamente Codice HTML a chiunque apra quella pagina – 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; 
}

Esempio: codice http://jsfiddle.net/YJnXG/2/

fonte

2013-05-22 05:46:55

Grazie per l'ottimo suggerimento! – Tyrant

Ad un certo punto per me, questo è diventato il 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; 
}

fonte

2013-05-22 06:12:20 aquinas

+1 Lo adoro. :) – doppelgreener

è possibile generare tavole di qualsiasi dimensione che si desidera, e in questo modo è abbastanza facile da cambiare la dimensione dei quadrati e dei colori. non hai bisogno di cambiare nient'altro

È buona prassi mantenere l'aspetto sul foglio di stile. Anche 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; 
}

fonte

2013-09-09 01:27:50

Questo è il fondamento di base per costruire la vostra scacchiera.
Puoi controllare lo schema della scacchiera nella console.

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)

fonte

2014-12-05 01:01:35 user3449311

Eloquent JavaScript di Marijn Haverbeke. – Fulvio

Il seguente codice stamperà la scacchiera utilizzando solo HTML e 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>

fonte

2016-05-03 11:10:34 NachuArun

può essere che si vuole fare con divs, non con la tavola. Quindi ecco la soluzione per questo.

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

fonte

2017-09-29 08:13:06

Semplice scacchiera JavaScript

risposta

Problemi correlati