看抖音里主播说到的一个无序变有序的测试，尝试按所说的条件写了一个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>
标签：function,单元格,无序,cell,var,directory,有序,测试代码,left From： https://www.cnblogs.com/dreamcat/p/16665977.html