JavaScript中的棋盘模型

Question

我已经在JavaScript中创建了一个棋盘模型，它将最终迭代一个冠军游戏的一些动作。

我创建了一个板对象和一个块构造函数。我还创造了所有的棋子与他们正确的位置，在一个典型的棋盘上的排名和文件。不过，我不认为我已经在片段构造函数中正确地创建了我的移动方法，它只会移动板上的部分。这是模拟你认为的移动部件的最好方法吗？我想要移动方法将移动推到我的空游戏数组上，最终我希望能够在数组上来回移动。

如果您愿意的话，这将连接到我已经用下面的HTML和CSS代码制作的棋盘上。(省略了一些样板CSS。)

(function(window) {

    var board = {
      file: ["a", "b", "c", "d", "e", "f", "g", "h"],
      rank: [1, 2, 3, 4, 5, 6, 7, 8]
    };
    var piece = function (filePlace, rankPlace) {
      this.file = board.file[filePlace - 1];
      this.rank = board.rank[rankPlace - 1];
      this.move = function (a, b) {
        this.file = board.file[a - 1];
        this.rank = board.rank[b - 1];
      };
    };

    var whiteRook1 = new piece(1, 1);
    var whiteRook2 = new piece(8, 1);
    var whiteKnight1 = new piece(2, 1);
    var whiteKnight2 = new piece(7, 1);
    var whiteBishop1 = new piece(3, 1);
    var whiteBishop2 = new piece(6, 1);
    var whiteQueen = new piece(4, 1);
    var whiteKing = new piece(5, 1);
    var whitePawn1 = new piece(1, 2);
    var whitePawn2 = new piece(2, 2);
    var whitePawn3 = new piece(3, 2);
    var whitePawn4 = new piece(4, 2);
    var whitePawn5 = new piece(5, 2);
    var whitePawn6 = new piece(6, 2);
    var whitePawn7 = new piece(7, 2);
    var whitePawn8 = new piece(8, 2);

    var blackRook1 = new piece(1, 8);
    var blackRook2 = new piece(8, 8);
    var blackKnight1 = new piece(2, 8);
    var blackKnight2 = new piece(7, 8);
    var blackBishop1 = new piece(3, 8);
    var blackBishop2 = new piece(6, 8);
    var blackQueen = new piece(4, 8);
    var blackKing = new piece(5, 8);
    var blackPawn1 = new piece(1, 7);
    var blackPawn2 = new piece(2, 7);
    var blackPawn3 = new piece(3, 7);
    var blackPawn4 = new piece(4, 7);
    var blackPawn5 = new piece(5, 7);
    var blackPawn6 = new piece(6, 7);
    var blackPawn7 = new piece(7, 7);
    var blackPawn8 = new piece(8, 7);

    var game = [];

    window.chess = {

    };

})(window);

   body {
     background-color: darkgrey;
   }

   .container {
       width: 80%;
       margin: 3em auto 3em auto;
       min-width: 1in;
       max-width: 6in;
   }

   .chessboard .row {
     margin: 0; padding: 0;
     position: relative;
     clear: both;
   }

   .chessboard .row::before,
   .chessboard .row::after {
     font-size: 300%;
     position: absolute;
   }

   .chessboard .row::after {
     left: 103%;
   }

   .chessboard .row::before {
     right: 103%;
   }

   .chessboard .rank-8::before, .chessboard .rank-8::after {
     content: '8';
   }

   .chessboard .rank-7::before, .chessboard .rank-7::after {
     content: '7';
   }

   .chessboard .rank-6::before, .chessboard .rank-6::after {
     content: '6';
   }

   .chessboard .rank-5::before, .chessboard .rank-5::after {
     content: '5';
   }

   .chessboard .rank-4::before, .chessboard .rank-4::after {
     content: '4';
   }

   .chessboard .rank-3::before, .chessboard .rank-3::after {
     content: '3';
   }

   .chessboard .rank-2::before, .chessboard .rank-2::after {
     content: '2';
   }

   .chessboard .rank-1::before, .chessboard .rank-1::after {
     content: '1';
   }

   .chessboard .square {
       background-color: red;
       width: 12.5%;
       padding-bottom: 12.5%;
       display: inline-block;
       float: left;
   }

   .chessboard .row:nth-child(even) .square:nth-child(even) {
       background-color: red;
   }

   .chessboard .row:nth-child(even) .square:nth-child(odd) {
       background-color: lightgray;
   }

   .chessboard .square:nth-child(even) {
       background-color: lightgrey;
   }

   .chessboard .legend {
     display: inline-block;
     width: 12.5%;
     text-align: center;
     float: left;
     margin: 0;
     padding: 0;
     font-size: 300%;
   }

   nav {
     text-align: center;
   }

   nav button {
     font-size: 5ex;
     background-color: red;
     padding: 0 0.5em 0 0.5em;
     border-radius: 20%;
   }

   .chessboard .row .white::before, .chessboard .row .black::before {
     font-size: 300%;
     text-align: center;
     position: absolute;
     width: 12.5%;
     line-height: 1.2;
   }

   .chessboard .row .black.pawn::before, .white.pawn::before {
     content: '\265f';
   }

   .chessboard .row .black.knight::before, .white.knight::before {
     content: '\265e';
   }

   .chessboard .row .black.rook::before, .white.rook::before {
     content: '\265c';
   }

   .chessboard .row .black.queen::before, .white.queen::before {
     content: '\265b';
   }

   .chessboard .row .black.king::before, .white.king::before {
     content: '\265a';
   }

   .chessboard .row .black.bishop::before, .white.bishop::before {
     content: '\265d';
   }

   .chessboard .row .white {
     color: white;
   }

