Шахматная доска JavaScript с использованием DOM - PullRequest
Новая
       1

Шахматная доска JavaScript с использованием DOM

0 голосов
/ 17 декабря 2018

Привет, ребята. Я недавно начал делать шахматное приложение, и у меня все настроено, кроме графического интерфейса.Почему-то я не могу получить плитки для отображения на доске, и я не знаю почему.(Предположение) Я думаю, что моя проблема как-то связана с моим использованием DOM.К сожалению для меня, я пытался решить это в течение нескольких дней безуспешно.Может ли кто-нибудь, пожалуйста, помочь и просветить меня в этом вопросе, может быть решен, потому что я не знаю, что мне не хватает в этой точке, хотя я подозреваю, что это что-то очень простое.Вот код: 

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <title>Chess Game</title>
      <script type="text/javascript">
             function drawBoard(){
                  var board = [0, 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];

                  for(var i = 1; i <= board.length; i++){
                      if(i % 2 == 0){
                           document.getElementById("whiteSquare");
                      }else{
                           document.getElementById("blackSquare");
                      }
                  }
             }
      </script>
      <style type="text/css">
            #gameBoardBorder{
                  width: 480px;
                  height: 480px;
                  border: solid;
                  border-color: black;
                  border-width: 2px;
                  float: left;
            }

            h1{
                  text-align: center;
                  font-family: sans-serif;
            }

            #whiteSquare{
                  width: 60px;
                  height: 60px;
                  background-color: white;
            }

            #blackSquare{
                  width: 60px;
                  height: 60px;
                  background-color: black;
            }

            body{
                  background-color: lightblue;
            }
      </style>
</head>
<body onload="drawBoard()">
     <h1>Chess Board</h1>
     <div id="gameBoardBorder">
           <!-- Noting more needed to be done here, rest will be in the css -->
     </div>
     <div id="whiteSquare">
           <!-- Noting more needed to be done here, rest will be in the css and javaScript-->
     </div>
     <div id="blackSquare">
           <!-- Noting more needed to be done here, rest will be in the css and javaScript-->
     </div>
</body>
</html>

PS: Да, я знаю, что код выглядит плохо и его можно было бы сделать лучше, я сделаю рефакторинг позже.

Заранее спасибо, всем, кто попытается помочь.

Ответы [ 3 ]

0 голосов
/ 17 декабря 2018 

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <title>Chess Game</title>
      <script>
			 function drawBoard(){
				let row = 1;
				for(let i = 1; i <= 64; i++){
						if(row % 2 == 0){ // row 2,4,6,8
							var color = i % 2 == 0 ? "whiteSquare" : "blackSquare";
						}else{ // row 1,3,5,7
							var color = i % 2 == 0 ? "blackSquare" : "whiteSquare";
						}
						let square = document.createElement("div");
						square.className = color;
						if (i % 8 == 0){ //  new row
							square.style = "clear:all";
							row++;
						}
						gameBoardBorder.appendChild(square);
				}
			 }
      </script>
      <style>
            #gameBoardBorder{
                  width: 480px;
                  height: 480px;
                  border: solid;
                  border-color: black;
                  border-width: 2px;
                  float: left;
            }

            h1{
                  text-align: center;
                  font-family: sans-serif;
            }

            .whiteSquare{
                  width: 60px;
                  height: 60px;
                  background-color: white;
                  float: left;
            }

            .blackSquare{
                  width: 60px;
                  height: 60px;
                  background-color: black;
                  float: left;
            }

            body{
                  background-color: lightblue;
            }
      </style>
</head>
<body onload="drawBoard()">
     <h1>Chess Board</h1>
     <div id="gameBoardBorder">
           <!-- Noting more needed to be done here, rest will be in the css -->
     </div>
</body>
</html>
0 голосов
/ 17 декабря 2018

Причина, по которой вы получаете только два квадрата:

document.getElementById возвращает существующий элемент ;элемент, который уже существует.В своем HTML вы создали только 2 квадрата и больше никогда его не создаете.

Я думаю, что каждый раз, когда вы используете document.getElementById, вы пытаетесь создать новый квадрат.

Вы должны использовать document.createElement вместо document.getElementById для создания новых элементов.

Итак, шаги для решения вашей проблемы:

  1. ids должен быть уникальным.Вместо этого используйте стиль class es (чтобы иметь более 1 белого квадрата и более 1 черного квадрата): 

    .whiteSquare{
    width: 60px;
    height: 60px;
    background-color: white;
}

