一个无序到有序的测试代码
看抖音里主播说到的一个无序变有序的测试，尝试按所说的条件写了一个javascript的测试
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 6 <title>混沌到有序</title> 7 8 9 </head> 10 11 <body> 12 <input type="button" value="启动" onclick="trigger(this)" /> 13 </body> 14 <script type="text/javascript"> 15 String.prototype.format = function() { 16 var _s = this; 17 for (var i = 0; i < arguments.length; i++) { 18 _s = _s.replace('{' + i + '}', arguments[i]); 19 } 20 return _s; 21 } 22 Array.prototype.indexOf = function(v) { 23 var result = -1; 24 var ary = this; 25 for (var i = 0; i < ary.length; i++) { 26 if (typeof(v) == "function") { 27 if (v(ary[i])) { 28 result = i; 29 break; 30 } 31 } else if (typeof(v) == "string") { 32 if (ary[i].toString().toLowerCase() == v.toLowerCase()) { 33 result = i; 34 break; 35 } 36 } else { 37 if (ary[i] == v) { 38 result = i; 39 break; 40 } 41 } 42 } 43 return result; 44 } 45 </script> 46 <script> 47 function trigger(button) { 48 if (ant.intervalid) { 49 button.value = '启动' 50 ant.stop(); 51 } else { 52 button.value = '暂停'; 53 ant.launch(100); 54 } 55 } 56 </script> 57 <script> 58 var doc = document; 59 var dom = document.body; 60 var blackColor = "rgba(125, 125, 125, 0.5)"; // 左转 颜色值不要使用 #RGBA这样的颜色值，请使用颜色名称或rgb(r, g, b)或rgba(r, g, b, a) 61 var whiltColor = "white"; // 右转 62 var cellWidth = 12; 63 var cellHeight = 12; 64 var cellBorderColor = "gray"; 65 var cellBorderWidth = 1; 66 // 坐标圆心单元格左上角坐标 67 var centerX = window.screen.availWidth / 2 - cellWidth / 2; 68 var centerY = window.screen.availHeight / 2 - cellHeight / 2; 69 var matrix = {}; 70 71 var directories = ['up', 'right', 'down', 'left'] 72 73 var ant = { 74 position: { 75 x: 0, 76 y: 0 77 }, 78 directory: 'up', // right,left,up,down 79 ant: null, 80 intervalid: null, 81 init: function() { 82 var _this = this; 83 this.createCell(0, 0, whiltColor); 84 85 this.ant = document.createElement('img'); 86 this.ant.src = "ant.png"; 87 var box_size = this.getCellSize(); 88 var point = this.cell2pixel(0, 0); 89 90 91 this.ant.style = "position:absolute;width:{0}px;height:{1}px;left:{2}px;top:{3}px;z-index:9999;".format( 92 box_size.width, 93 box_size.height, 94 point.left, 95 point.top); 96 97 dom.appendChild(this.ant); 98 99 _this.directory = directories[Math.floor(Math.random() * directories.length)] 100 101 console.log(_this.directory) 102 }, 103 /** 104 * 启动程序 105 * 106 * @param {int} interval 每一步的间隔，单位：毫秒 107 **/ 108 launch: function(interval) { 109 var _this = this; 110 111 if (_this.intervalid) return; 112 113 console.log('launch') 114 115 this.intervalid = setInterval(() => { 116 _this.crawl(1); 117 }, interval); 118 }, 119 /** 120 * 暂停程序 121 * 122 * **/ 123 stop: function() { 124 var _this = this; 125 126 if (!_this.intervalid) return; 127 128 console.log('stop') 129 130 clearInterval(this.intervalid); 131 132 this.intervalid = null; 133 }, 134 /** 135 * 爬行 136 * 137 * @param {int} step 步进单元格数量 138 **/ 139 crawl: function(step) { 140 step = step || 1; 141 142 var method = "crawl2{0}".format(this.directory); 143 144 this[method](step); 145 }, 146 /** 147 * 向左爬行 148 * 149 * @param {int} step 步进单元格数量 150 **/ 151 crawl2left: function(step) { 152 var x = this.position.x - step; 153 var y = this.position.y; 154 155 this.moveTo(x, y, 'left'); 156 }, 157 /** 158 * 向右爬行 159 * 160 * @param {int} step 步进单元格数量 161 **/ 162 crawl2right: function(step) { 163 var x = this.position.x + step; 164 var y = this.position.y; 165 166 this.moveTo(x, y, 'right'); 167 }, 168 /** 169 * 向上爬行 170 * 171 * @param {int} step 步进单元格数量 172 **/ 173 crawl2up: function(step) { 174 var x = this.position.x; 175 var y = this.position.y - step; 176 177 this.moveTo(x, y, 'up'); 178 }, 179 /** 180 * 向下爬行 181 * 182 * @param {int} step 步进单元格数量 183 **/ 184 crawl2down: function(step) { 185 var x = this.position.x; 186 var y = this.position.y + step; 187 188 this.moveTo(x, y, 'down'); 189 }, 190 /** 191 * 移动蚂蚁到指定的位置 192 * 193 * @param {int} stepX 步进单元格 X 方向的步数 194 * @param {int} stepY 步进单元格 Y 方向的步数 195 * @param {string} directory 步进方向 196 **/ 197 moveTo: function(stepX, stepY, directory) { 198 199 this.ant.src = "ant_{0}.png".format(directory); 200 201 var point = this.cell2pixel(stepX, stepY); 202 203 this.ant.style.left = point.left + 'px'; 204 this.ant.style.top = point.top + 'px'; 205 206 207 var pre_x = this.position.x; 208 var pre_y = this.position.y; 209 210 211 this.directory = directory; 212 this.position.x = stepX; 213 this.position.y = stepY; 214 215 var cell = this.getCell(stepX, stepY); 216 217 if (!cell) { 218 cell = this.createCell(stepX, stepY, whiltColor); 219 } 220 221 this.switchCellColor(pre_x, pre_y); 222 223 var color = this.getCellColor(stepX, stepY) || whiltColor; 224 225 // console.log('color', color, color == blackColor) 226 227 var directory_index = directories.indexOf(directory); 228 229 230 if (color == whiltColor) { 231 directory_index++; 232 } else { 233 directory_index--; 234 } 235 236 if (directory_index == directories.length) 237 directory_index = 0; 238 if (directory_index == -1) 239 directory_index = directories.length - 1; 240 241 this.directory = directories[directory_index]; 242 243 }, 244 /** 245 * 绘制单元格 246 * @param {int} x 单元格 x 索引 247 * @param {int} y 单元格 y 索引 248 **/ 249 createCell: function(x, y, bgColor) { 250 var el = doc.createElement("div"); 251 el.innerHTML = ""; 252 var point = this.cell2pixel(x, y); 253 var left = point.left; 254 var top = point.top; 255 var box_size = this.getCellSize(); 256 257 var cell_style = "width:{0}px;height:{1}px;background-color:{2};position:absolute;left:{3}px;top:{4}px;border:solid {5}px {6};"; 258 259 el.style = cell_style.format( 260 box_size.width - cellBorderWidth, 261 box_size.height - cellBorderWidth, 262 bgColor, 263 left, 264 top, 265 cellBorderWidth, 266 cellBorderColor); 267 268 // console.log(cell_style.format(box_size.width - cellBorderWidth, box_size.height - cellBorderWidth, bgColor, left, top, cellBorderWidth, cellBorderColor)); 269 270 dom.appendChild(el); 271 272 var key = "{0}_{1}".format(x, y); 273 274 matrix[key] = el; 275 276 return el; 277 }, 278 /** 279 * 获取单元格 280 **/ 281 getCell: function(x, y) { 282 283 var key = "{0}_{1}".format(x, y); 284 285 return matrix[key]; 286 }, 287 getCellColor: function(x, y) { 288 289 var cell = this.getCell(x, y); 290 291 if (!cell) return whiltColor; 292 293 return cell.style.backgroundColor; 294 }, 295 /** 296 * 变更单元格的颜色 297 **/ 298 switchCellColor: function(x, y) { 299 300 var cell = this.getCell(x, y); 301 302 if (!cell) return; 303 304 // console.log(cell.style.backgroundColor) 305 306 var bg_color = cell.style.backgroundColor || whiltColor; 307 308 if (bg_color == whiltColor) 309 bg_color = blackColor; 310 else 311 bg_color = whiltColor; 312 313 cell.style.backgroundColor = bg_color; 314 315 }, 316 /** 317 * 像素点转单元格（左上角） 318 * @param {int} left 319 * @param {int} top 320 **/ 321 pixel2cell: function(left, top) { 322 var cell_size = this.getCellSize(); 323 324 var x = (left - centerX) / cell_size.width; 325 var y = (top - centerY) / cell_size.height; 326 327 return { 328 x: x, 329 y: y 330 331 }; 332 }, 333 /** 334 * 单元格转像素点（左上角）, 335 * 336 * @param {int} x 单元格 x 索引 337 * @param {int} y 单元格 y 索引 338 * @return 当前单元格的索引位置 339 **/ 340 cell2pixel: function(x, y) { 341 var cell_size = this.getCellSize(); 342 343 var left = centerX + x * cell_size.width; 344 var top = centerY + y * cell_size.height; 345 346 return { 347 left: left, 348 top: top 349 }; 350 }, 351 /** 352 * 返回单元格尺寸 353 **/ 354 getCellSize: function() { 355 return { 356 width: cellBorderWidth * 2 + cellWidth, 357 height: cellBorderWidth * 2 + cellHeight 358 } 359 360 } 361 362 }; 363 364 ant.init(); 365 </script> 366 367 </html>
