js+html迷宫心得

心得与体会
document.createElement()是在对象中创建一个对象,要与appendChild()insertBefore()方法联合使用。其中,appendChild() 方法在节点的子节点列表末添加新的子节点setAttribute()方法添加指定的属性,并为其赋指定的值。
如果这个指定的属性已存在,则仅设置/更改值。< table > 标签定义 HTML

心得与体会

  1. document.createElement()

    是在对象中创建一个对象,要与**appendChild()** 或 **insertBefore()**方法联合使用。其中,appendChild() 方法在节点的子节点列表末添加新的子节点
    
  2. setAttribute()

    方法添加指定的属性,并为其赋指定的值。
    如果这个指定的属性已存在,则仅设置/更改值。
    
  3. < table > 标签定义 HTML 表格。

    简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
    tr 元素定义表格行,th 元素定义表头,td 元素定义表格单元
    
  4. < center > 标签对其包围的文本进行水平居中处理。
    注:

    HTML 4.01 与 HTML 5 之间的差异
    在 HTML 5 中,不支持该标签。请使用 CSS 代替。
    
  5. insertRow() 方法用于在表格中的指定位置插入一个新行。

    返回值

    返回一个 TableRow,表示新插入的行。
    

    说明

    该方法创建一个新的 TableRow 对象,表示一个新的 <tr> 标记,并把它插入表中的指定位置。
    新行将被插入 index 所在行之前。若 index 等于表中的行数,则新行将被附加到表的末尾。
    如果表是空的,则新行将被插入到一个新的 <tbody> 段,该段自身会被插入表中。
    

    抛出

    若参数 index 小于 0 或大于等于表中的行数,该方法将抛出代码为 INDEX_SIZE_ERR 的 DOMException 异常。
    
  6. insertCell() 方法用于在 HTML 表的一行的指定位置插入一个空的 < td > 元素。
    语法

    tablerowObject.insertCell(index)
    

    返回值

    一个 TableCell 对象,表示新创建并被插入的 < td > 元素。
    

    说明

    该方法将创建一个新的 < td > 元素,把它插入行中指定的位置。新单元格将被插入当前位于 index 指定位置的表元之前。如果 index 等于行中的单元格数,则新单元格被附加在行的末尾。
    请注意,该方法只能插入 < td > 数据表元。若需要给行添加头表元,必须用 Document.createElement() 方法和 Node.insertBefore() 方法(或相关的方法)创建并插入一个 < th > 元素。
    

    抛出

    若参数 index 小于 0 或大于等于行中的的表元数,该方法将抛出代码为 INDEX_SIZE_ERR 的 DOMException 异常。
    
  7. index 属性可返回下拉列表中选项的索引位置。
    语法

    optionObject.index
    
  8. floor() 方法可对一个数进行下舍入。
    语法

    Math.floor(x)
    

    参数 描述

    x    必需。任意数值或表达式。
    

    返回值

    小于等于 x,且与 x 最接近的整数。
    

    说明

    floor() 方法执行的是向下取整计算,它返回的是小于或等于函数参数,并且与之最接近的整数。
    
  9. event.keyCode键码值

  10. 创建带有 4 个选项的选择列表:
    < select >
    < option value =”volvo” >Volvo< /option >
    < option value =”saab”>Saab< /option >
    < option value=”opel”>Opel< /option >
    < option value=”audi”>Audi< /option >
    < /select >

下面附上源代码