.blackSquare{
    width: 60px;
    height: 60px;
    background-color: black;
}

  2. Удалите начальные элементы <div id="whiteSquare"> и <div id="blackSquare">из вашего HTML.Мы создадим их в JavaScript.

  3. Замените 

    for(var i = 1; i <= board.length; i++){
    if(i % 2 == 0){
        document.getElementById("whiteSquare");
    }else{
        document.getElementById("blackSquare");
    }
}

    на 

    for (var i = 0; i < board.length; i++) {
  var square = document.createElement("div");
  if (i / 8 % 2 < 1) {
    if (i % 2 == 0) square.classList.add("whiteSquare");
    else square.classList.add("blackSquare");
  } else {
    if (i % 2 == 0) square.classList.add("blackSquare");
    else square.classList.add("whiteSquare");
  }
  document.getElementById("gameBoardBorder").appendChild(square);
}

  4. Чтобы получить квадраты дляотображать в нужных местах, вам нужно добавить display: inline-block; к их стилям.

  5. Чтобы избавиться от разрыва между рядами квадратов, установите правило стиля line-height: 0; на#gameBoardBorder

Примечание. Я поставил все квадраты внутри из #gameBoardBoarder. 

function drawBoard() {
  var board = [0, 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
  ];

  for (var i = 0; i < board.length; i++) {
    var square = document.createElement("div");
    if (i / 8 % 2 < 1) {
      if (i % 2 == 0) square.classList.add("whiteSquare");
      else square.classList.add("blackSquare");
    } else {
      if (i % 2 == 0) square.classList.add("blackSquare");
      else square.classList.add("whiteSquare");
    }
    document.getElementById("gameBoardBorder").appendChild(square);
  }
}
#gameBoardBorder {
  width: 480px;
  height: 480px;
  border: solid;
  border-color: black;
  border-width: 2px;
  float: left;
  line-height: 0;
}

#gameBoardBorder > * {
  margin: 0;
  padding: 0;
}

h1 {
  text-align: center;
  font-family: sans-serif;
}

.whiteSquare {
  display: inline-block;
  width: 60px;
  height: 60px;
  background-color: white;
}

.blackSquare {
  display: inline-block;
  width: 60px;
  height: 60px;
  background-color: black;
}

body {
  background-color: lightblue;
}
<body onload="drawBoard()">
  <h1>Chess Board</h1>
  <div id="gameBoardBorder">
    <!-- Noting more needed to be done here, rest will be in the css -->
  </div>
</body>
0 голосов
/ 17 декабря 2018

В вашем примере вы на самом деле не создаете никаких элементов.

Вам необходимо создать элементы с Document.createElement, а затем вставить их с element.appendChild

Вот простой неформатированный пример.

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <title>Chess Game</title>
      <script type="text/javascript">
             function drawBoard(){
                  var board = [0, 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];

                  const container = document.getElementById("gameBoardBorder"); 
                  for(var i = 1; i <= board.length; i++){
                  
                      let el = document.createElement('div'); 
                      if(i % 2 == 0){
                           el.className = "whiteSquare"; 
                      }else{
                           el.className ="blackSquare"; 
                      }
                      
                      container.appendChild(el); 
                  }
             }
      </script>
      <style type="text/css">
            #gameBoardBorder{
                  width: 480px;
                  height: 480px;
                  border: solid;
                  border-color: black;
                  border-width: 2px;
                  display: flex; 
                  flex-flow: row wrap; 
            }

            h1{
                  text-align: center;
                  font-family: sans-serif;
            }

            .whiteSquare{
                  width: 60px;
                  height: 60px;
                  background-color: white;
            }

            .blackSquare{
                  width: 60px;
                  height: 60px;
                  background-color: black;
            }

            body{
                  background-color: lightblue;
            }
      </style>
</head>
<body onload="drawBoard()">
     <h1>Chess Board</h1>
     <div id="gameBoardBorder">
           <!-- Noting more needed to be done here, rest will be in the css -->
     </div>
     <div id="whiteSquare">
           <!-- Noting more needed to be done here, rest will be in the css and javaScript-->
     </div>
     <div id="blackSquare">
           <!-- Noting more needed to be done here, rest will be in the css and javaScript-->
     </div>
</body>
</html>

Теперь вы можете видеть, что на самом деле это не создает шахматную доску так, как вы хотите - потому что способ обтекания элементов (всегда слева направо) означает, что вы неНа самом деле, каждый второй элемент должен быть белым.

Вам решать, как вы хотите справиться с этой логикой.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...