ladder

ladder

关注
发信
关注(28)粉丝(399)

javascript - 如何使用Java枚举Snake and Ladder board？

我需要使用JavaScript制作Snake and Ladder游戏，但是我被困在枚举棋盘上，以使其与图像中的棋盘相同。
Snake and Ladder flash game



var board = {
  createBoard: function(dimension) {
    if (!dimension || isNaN(dimension) || !parseInt(dimension, 10)) {
      return false;
    } else {
      dimension = typeof dimension === 'string' ? parseInt(dimension, 10) : dimension;
      var table = document.createElement('table'),
        tbody = document.createElement('tbody'),
        row = document.createElement('tr'),
        cell = document.createElement('td'),
        rowClone,
        cellClone;
      table.appendChild(tbody);
      for (var r = 0; r < dimension; r++) {
        rowClone = row.cloneNode(true);
        tbody.appendChild(rowClone);
        for (var c = 0; c < dimension; c++) {
          cellClone = cell.cloneNode(true);
          rowClone.appendChild(cellClone);
        }
      }
      document.body.appendChild(table);
      board.enumerateBoard(table);
    }
  },
  enumerateBoard: function() {
    var rows = document.getElementsByTagName('tr'),
      text = document.createTextNode(''),
      rowCounter,
      size = rows.length,
      len,
      cells;
    for (var r = 0, size = rows.length; r <= size; r++) {
      rowCounter = String.fromCharCode(48 + r);
      cells = rows[r].getElementsByTagName('td');
      len = cells.length;
      rows[r].className = r % 2 == 0 ? 'even' : 'odd';
      for (var i = 0; i < len; i++) {
        cells[i].className = i % 2 == 0 ? 'even' : 'odd';
        cells[i].appendChild(text.cloneNode());
        if (rowCounter % 2 == 0) {
          cells[i].firstChild.nodeValue = rowCounter + i;
        } else {
          cells[i].firstChild.nodeValue = rowCounter + i;
        }
      }
    }
  }

  //for (var r = size, size = rows.length * rows.length; r >0; r--) {
  //    //rowCounter = String.fromCharCode(48 + r);
  //    cells = rows[r].getElementsByTagName('td');
  //    len = cells.length;
  //    rows[r].className = r % 2 == 0 ? 'even' : 'odd';
  //    for (var i = 0; i < len; i++) {

  //        cells[i].className = i % 2 == 0 ? 'even' : 'odd';
  //        cells[i].appendChild(text.cloneNode());
  //        cells[i].firstChild.nodeValue = r;
  //if (rowCounter % 2 == 0) {
  //    cells[i].firstChild.nodeValue = rowCounter + i;
  //}
  //else {
  //    cells[i].firstChild.nodeValue = rowCounter + i;
  //            //}
  //        }
  //    }
  //}

  //for (var r = 0; r < size; r++) {
  //    //rowCounter = 0;
  //    cells = rows[r].getElementsByTagName('td');
  //    len = cells.length;
  //    if (rowCounter % 2 == 0) {
  //        //rows[r].className = r % 2 == 0 ? 'even' : 'odd';
  //        for (var i = 0; i < len; i++) {
  //            //cells[i].className = i % 2 == 0 ? 'even' : 'odd';
  //            cells[i].appendChild(text.cloneNode());
  //            cells[i].firstChild.nodeValue = rowCounter + i;
  //        }
  //        rowCounter++;

  //    }

  //    else {
  //        rowCounter+=9;
  //        for (var j = len-1; j >=0; j--) {
  //            //cells[i].className = i % 2 == 0 ? 'even' : 'odd';
  //            cells[j].appendChild(text.cloneNode());
  //            cells[j].lastChild.nodeValue = rowCounter + j;
  //            //j++;
  //        }
  //    }
  //}

};

board.createBoard(10);

table {
  empty-cells: show;
}
td {
  border-radius: 10px;
  width: 55px;
  height: 55px;
  line-height: 55px;
  text-align: center;
  border: 0px solid #FFFFFF;
}
table tr td:hover {
  background: LightCyan !important;
  cursor: pointer;
}
tbody tr:nth-child(odd) td:nth-child(even),
tbody tr:nth-child(even) td:nth-child(odd) {
  /*color: #FF0000 ;*/
  background-color: PowderBlue;
}
tbody tr:nth-child(even) td:nth-child(even),
tbody tr:nth-child(odd) td:nth-child(odd) {
  background-color: SkyBlue;
}
/*tbody {
    counter-reset: rowNumber;
}

tr {
    counter-increment: rowNumber;
    counter-reset: cellNumber;
}

td {
    counter-increment: cellNumber;
}

    td::before {
        content: counter(cellNumber);
    }*/

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <meta charset="utf-8" />
  <link href="StyleSheet1.css" rel="stylesheet" />
</head>

<body>
  <script src="JavaScript1.js"></script>
</body>

</html>




我需要这方面的帮助。提前致谢。

最佳答案

