8

テーブルタグを使用して、JavaScriptを使用してチェスボード（8x8）を生成する方法について、誰かヒントを教えてください

私はこれまでに次のものを持っています：

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

奇数と偶数にそれぞれ黒と白を割り当てようとしましたが、このようには機能しません。

前もって感謝します。

4

12 に答える 12

18

現時点ではテストできませんが、これでうまくいくはずです。このコードは、黒いセルが「黒」クラスでタグ付けされ、白いセルが「白」クラスでタグ付けされた 8x8 テーブルを作成します。CSS を使用して色を付けます。お役に立てば幸いです。

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);
于 2013-05-22T05:42:22.763 に答える
16

ある時点で、これがコード ゴルフになりました。

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;
}
于 2013-05-22T06:12:20.423 に答える
3

これは、チェス盤を構築するための基本的な基盤です。
コンソールでチェス盤のパターンを確認できます。

   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)
于 2014-12-05T01:01:35.803 に答える
0

次のコードは、HTML と 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>
于 2016-05-03T11:10:34.073 に答える
0

css 変数、css attr()、およびデータセット属性を使用して、少し近代化します。

ここに画像の説明を入力

これにより、テーマを微調整し、物事をシンプルに保つことができます。

const cols = {0:"A", 1:"B", 2:"C", 3:"D", 4:"E", 5:"F", 6:"G", 7:"H"}
const table = document.createElement("table");
table.className = "board";
for (let i = 1; i < 9; i++) {
    let tr = document.createElement('tr');
    tr.dataset.line = i
    for (let j = 1; j < 9; j++) {
        let td = document.createElement('td');
        td.dataset.col = cols[j-1];
        td.dataset.line = i;
        td.className = (i%2 === j%2) ? "white square" : "black square";
        tr.appendChild(td);
    }
    table.appendChild(tr);
}
document.querySelector("div").appendChild(table);
:root {
  --size:      640px;
  --backcolor: darkslategray;
  --dark:      grey;
  --light:     white;
  --legend:    azure;
  --hover:     lightgreen
}
.board {
  width: var(--size);
  height: var(--size);
  border: 32px solid;
  border-color: var(--backcolor);
  border-radius: 0.2rem;
}
.square {
  border: 1px black solid;
}
.white{
  background: var(--light);
}
.black{
  background: var(--dark)
}
.board tr::before {
  content: attr(data-line);
  position: absolute;
  margin: 1.8rem 0 0rem -1.5rem;
  font-size: larger;
  color: var(--legend);
}
.board tr::after {
  content: attr(data-line);
  position: absolute;
  margin: 1.8rem 0 0rem 0.8rem;
  font-size: larger;
  color: var(--legend);
}
.board tr:first-child > td::before {
  content: attr(data-col);
  position: absolute;
  margin: -4rem 0 0rem 1.6rem;
  font-size: larger;
  color: var(--legend);
}
.board tr:last-child > td::after {
  content: attr(data-col);
  position: absolute;
  margin: 2.6rem 0 0rem 1.6rem;
  font-size: larger;
  color: var(--legend);
}
td:hover {
  background: var(--hover);
  cursor: pointer
}
<div></div>

于 2021-08-08T22:42:07.383 に答える
0

私の考えは単純です。行がeven白いピースで始まる場合、それ以外の場合は黒いピースで始まります。

HTML:

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

Javascript:

const fragment = document.createDocumentFragment();
const board = document.getElementById("mainChessBoard");
const size = 8;

for (let i = 0; i < size; i++) {
  let start = i % 2 === 0 ? 0 : 1; // if row is even then start with white otherwise start with black;
  for (let j = 0; j < size; j++) {
    const div = document.createElement('div');
    div.classList.add(start === 1 ? "black" : "white");
    fragment.appendChild(div);
    start = start === 1 ? 0 : 1;
  }
}

board.appendChild(fragment);
于 2021-05-29T14:04:33.183 に答える
-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;
}

サンプル: http://jsfiddle.net/YJnXG/2/

于 2013-05-22T05:46:55.703 に答える
-4

こんな感じですか？

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

% 記号は mod です。除算の余りを返します。「(...) ? ... : ...;」構築は if/else のようなものです。条件が true の場合は最初のオプション、そうでない場合は 2 番目のオプションです。

于 2013-05-22T05:34:29.650 に答える