javascript部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
/**
* @author Administrator
*/
var locx = 0; //当前行坐标
var locy = 0; //当前列坐标
var zuobiaoarr = new Array(1); //坐标数组
var tobearr = new Array(); //等待数组
var migongrow = 1; //迷宫行数
var migongcol = 1; //迷宫列数
var roadwidth = 10; //道路宽度
var wallwidth = 2; //墙厚度
var personwidth = 5; //行走方块厚度
/*
* 坐标类
*/
function zuobiao(x,y,f){
this.x=x;
this.y=y;
this.visited=f; /* 0 not visit 1 tobevisit 2 visit*/
this.wall = new Array(0,0,0,0); //wall left->top->right->bottom 0:closed 1:open
}
/*
* 功能: 创建迷宫对象
* @param r: 迷宫行数
* c: 迷宫列数
* s: 入口行数
* e: 出口行数
* road: 道路宽度
* wall: 墙体宽度
* psn: 行者宽度
*/
function MiGong(r,c,s,e,road,wall,psn){
migongrow = r;//迷宫行数
migongcol = c;//迷宫列数
roadwidth = road;//道路宽度
wallwidth = wall;//墙体宽度
personwidth = psn;//行者宽度
zuobiaoarr = new Array(1);
var migong = document.createElement("table");
migong.setAttribute("border",0);
migong.setAttribute("cellPadding",0);
migong.setAttribute("cellSpacing",0);
migong.setAttribute("id","migong");
document.getElementsByTagName("center")[0].appendChild(migong);
//在center标签后面加入一个migong对象
for(var i = 0; i < migongrow*2+1; i++){
var r = migong.insertRow(-1);
for(var j = 0; j < migongcol*2+1; j++){
var cell = r.insertCell(-1);
if(i % 2){
if(j % 2)
cell.style.cssText="height:" + roadwidth + "px;width:" + wallwidth + "px;background-color:#eeeeee";//灰色
else
cell.style.cssText="height:" + roadwidth + "px;width:" + wallwidth + "px;background-color:#333333";//黑色
}
else{
if(j % 2)
cell.style.cssText="height:" + wallwidth + "px;width:" + roadwidth + "px;background-color:#333333";
else
cell.style.cssText="height:" + wallwidth + "px;width:" + wallwidth + "px;background-color:#333333";
}
}
}
//初始化坐标
for(var i = 1; i <= migongrow; i++)
for(var j = 1; j <= migongcol; j++){
var len = zuobiaoarr.length;
zuobiaoarr[len] = new zuobiao(i,j,0);
zuobiaoarr[len].index = (i-1) * migongcol + j;
//zuobiaoarr[len].index = (i-1) * migongrow + j;
//顶层设置不可开
if(i == 1)
zuobiaoarr[len].wall[1] = 1;
//底层设置不可开
if(i == migongrow)
zuobiaoarr[len].wall[3]=1;
//左边设置不可开
if(j == 1)
zuobiaoarr[len].wall[0]=1;
//右边设置不可开
if(j == migongcol)
zuobiaoarr[len].wall[2]=1;
}
CreateMG(s,1,e,migongcol);
}
/*
* 功能: 把节点加入等待队列
* @param zuo: 要加入的节点
*/
function AddTobe(zuo){
if(!zuo) return;
zuo.visited = 1;
tobearr[tobearr.length] = zuo;//等待数组的长度为zuo
}
/*
* 功能: 取出等待队列最后一个节点
*/
var RemoveTobe = function(){
var zuo = tobearr[tobearr.length-1];
if(tobearr.length > 0)
tobearr.length -= 1;
return zuo;
}
/*
* 功能: 打墙
* @param : zuo 当前位置节点
*/
function hole(zuo){
var tobehole = new Array();
var x = zuo.x;
var y = zuo.y;
zuo.flag=2;
var aflag = new Array();
var len = 0;
if(zuo.visited == 2)
return;
zuo.visited = 2;
//选择可打墙
var ztmp = null;
for(var i = 0; i < 4; i++){
switch(i){
case 0:
ztmp = zuobiaoarr[zuo.index-1];
if(ztmp && !ztmp.visited)
ztmp.wall[2]=1;
break;
case 1:
ztmp = zuobiaoarr[zuo.index-migongcol];
if(ztmp && !ztmp.visited )
ztmp.wall[3]=1;
break;
case 2:
ztmp = zuobiaoarr[zuo.index+1];
if(ztmp && !ztmp.visited)
ztmp.wall[0]=1;
break;
case 3:
ztmp = zuobiaoarr[zuo.index+migongcol];
if(ztmp && !ztmp.visited)
ztmp.wall[1]=1;
break;
}
if(ztmp && !zuo.wall[i] && !ztmp.visited){
len = aflag.length;
zuo.wall[i] = 1;
aflag[len] = ztmp;
MakeHole(i,zuo);
}
}
len = aflag.length;
var xx = 0;
if(len > 0){
xx = Math.floor(Math.random()*10);
for(var i = 0; i < len; i++){
AddTobe(aflag[xx%len]);
xx++;
}
xx = Math.floor(Math.random()*len);
}
}
/*
* 功能: 开墙
* @param : xx 哪一面 0 left 1 top 2 right 3 bottom
* zuo 需要打墙的坐标
*/
function MakeHole(xx,zuo){
var tbl = document.getElementById("migong");
switch (xx) {
case 0: //left
tbl.rows[zuo.x * 2 - 1].cells[(zuo.y - 1) * 2].style.backgroundColor = "#eeeeee";
break;
case 1: //top
tbl.rows[(zuo.x - 1) * 2].cells[zuo.y * 2 - 1].style.backgroundColor = "#eeeeee";
break;
case 2: //right
tbl.rows[zuo.x * 2 - 1].cells[zuo.y * 2].style.backgroundColor = "#eeeeee";
break;
case 3: //bottom
tbl.rows[zuo.x * 2].cells[zuo.y * 2 - 1].style.backgroundColor = "#eeeeee";
break;
}
}
/*
* 功能:创建迷宫
* @param startx: 开始位置x坐标, 入口的行数
* starty: 开始位置y坐标
* endx : 结束位置x坐标, 入口的列数
* endy : 结束位置y坐标
*/
function CreateMG(startx,starty,endx,endy){
var xx = startx;//开始的横竖坐标
var yy = starty;
locx = endx;//结束的横竖坐标
locy = endy;
var zuo = zuobiaoarr[(startx-1) * migongcol + starty];
zuo.visited = 2;
MakeHole(0,zuo);
MakeHole(2,zuobiaoarr[(endx-1) * migongcol + endy]);
AddTobe(zuo);
while(1){
var node = RemoveTobe();
if(!node) break;
hole(node);
}
var tbl = document.getElementById("migong");
var obj = tbl.rows[endx*2-1].cells[endy*2-1];
var xx = getAbsLoc(obj);
var left = xx[0]+(roadwidth-personwidth)/2;
var top = xx[1]+(roadwidth-personwidth)/2;
//创建行走方块
var oper = document.createElement("div");
oper.style.cssText="lineheight:" + personwidth + "px;width:" + personwidth + "px;height:" + personwidth + "px;background:#ff2222;position:absolute;left:"+ left + "px;top:" + top + "px";
oper.setAttribute("id","migperson");
document.body.appendChild(oper);
tbl.rows[startx*2-1].cells[starty*2-1].style.backgroundColor="#ffcc22";
}
/*
* 功能: 按键事件
*/
document.onkeydown = function(){
var oper = document.getElementById("migperson");
switch(event.keyCode){
case 37:
if (locy > 1 && zuobiaoarr[(locx-1) * migongcol + locy].wall[0]) {
oper.style.left = parseInt(oper.style.left) - (roadwidth+wallwidth);
locy -= 1;
}
break;
case 39:
if (locy < migongcol && zuobiaoarr[(locx - 1) * migongcol + locy].wall[2]) {
oper.style.left = parseInt(oper.style.left) + (roadwidth+wallwidth);
locy += 1;
}
break;
case 38:
if (locx > 1 && zuobiaoarr[(locx - 1) * migongcol + locy].wall[1]) {
oper.style.top = parseInt(oper.style.top) - (roadwidth+wallwidth);
locx -= 1;
}
break;
case 40:
if (locx < migongrow && zuobiaoarr[(locx - 1) * migongcol + locy].wall[3]) {
oper.style.top = parseInt(oper.style.top) + (roadwidth+wallwidth);
locx += 1;
}
break;
}
}
/*
* 功能: 获取绝对位置
* @param obj: 待获取地址的对象
*/
function getAbsLoc(obj){
var xx = new Array(2);
xx[0] = 0;
xx[1] = 0;
while(obj){
xx[0] += obj.offsetLeft;
xx[1] += obj.offsetTop;
obj = obj.offsetParent;
}
return xx;
}
```
**html部分**
```html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>迷宫示例</title>
</head>
<body>
<center>
迷宫行数:<select id="rowselect" onChange="changerow(this)"></select>&nbsp;
迷宫列数: <select id="colselect"></select> &nbsp;
入口行:<select id="startrow"></select>&nbsp;
出口行:<select id="endrow"></select>&nbsp;
道路宽: <select id="roadwidth"></select>&nbsp;
墙宽: <select id="wallwidth"></select>&nbsp;
行者宽: <select id="personwidth"></select>&nbsp;
<input type="button" value="生成迷宫" onClick="createMg()">
<p></p>
</center>
</body>
<script src="migong.js"></script>
<script>
var rowsel = document.getElementById("rowselect");
var colsel = document.getElementById("colselect");
for(var i=5;i<=50;i++){
var o = document.createElement("option");
o.value = i;
o.text = i;
o1 = document.createElement("option");
o1.value = i;
o1.text = i;
rowsel.options.add(o);
colsel.options.add(o1);
}
changerow(rowsel);
function changerow(obj){
var strow = document.getElementById("startrow");
var enrow = document.getElementById("endrow");
for (var i = strow.options.length-1; i >= 0 ; i--) {
strow.options.remove(i);
enrow.options.remove(i);
}
for(var i = 1; i <= obj.value; i++){
var o = document.createElement("option");
o.value = i;
o.text = i;
o1 = document.createElement("option");
o1.value = i;
o1.text = i;
strow.options.add(o);
enrow.options.add(o1);
}
enrow.selectedIndex = obj.value-1;
}
//初始化道路宽度
var sroad = document.getElementById("roadwidth");
for(var i=10;i<=20;){
var o = document.createElement("option");
o.value = i;
o.text = i;
i += 2;
sroad.options.add(o);
}
//初始化墙壁宽度
var swall = document.getElementById("wallwidth");
for(var i=1;i<=5;i++){
var o = document.createElement("option");
o.value = i;
o.text = i;
swall.options.add(o);
}
//初始化行者宽度
var sperson = document.getElementById("personwidth");
for(var i=5;i<=10;i++){
var o = document.createElement("option");
o.value = i;
o.text = i;
sperson.options.add(o);
}
function createMg(){
var o = document.getElementById("migong");
var oc = document.getElementsByTagName("center")[0];
if(o) oc.removeChild(o);
var o = document.getElementById("migperson");
if (o) document.body.removeChild(o);
var strow = document.getElementById("startrow");
var enrow = document.getElementById("endrow");
var rowsel = document.getElementById("rowselect");
var colsel = document.getElementById("colselect");
var migong = new MiGong(parseInt(rowsel.value),parseInt(colsel.value),
parseInt(strow.value),parseInt(enrow.value),parseInt(document.getElementById("roadwidth").value),
parseInt(document.getElementById("wallwidth").value),parseInt(document.getElementById("personwidth").value));
}
</script>
</html>
越来越多的平台(微信公众平台,新浪微博,简书,百度打赏等)支持打赏功能,付费阅读时代越来越近,特此增加了打赏功能,支持微信打赏和支付宝打赏。坚持原创技术分享,您的支持将鼓励我继续创作!