使用 DOM 的 JavaScript 棋盘-6ren

使用 DOM 的 JavaScript 棋盘

转载作者：行者123 更新时间：2023-11-29 17:39:41

27

4

大家好，我最近开始做一个国际象棋应用程序，除了 GUI 之外，我已经设置好了所有的东西。出于某种原因，我无法让电路板显示瓷砖，我也不知道为什么。 (推测)我认为我的问题与我对 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:是的，我知道代码看起来很糟糕，可以用更好的方式完成，我稍后会进行重构。

在此先感谢所有愿意提供帮助的人。

最佳答案

你只得到两个正方形的原因:

document.getElementById返回一个现有元素；一个已经存在的元素。在您的 HTML 中，您只创建了 2 个方 block ，并且您再也不会创建了。

我想每次你用过document.getElementById你正在尝试创建一个新的正方形。

你应该使用 document.createElement 而不是 document.getElementById创建新元素。

解决问题的步骤:

id s 必须是唯一的。 class 的样式es 而不是(有超过 1 个白色方 block 和超过 1 个黑色方 block ):

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

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

删除首字母 <div id="whiteSquare">和 <div id="blackSquare"> HTML 中的元素。我们将使用 JavaScript 创建它们。

替换

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

要让方 block 显示在正确的位置，您需要添加 display: inline-block;他们的风格。
要消除正方形行之间的间隙，请设置样式规则 line-height: 0;在 #gameBoardBorder

请注意，我将所有方 block 都放在了 #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>

关于使用 DOM 的 JavaScript 棋盘，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53807761/

27

4

0

文章推荐： android - 用数据数组填充表

文章推荐： android - 从异步类调用 Activity 类

文章推荐： android - Toolbar下的GridView——滚动时隐藏ToolBar

文章推荐： android - 在Android中使用gps获取路线点列表的有效方法

dom - 哪些因素促使虚拟 DOM 超越浏览器原生 DOM？
关闭。这个问题是opinion-based .它目前不接受答案。想要改进这个问题？更新问题，以便 editing this post 可以用事实和引用来回答它. 关闭 6 年前。 Improve
dom - polymer : Light DOM vs Local DOM
Polymer的light DOM和local DOM有什么区别？来自文档(1): The DOM that an element creates and manages is called its
dom - DOM 突变事件库？
当内容添加到网页时，我需要触发一个 Action 。更新可能具有不同的性质(例如 AJAX、延迟脚本、用户操作)并且不受我的控制。我想使用 DOM 突变事件，但它们并非在所有浏览器中都可用。是否有为
shadow-dom - 我可以在 Shadow DOM 中获得一个按钮来提交不在 Shadow DOM 中的表单吗？
我刚遇到一个有趣的情况，我有一个提交放置在内的 native 自定义元素的 Shadow DOM 内. Select #shadow-root ...
javascript - 在当前 dom 之前添加 dom，并保持当前 dom 留在视口(viewport)中
假设有一个滚动列表，当我插入一些新的 DOM 附加到当前 dom 时，它工作正常。上拉但是如果我之前插入一些新的 DOM，新的 DOM 将在视口(viewport)中，而旧的 DOM 将被下推。下拉
dom - Shadow DOM 是否像 React.js 中的 Virtual DOM 一样快？
在我的项目中实现 Shadow DOM 是否会使它们像 React 使用的虚拟 DOM 一样更快？最佳答案它们是不同用途的不同事物，因此比较性能没有意义。虚拟 DOM 虚拟 DOM 旨在避免对
dom - 从 DOM 中选择元素
在我的页面内容上，我将多张卡片组织成网格 __________________ | ____ ____ | | | | | | | | | | | |
dom - 在浏览器中调试自定义 DOM 事件
是否可以在浏览器中看到(调试)从 DOM 元素触发的自定义事件？假设我想查看 Bootstrap Collapse 的哪个特定元素触发了 show.bs.collapse event ，我能以某种方
dom - 浏览器会自动插入哪些 DOM 元素？
我正在生成用于客户端的 XPaths 服务器端，我很困惑为什么在 DOM 中找不到表路径(即 td 中的内容)。事实证明，现代浏览器(至少是 Chrome 和 Firefox)插入了 tbody在文
dom - 检索 DOM 文本节点位置
是否可以检索文本节点的几何位置(即从父元素、页面等的顶部/左侧偏移量)？最佳答案不是直接的。 TextNode 没有用于测量视口(viewport)定位的原始 IE 偏移*(和类似的)扩展。仅在
dom - 什么是 DOM 元素？
以下语句中的 DOM 元素的含义是什么？ Statement #1 You can add multiple classes to a single DOM element. Statement #2
dom - 卡住 Dom 操作
有没有办法让 firebug(或任何其他浏览器，或使用任何其他工具)阻止任何 dom 操作的发生？有时布局调试充满悬停事件的屏幕是不可能的，因为元素可能会消失，并且您看不到它们的复合布局。最佳答案
dom - 我需要元素的完整 dom 节点路径
我需要在html文档中搜索 text here 然后输出完整的节点路径(CSS或XPATH) 例如 html > body > div class ="something" > table > tr
dom - 页面加载时间中的 DOM 加载时间代表什么？
这是我的一个页面的典型加载时间如何拆分为:- Domain Lookup 0 0 % Connect 134 .3% Request
dom - .on() 未检测到 dom 更改
我的 .on() 工作时遇到一些问题。我的网站是here . 如果你看看 www.eliteweb-creation.co.uk/dev/js/nav.js，我正在 mouseenter 和 mous
dom - YUI3 DOM 未定义？
我是 Javascript 的新手，负责将我们产品的 UI 从 YUI2 迁移到 YUI3。看起来哪里都没有迁移指南，所以我现在正在浏览互联网帖子和 yui 文档。在我的全局范围内，我临时添加了类似
dom - 如何与实习生一起测试 DOM 敏感性
我想和实习生一起测试一些 DOM 相关的东西，不需要特定的固定装置，只是一般的 DOM 东西，比如我改变了 Element.prototype。这是否需要通过本地 Selenium 服务器(或 sau
dom - 文档对象模型 (DOM) 概念背后的真正思想是什么？
我是 HTML 和 HTML5 的初学者。当我阅读以下内容时 link ，我找到了术语 DOM 和 DOM API。我通读了维基百科，但无法理解其背后的全部思想。谁能给我解释一下: 文档对象模型
dom - DOM 扩展/包装究竟是什么？
我有两个主要问题。 Object 之类的扩展是否算数？什么是 DOM 包装？ http://perfectionkills.com/whats-wrong-with-extending-the-do
dom - 建议用于构建小部件的最小 Dom 操作库
对不起查询,原型(prototype)，雅虎 YUI，道场在考虑小的时候不吸引我。我想要一个模块化的库，代码尽可能小，最多 20Kb [un compressed] 是我所期望的。应该提供 Dom 操

首页

博学

6Ren·AI

商城

使用 DOM 的 JavaScript 棋盘