<!doctype html>
<html class="no-js" lang="">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>TIY Chessboard: Kasparov v Karpov (1984)</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Place favicon.ico in the root directory -->

    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
    <script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>

<body>
    <!--[if lt IE 8]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

    <style>

    </style>

    <main class="container">
        <div class="chessboard">
            <section class="rowFileLegend">
                <p class="legend">A</p>
                <p class="legend">B</p>
                <p class="legend">C</p>
                <p class="legend">D</p>
                <p class="legend">E</p>
                <p class="legend">F</p>
                <p class="legend">G</p>
                <p class="legend">H</p>
            </section>
            <section class="row rank-8">
                <div class="square file-a black rook"></div>
                <div class="square file-b black knight"></div>
                <div class="square file-c black bishop"></div>
                <div class="square file-d black queen"></div>
                <div class="square file-e black king"></div>
                <div class="square file-f black bishop"></div>
                <div class="square file-g black knight"></div>
                <div class="square file-h black rook"></div>
            </section>
            <section class="row rank-7">
                <div class="square file-a black pawn"></div>
                <div class="square file-b black pawn"></div>
                <div class="square file-c black pawn"></div>
                <div class="square file-d black pawn"></div>
                <div class="square file-e black pawn"></div>
                <div class="square file-f black pawn"></div>
                <div class="square file-g black pawn"></div>
                <div class="square file-h black pawn"></div>
            </section>
            <section class="row rank-6">
                <div class="square file-a"></div>
                <div class="square file-b"></div>
                <div class="square file-c"></div>
                <div class="square file-d"></div>
                <div class="square file-e"></div>
                <div class="square file-f"></div>
                <div class="square file-g"></div>
                <div class="square file-h"></div>
            </section>
            <section class="row rank-5">
                <div class="square file-a"></div>
                <div class="square file-b"></div>
                <div class="square file-c"></div>
                <div class="square file-d"></div>
                <div class="square file-e"></div>
                <div class="square file-f"></div>
                <div class="square file-g"></div>
                <div class="square file-h"></div>
            </section>
            <section class="row rank-4">
                <div class="square file-a"></div>
                <div class="square file-b"></div>
                <div class="square file-c"></div>
                <div class="square file-d"></div>
                <div class="square file-e"></div>
                <div class="square file-f"></div>
                <div class="square file-g"></div>
                <div class="square file-h"></div>
            </section>
            <section class="row rank-3">
                <div class="square file-a"></div>
                <div class="square file-b"></div>
                <div class="square file-c"></div>
                <div class="square file-d"></div>
                <div class="square file-e"></div>
                <div class="square file-f"></div>
                <div class="square file-g"></div>
                <div class="square file-h"></div>
            </section>
            <section class="row rank-2">
                <div class="square file-a white pawn"></div>
                <div class="square file-b white pawn"></div>
                <div class="square file-c white pawn"></div>
                <div class="square file-d white pawn"></div>
                <div class="square file-e white pawn"></div>
                <div class="square file-f white pawn"></div>
                <div class="square file-g white pawn"></div>
                <div class="square file-h white pawn"></div>
            </section>
            <section class="row rank-1">
                <div class="square file-a white rook"></div>
                <div class="square file-b white knight"></div>
                <div class="square file-c white bishop"></div>
                <div class="square file-d white queen"></div>
                <div class="square file-e white king"></div>
                <div class="square file-f white bishop"></div>
                <div class="square file-g white knight"></div>
                <div class="square file-h white rook"></div>
            </section>
            <section class="rowFileLegend">
                <p class="legend">A</p>
                <p class="legend">B</p>
                <p class="legend">C</p>
                <p class="legend">D</p>
                <p class="legend">E</p>
                <p class="legend">F</p>
                <p class="legend">G</p>
                <p class="legend">H</p>
            </section>
            <nav>
              <button class="buttons">▶</button>
              <button class="buttons">| <</button>
              <button class="buttons"><</button>
              <button class="buttons">></button>
              <button class="buttons">> |</button>
            </nav>
        </div>
    </main>

