Форум программистов, компьютерный форум, киберфорум
JavaScript для начинающих
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.53/40: Рейтинг темы: голосов - 40, средняя оценка - 4.53
6 / 6 / 5
Регистрация: 17.02.2012
Сообщений: 112
1

Шахматная доска

24.12.2018, 23:46. Просмотров 8162. Ответов 3
Метки нет (Все метки)

Доброго времени, уважаемые форумцы!
Посмотрел урок по созданию шахматной доски, возник вопрос: а как добавить буквы и цифры?
Ну чтобы выглядела как настоящая доска. Я видел пример с таблицей, но хочу понять как это делается с div-ами.
Благодарю заранее!
HTML5
1
2
3
4
5
6
7
8
9
10
11
<html>
    <head>
        <title>Шахматная доска</title>
        <link rel="stylesheet" href="style.css"
    </head>
    <body>
        <div class="board">
        </div>
        <script src="chakhmaty.js"> </script>
    </body>
</html>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.board{
    height: 640px;
    width: 640px;
    margin: 30px auto;
    border: 1px solid black;
}
 
.block{
    height: 80px;
    width: 80px;
    float: left;
}
 
.black{
    background: black;
}
 
.white{
    background: white;
}
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
function drawBoard(){
    let board = document.querySelector('.board');
    let block;
    let flag = true; // белая-черная клетка
    
    for(let i=0; i<8; i++){
        
        for(let j=0; j<8; j++){
            
            if(j==0)
                flag = !flag;   
            
            block = document.createElement('div');
        
            if(flag)
                block.className='block black';
            else
                block.className='block white';
            
            //вывел
            board.appendChild(block);
            
            //поменял с черного на белое
            flag = !flag;
        }
    }
}
 
drawBoard();
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
24.12.2018, 23:46
Ответы с готовыми решениями:

Шахматная доска
Привет всем! Прошу помочь сделать следующую задачу: Создать функцию, генерирующую шахматную ...

Шахматная доска через таблицу
Помогите мне, пожалуйста. В таблицах не очень понимаю, так тут еще и цикл for привязать нужно к...

Шахматная доска на js/css/html
Здравствуйте, есть задача.Нужно вывести шахматную доску определенной размерности на страничке, но в...

Доска объявлений на Java Script
Помогите! Как сделать доску объявлений на Java Script. Может, у кого есть готовые скрипты?

3
525 / 429 / 175
Регистрация: 14.10.2017
Сообщений: 1,196
25.12.2018, 05:23 2
добавьте еще один столбец и одну строку, со своими классами:самый левый столбец поуже шахматной клетки, а самая нижняя строка - пониже. Разумеется, размеры .board нужно соответственно увеличить.
0
6 / 6 / 5
Регистрация: 17.02.2012
Сообщений: 112
25.12.2018, 13:05  [ТС] 3
Короче...на таблицах проще. Оставлю здесь, может кому пригодится
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
function draw(){
    var table = document.createElement('table');
    var flag = true;
    
    var trr = document.createElement('tr');
    var arr = [' ','a','b','c','d','e','f','g','h'];
    
    //генерим ячейки
    for(var i = 0; i<8; i++){
        var tr = document.createElement('tr');
        
        //создаем ячейку для цифр
        var tdd = document.createElement('td');
        tdd.style.width='50px';
        tdd.style.height='50px';
        tdd.innerHTML=8-i;
        tr.appendChild(tdd);
        
        for(var j=0; j<8; j++){
            
            if(j==0)
                flag=!flag;
            
            var td = document.createElement('td');
            
            td.style.width='50px';
            td.style.height='50px';
            if(flag){
                td.style.background='black';    
            }else
                td.style.background='white';    
                
            tr.appendChild(td);
            flag=!flag;
        }
        table.appendChild(tr);
    }
    
    //генерим буквы
    for(var k = 0; k<9; k++){
        
        var td = document.createElement('td');
        td.style.width='50px';
        td.style.height='50px';
        td.style.background='white';
        td.innerHTML=arr[k];
        
        trr.appendChild(td);
        
    }
    table.appendChild(trr);
    
    document.body.appendChild(table);
}
 
draw();
1
4922 / 1815 / 554
Регистрация: 11.04.2015
Сообщений: 3,215
Записей в блоге: 40
27.12.2018, 09:08 4
Цитата Сообщение от Koshachek Посмотреть сообщение
Оставлю здесь, может кому пригодится
Ну и я тогда оставлю
PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
 
<body>
 
    <style>
        
#chessboard td{
    width: 50px;
    height: 50px;
}
 
#chessboard tr:nth-child(even)>td:nth-child(odd),
#chessboard tr:nth-child(odd)>td:nth-child(even)
{
    background-color: black;
}
#chessboard{ border-collapse: collapse;}
#chessboard, #chessboard td{border: black 1px solid;}
#chessboard th{padding: 3px;border: 0px;}
    </style>
 
    <table id="chessboard" >
        <tbody>
            <tr>
                <th></th>
                <th>A</th>
                <th>B</th>
                <th>C</th>
                <th>D</th>
                <th>E</th>
                <th>F</th>
                <th>G</th>
                <th>H</th>
                <th></th>
            </tr>
            <tr>
                <th>8</th>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <th>8</th>
            </tr>
            <tr>
                <th>7</th>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <th>7</th>
            </tr>
            <tr>
                <th>6</th>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <th>6</th>
            </tr>
            <tr>
                <th>5</th>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <th>5</th>
            </tr>
            <tr>
                <th>4</th>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <th>4</th>
            </tr>
            <tr>
                <th>3</th>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <th>3</th>
            </tr>
            <tr>
                <th>2</th>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <th>2</th>
            </tr>
            <tr>
                <th>1</th>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <th>1</th>
            </tr>
            <tr>
                <th></th>
                <th>A</th>
                <th>B</th>
                <th>C</th>
                <th>D</th>
                <th>E</th>
                <th>F</th>
                <th>G</th>
                <th>H</th>
                <th></th>
            </tr>
        </tbody>
    </table>
</body>
 
</html>
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
27.12.2018, 09:08

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

Шахматная доска
Нужно нарисовать на экране шахматную доску и периодически через 2-5 секунд инвертировать цвет. ...

С++ Шахматная доска
Помогите пожалуйста с заданием. Нужно сделать шахматную доску 16*16 и пользователь должен ввести...

Шахматная доска
Поля шахматной доски характеризуются записью: Type Pole=record Ver:(a,b,c,d,e,f,g,h);...

Шахматная доска
Даны координаты двух различных полей шахматной доски x1,x2,y1,y2(Целые числа лежащие в диапазоне от...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2020, vBulletin Solutions, Inc.