有一个n*n的表格，从右上角开始，以贪吃蛇的方式依次填写数字
先看效果：
上代码：
1 <html> 2 3 <head> 4 <title>贪吃蛇填数字.2021.04.24</title> 5 <style> 6 td { 7 width: 50px; 8 height: 50px; 9 text-align: center; 10 border: 1px solid #999; 11 } 12 </style> 13 </head> 14 15 <body> 16 <table id="table"> 17 </table> 18 </body> 19 <script> 20 /* 构造表格数据 */ 21 function getTableData(n) { 22 //初始化 23 var table = [];// js不支持 二位数组写法[][] 24 for (var i = 0; i < n; i++) { 25 table[i] = []; 26 } 27 28 var num = 1, //要填写的数字 29 row = 0, //行下标，起始位置是右上角 0 30 col = n - 1,//列下标，起始位置是右上角 n-1 31 rowStep = 1, //行下标每次移动步长 32 colStep = 1, //列下标每次移动步长 33 yDir = true; //y轴方向移动 34 35 while (num <= n * n) { //循环 n*n 次 36 37 table[row][col] = num++; //填写数字 38 39 /* 下面寻找下一个填写数字的位置 */ 40 if (yDir) { 41 /* 如果是y轴方向移动 */ 42 var nextRow = row + rowStep;//下一个行坐标 43 if (nextRow < 0 || nextRow > n - 1 || !!table[nextRow][col]) { 44 /* 如果行坐标超出限制:0~n-1, 或者已经填写过值，则向右拐弯 */ 45 yDir = !yDir; //改为x轴方向移动 46 colStep = -1 * colStep; //方向调整了，列移动步长取反 47 col += colStep; //行不变，列移动一格 48 } else { 49 row = nextRow;//正常x轴移动一格 50 } 51 } else { 52 /* 如果是x轴方向移动 */ 53 var nextCol = col + colStep;//下一个列坐标 54 if (nextCol < 0 || nextCol > n - 1 || !!table[row][nextCol]) { 55 /* 如果列坐标超出限制:0~n-1, 或者已经填写过值，则向右拐弯 */ 56 yDir = !yDir;//改为y轴方向移动 57 rowStep = -1 * rowStep; //方向调整了，列移动步长取反 58 row += rowStep; //列不变，行移动一格 59 } else { 60 col = nextCol;//正常y轴移动一格 61 } 62 } 63 } 64 //返回最终表格 65 return table; 66 } 67 68 69 const n = 5; 70 var table = getTableData(n); 71 72 /*拼接html*/ 73 var html = ""; 74 for (var i = 0; i < n; i++) { 75 html += "<tr>" 76 var x = table[i]; 77 for (j = 0; j < n; j++) { 78 html += "<td>" 79 html += x[j]; 80 html += "</td>" 81 } 82 html += "</tr>" 83 } 84 document.getElementById("table").innerHTML = html; 85 </script> 86 87 </html>
浙公网安备 33010602011771号