</body>

</html>

Answer 1

语义标记

这显然是对p和节元素的误用。章节是为了概述目的，而单个字母并不代表段落。

像这样的棋盘是表格数据，使表格成为使用的最佳元素。“标签”and和1-8应使用th元素标记。

经典

将类添加到页面上的每个元素中没有任何效率：

<div class="square file-a"></div>

这种重复正是我们有后代选择器、元素选择器和通配符选择器的原因。当标记切换到表时，元素选择器将最适合。

td, th {
  width: 12.5%;
  padding-bottom: 12.5%;
}

用于存储元数据的

类名

使用class属性存储有关瓷砖的信息是一个糟糕的选择，它会使移动碎片变得更烦人(因为现在您必须修改类列表以删除/更改驻留在其中的部分)。在某些情况下，使用自定义data-*属性将使工作变得更容易。

你的棋子很满意。它们的信息应该在标记中，而不是CSS中。

<tr>
<th>1</th>
<td>♖</td><!-- white rook -->
<td></td><!-- the white knight used to be here -->
<td>♗</td><!-- white bishop -->
<!-- etc -->
</tr>

通过这种方式，移动部分只是一个移除/附加文本节点到单元元素的问题。使用额外的元素(如span )来包含每个棋子，如果您想要使这成为一个可玩的国际象棋游戏，那么编写单击事件处理程序(S)可能会更容易。出于可读性的考虑，您也可能更喜欢它(<td>♗</td>与<td><span data-color="white" data-piece="bishop">♗</span></td>)。

升级浏览器通知

这种警告很俗气。最重要的是，你所使用的阻止IE8用户享受你的内容的功能数量几乎是零(我唯一看到的是nth-child是我唯一看到的不能工作的东西，这纯粹是装饰性的)或者需要一个非常小的垫片(段和主，我们已经确定您不应该为此使用节)。

Answer 2

不幸的是，我相信您的JavaScript模型是非常无用的。您所拥有的只是一堆变量名，它们存储一对坐标。piece类甚至不包含该片段的颜色或类型。

在国际象棋中执行移动操作时，通常会得到(在最简单的情况下)两组坐标，如b2-b4。现在你是如何在b2找到这件作品的？在您的情况下，您需要循环遍历所有部件的列表(您没有)才能找到正确的部分。

你需要改变逻辑。你不需要对棋子进行建模并将它们存储在每个地方，你需要对棋盘进行建模，并存储在哪个方格上。

HTML太复杂了。首先:棋盘是桌子的主要例子。

而且你的课太多了。经验法则:如果所有(子)元素都有相同的类，那么您正在做一些错误的事情。类用于标记与其他元素不同的元素。

对于每个单独的级别/文件，您也不需要一个类(rank-1、rank-2、file-a、file-b)。编程中的另一个经验法则是:每当你开始手工编号某件事时，你就是在做错误的事情。

最后，HTML不包含任何内容。这些片段在类名中都是“隐藏的”。一个非视觉访客(搜索引擎，盲人)不会“看到”任何东西。

下面是几年前的代码回顾，其中有一个类似的主题，其中我发布了一个如何在HTML中对棋盘建模的示例：

有人能看看我的象棋项目吗？

http://jsfiddle.net/xL9B8/4/

编辑:这是我的棋盘的更新版本，有坐标：http://jsfiddle.net/snatmdeh/2/