我需要使用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>
答案 0 :(得分:0)
使用您的代码,我会做这样的事情:
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);
&#13;
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);
}*/
&#13;
<!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>
&#13;