js+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部分

/**
 * @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>
 <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>