使用您的代码，我将执行以下操作：



var board = {
  createBoard: function(dimension) {
    if (!dimension || isNaN(dimension) || !parseInt(dimension, 10)) {
      return false;
    } else {
      dimension = typeof dimension === 'string' ? parseInt(dimension, 10) : dimension;
      var table = document.createElement('table'),
        tbody = document.createElement('tbody'),
        row = document.createElement('tr'),
        cell = document.createElement('td'),
        rowClone,
        cellClone;
      table.appendChild(tbody);
      for (var r = 0; r < dimension; r++) {
        rowClone = row.cloneNode(true);
        tbody.appendChild(rowClone);
        for (var c = 0; c < dimension; c++) {
          cellClone = cell.cloneNode(true);
          rowClone.appendChild(cellClone);
        }
      }
      document.body.appendChild(table);
      board.enumerateBoard(table);
    }
  },
  enumerateBoard: function() {
    var rows = document.getElementsByTagName('tr'),
      text = document.createTextNode(''),
      rowCounter,
      size = rows.length,
      len,
      cells,
      odd = false,
      count = 0,
      control = 0;
    for (var r = rows.length-1; r >= 0; r--) {
      cells = rows[r].getElementsByTagName('td');
      len = cells.length;
      rows[r].className = r % 2 == 0 ? 'even' : 'odd';
      odd = ++control % 2 == 0 ? true : false;
      var reverse = rows.length;
      for (var i = 0; i < len; i++) {
        if (odd === true){
        	real = --reverse+count-i;
        }
        else{
        	real = count;
        }
        cells[i].className = i % 2 == 0 ? 'even' : 'odd';
        cells[i].appendChild(text.cloneNode());
        if (rowCounter % 2 == 0) {
          cells[i].firstChild.nodeValue = real;
        } else {
          cells[i].firstChild.nodeValue = real;
        }
        count++;
      }
    }
  }

  //for (var r = size, size = rows.length * rows.length; r >0; r--) {
  //    //rowCounter = String.fromCharCode(48 + r);
  //    cells = rows[r].getElementsByTagName('td');
  //    len = cells.length;
  //    rows[r].className = r % 2 == 0 ? 'even' : 'odd';
  //    for (var i = 0; i < len; i++) {

  //        cells[i].className = i % 2 == 0 ? 'even' : 'odd';
  //        cells[i].appendChild(text.cloneNode());
  //        cells[i].firstChild.nodeValue = r;
  //if (rowCounter % 2 == 0) {
  //    cells[i].firstChild.nodeValue = rowCounter + i;
  //}
  //else {
  //    cells[i].firstChild.nodeValue = rowCounter + i;
  //            //}
  //        }
  //    }
  //}

  //for (var r = 0; r < size; r++) {
  //    //rowCounter = 0;
  //    cells = rows[r].getElementsByTagName('td');
  //    len = cells.length;
  //    if (rowCounter % 2 == 0) {
  //        //rows[r].className = r % 2 == 0 ? 'even' : 'odd';
  //        for (var i = 0; i < len; i++) {
  //            //cells[i].className = i % 2 == 0 ? 'even' : 'odd';
  //            cells[i].appendChild(text.cloneNode());
  //            cells[i].firstChild.nodeValue = rowCounter + i;
  //        }
  //        rowCounter++;

  //    }

  //    else {
  //        rowCounter+=9;
  //        for (var j = len-1; j >=0; j--) {
  //            //cells[i].className = i % 2 == 0 ? 'even' : 'odd';
  //            cells[j].appendChild(text.cloneNode());
  //            cells[j].lastChild.nodeValue = rowCounter + j;
  //            //j++;
  //        }
  //    }
  //}

};

board.createBoard(12);

table {
  empty-cells: show;
}
td {
  border-radius: 10px;
  width: 55px;
  height: 55px;
  line-height: 55px;
  text-align: center;
  border: 0px solid #FFFFFF;
}
table tr td:hover {
  background: LightCyan !important;
  cursor: pointer;
}
tbody tr:nth-child(odd) td:nth-child(even),
tbody tr:nth-child(even) td:nth-child(odd) {
  /*color: #FF0000 ;*/
  background-color: PowderBlue;
}
tbody tr:nth-child(even) td:nth-child(even),
tbody tr:nth-child(odd) td:nth-child(odd) {
  background-color: SkyBlue;
}
/*tbody {
    counter-reset: rowNumber;
}

tr {
    counter-increment: rowNumber;
    counter-reset: cellNumber;
}

td {
    counter-increment: cellNumber;
}

    td::before {
        content: counter(cellNumber);
    }*/

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <meta charset="utf-8" />
  <link href="StyleSheet1.css" rel="stylesheet" />
</head>

<body>
  <script src="JavaScript1.js"></script>
</body>

</html>

关于javascript - 如何使用Java枚举Snake and Ladder board？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34494547/

10-09 13:24
Powered by LMLPHP ©2024 ladder 0.033751