Просты JavaScript шахматная дошка

Можа хто-небудзь даць мне падказку пра тое, як стварыць шахматную дошку (8x8) з дапамогай JavaScript, з дапамогай табліцы тэгаў або?

Я атрымаў наступныя да гэтага часу:


<html>
<head>
</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('
<div style="background-color:#000000;float:left;"> </div>'); } else { document.write('<div style="background-color:#000000;float:left;"> </div>'); } } else { document.write('<div style="background-color:#FFFFFF;float:left;"> </div>'); } /* */ count++; } </script> </body> </html>

I tried to assign black and white to each odd and even number respectively, but it doesn't work this way.

Thank you in advance.

5
любы шанец, што ваш з выкарыстаннем OpenGL? калі так праверыць java-tips.org/other-api-tips/jogl/… вельмі лёгка з OpenGL
дададзена аўтар Glen Morse, крыніца
@Chirs Moutray маглі выкарыстоўваць WebGL гэта будзе па-ранейшаму працаваць ... і шахматныя дошкі з'яўляюцца адным з асноўных ў гл.
дададзена аўтар Glen Morse, крыніца
code.google. кім/р/O3D/крыніца/прагляд/багажнік/samples_webgl/селядзец & ZWNJ; ERS/& hellip; лёгка і хутка, калі ваш хоча шахматная .. Вось чаму я спытаў, калі ён выкарыстаў гл ..
дададзена аўтар Glen Morse, крыніца
@GlenMorse Стварэнне некалькіх дзівы супраць імпарту і навучыцца выкарыстоўваць WebGL, а затым маляваць 3D прымітывы? Ваша прапанова аб WebGL татальна празмернасць.
дададзена аўтар doppelgreener, крыніца
З цікавасці, чаму вы хочаце зрабіць гэта з дапамогай JavaScript, замест таго, каб проста пісаць ўручную па-за HTML?
дададзена аўтар Chris Moutray, крыніца
Акрамя таго, вы можаце захацець зірнуць на html5 палатно
дададзена аўтар Chris Moutray, крыніца
@GlenMorse Гэта JavaScript ня Java
дададзена аўтар Chris Moutray, крыніца
Прывітанне ўсім, дзякуй за прапановы да гэтага часу. Я ўсё яшчэ вучуся, і маё заданне зрабіць гэта з дапамогай JavaScript выключна. * Мой арыгінальны пост варта чытаць «... таблічныя тэгі або DIV».
дададзена аўтар Tyrant, крыніца

8 адказы

У нейкі момант для мяне гэта стала код для гольфа:

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;
}
13
дададзена

Я не магу праверыць гэта на дадзены момант, але гэта павінна працаваць. Гэты код стварае табліцу 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);
10
дададзена
document.write не лепшы спосаб зрабіць гэта
дададзена аўтар Vitim.us, крыніца
document.write выдаленыя ад адказу!
дададзена аўтар Alfonso Jiménez, крыніца
Дзякуй! Адказ на гэтае пытанне, здаецца, да гэтага часу мне найбольш прыдатным (улічваючы мой узровень пачаткоўца).
дададзена аўтар Tyrant, крыніца

Вы маеце на ўвазе, як гэта?

.... html.....
<table>
<tr>
<script language='javascript'>
<!--
alternate();
//-->
</script>
</tr>
</table>
....more html.....

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

% Знак мод; яна вяртае астатак ад дзялення. "(...) ...: ..."; Канструкцыя падобная калі/іншае. Калі ўмова праўдзіва, то першы варыянт - інакш другі.

3
дададзена
Улічваючы гэта ў блоку кода вы можаце захацець замяніць ЛТ-х і Gt з фактычнай < «s і>» s - у адваротным выпадку гэты HTML код не будзе рабіць нічога, але візуальна адлюстравання HTML код для любога адкрыцця гэтай старонкі.
дададзена аўтар doppelgreener, крыніца
Дзякуй! У мяне сышло добрых пяць секунд, перш чым я высвятляю & л; і & GT; :)
дададзена аўтар Tyrant, крыніца

Гэта асноўны падмурак для пабудовы шахматнай дошкі.
Вы можаце праверыць шахматны малюнак платы ў кансолі.

   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)
2
дададзена
Красамоўны JavaScript па Marijn Haverbeke.
дададзена аўтар Fulvio, крыніца

Вы можаце ствараць дошкі любога памеру вы хочаце, і гэты шлях даволі лёгка змяніць памер квадратаў і кветак. Вам не трэба нічога мяняць.

It is good practice to keep appearance on the stylesheet. Also 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

<�Моцны> 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;
}
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;
}

Sample: http://jsfiddle.net/YJnXG/2/

1
дададзена
Дзякуй за вялікая прапанова!
дададзена аўтар Tyrant, крыніца

Можа быць, вы хочаце зрабіць гэта з дзівы , а не за сталом. Дык вось гэта рашэнне для яго.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$(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>
</div> </div>
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>
0
дададзена