个人中心
gpt4 book ai didi

javascript - 如何制作嵌套循环来制作棋盘？

转载 作者：行者123 更新时间：2023-11-29 23:53:24 25 4
gpt4 key购买 nike

大家好，我是 JS 的新手，我想学习这门语言，但有一件事我一直坚持，那就是让嵌套循环工作，这样我就可以让棋盘游戏出现。这是我到目前为止得到的:

while (y <= 7) {
  if (y % 2 == 0) {
    document.write("<div class=sq2> </div>")
      ++y;
  } else {
    document.write("<div class=sq1> </div>")
      ++y;
  }
}

sq1 生成白色方 block sq2 制作黑色瓷砖。每一行它们都应该不同，这就是为什么我得到了 IF 语句。这使得 1 行从左到右完美。但我似乎无法使嵌套循环工作，以便它从上到下形成 8 行。这就是我所拥有的:

var x = 0;
var y = 0;

while (x <= 8) {
  while (y <= 7) {
    if (y % 2 == 0) {
      document.write("<div class=sq2> </div>")
        ++y;
    } else {
      document.write("<div class=sq1> </div>")
        ++y;
    }
  }
  ++x;
}

谢谢

唯一

最佳答案

我用了 <table> (是的，我完全知道使用 <table> 会让小猫哭泣)。棋子在加载时与 #chessBoard 一起生成.它们由一组字体符号组成，每个符号代表一个黑色或白色的棋子。详细信息在来源中进行了评论。源代码可在 PLUNKER 上找到 和一个片段。

片段

<!DOCTYPE html>
<html>

<head>
  <style>
    body {
      overflow-y: scroll;
    }
    /* BOARD */
    /* 
    || Despite what everyone says not to use the <table> for
    || layout purposes, I'm doing it anyway. The display:
    || table-* properties are useful but takes too much effort 
    || to use on larger projects.
    */
    
    table#ChessBoard {
      width: 420px;
      height: 420px;
      table-layout: fixed;
      border: 3px ridge gray;
      border-collapse: separate;
      border-spacing: 2px;
    }
    
    tr.rank {
      width: 420px;
      height: 45px;
    }
    
    td.cell {
      width: 45px;
      height: 45px;
      border-left: 1px solid red;
      border-right: 1px solid red;
      border-top: 1px solid blue;
      border-bottom: 1px solid blue;
    }
    
    .white {
      background: white;
      color: red;
    }
    
    .black {
      background: black;
      color: blue;
    }
    /* This is a number/letter in the top left corner of 
    || every cell.
    */
    
    sup {
      text-align: left;
      vertical-align: top;
      font-size: 8px;
      font-weight: 700;
      font-family: Verdana;
      position: relative;
      z-index: 1;
      line-height: .3
    }
    /* PIECES */
    /*
    || This is the common styles for a game piece
    */
    
    div.piece.piece {
      max-width: 45px;
      max-height: 45px;
      font-size: 35px;
      font-weight: 100;
      text-align: center;
      vertical-align: middle;
      display: block;
      line-height: .3;
      margin: 0 auto;
      background: transparent;
      padding-bottom: 5px;
    }
    /*~~~~~~~~~~< PIECES >~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    /* These classes each have a unicode of a chess piece
    || in the content of an :after pseudo-element.
    */
    
    .wK:after {
      content: '\2654';
    }
    
    .wQ:after {
      content: '\2655';
    }
    
    .wR:after {
      content: '\2656';
    }
    
    .wB:after {
      content: '\2657';
    }
    
    .wN:after {
      content: '\2658';
    }
    
    .wP:after {
      content: '\2659';
    }
    
    .bK:after {
      content: '\265a';
    }
    
    .bQ:after {
      content: '\265b';
    }
    
    .bR:after {
      content: '\265c';
    }
    
    .bB:after {
      content: '\265d';
    }
    
    .bN:after {
      content: '\265e';
    }
    
    .bP:after {
      content: '\265f';
    }
  </style>
</head>

<body>
  <table id="chessBoard"></table>

  <script>
    /* BOARD */
    var brd = document.getElementById("chessBoard");
    /*
    || 4 Arrays that have the initial position of each chess piece
    || pre-arranged.
    */
    var black = ['bR', 'bN', 'bB', 'bQ', 'bK', 'bB', 'bN', 'bR'];
    var bPawn = ['bP', 'bP', 'bP', 'bP', 'bP', 'bP', 'bP', 'bP'];

    var white = ['wR', 'wN', 'wB', 'wQ', 'wK', 'wB', 'wN', 'wR'];
    var wPawn = ['wP', 'wP', 'wP', 'wP', 'wP', 'wP', 'wP', 'wP'];

    // First a rank (a row on a chessboard) must be made
    for (var i = 0; i < 8; i++) {

      var rank = brd.insertRow(i);
      rank.classList.add('rank');
      rank.id = 8 - i;

      for (var j = 0; j < 8; j++) {
        /*
        || On every iteration, a <td> is inserted...
        || ...then it's colors are given if it's odd/even.
        */
        var cell = rank.insertCell(j);
        var color = parseInt((i + j) % 2, 10) === 0 ? 'white' : 'black';
        /* The array is for establishing a horizontal guide for
        || the chessboard. 
        || The <sup> is for that previously mentioned feature 
        || of coordinates on each square.
        || The cell is further prepared with classes, id, etc.
        || The last line of this block calls a function
        || called pieces.
        */
        var col = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'];
        var coord = document.createElement('sup');
        coord.textContent = parseInt(8 - i, 10) + col[j];
        cell.appendChild(coord);
        cell.classList.add('cell');
        cell.classList.add(color);
        pieces(i);
      }
    }
    /* pieces will:
    || check to see of we are on the 2 ranks for each side.
    || If so, then it determines which rank of pieces needs
    || to be created.
    */
    function pieces(i) {
      var row = brd.rows[i].querySelectorAll('td');
      var piece = document.createElement('div');
      piece.setAttribute('draggable', true);
      switch (i) {
        case 0:
          piece.classList.add('piece');
          piece.classList.add('black');
          piece.classList.add(black[j]);
          cell.appendChild(piece);
          break;
        case 1:
          piece.classList.add('piece');
          piece.classList.add('black');
          piece.classList.add('wP');
          cell.appendChild(piece);
          break;
        case 6:
          piece.classList.add('piece');
          piece.classList.add('white');
          piece.classList.add('bP');
          cell.appendChild(piece);
          break;
        case 7:
          piece.classList.add('piece');
          piece.classList.add('white');
          piece.classList.add(white[j]);
          cell.appendChild(piece);
          break;
        default:
          break;
      }
    }
    /* This is a group of drag and drop functions that are not          
    || finished but it's a good start should you decide that drag
    || and drop is needed.
    is 
    function drag(ev) {
      ev.dataTransfer.setData("text/html", ev.target.id);
    }

    function dropHandler(ev) {
      ev.preventDefault();
      var id = ev.dataTransfer.getData("text/html");

      if (id == "srcMove" && ev.target.id == "destMove") {
        ev.target.appendChild(document.getAttribute(id));
      }
    }
  */
  </script>
</body>

</html>

关于javascript - 如何制作嵌套循环来制作棋盘？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42261709/

25 4 0
文章推荐： javascript - Sequelize js : update/save in model's method
文章推荐： javascript - 快照参数/服务在 Angular 2 中返回 NaN
文章推荐： php - 设置默认 View 值标志时 Magento 的行为很奇怪
文章推荐： javascript - 如何使用 Knockout 使列值只出现一次？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com