一个简单的网页益智游戏

时间：2015-12-25 19:15:43 阅读：177 评论：0 收藏：0 [点我收藏+]

标签：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>益智游戏</title>
 <style type="text/css">
          table{
              width:500px;
              height:500px;
              border:1px solid red ;
              text-align:center ;
              border-collapse:collapse;
          }

          table td{
             border:1px solid red ;
             width:50px;
          }

          table td:hover{
             cursor:hand;
          }

          .one {
            background-color:black ;
          }
      </style>
</head>
<script>
<!--
var n=0;
function createTable()
{
    var body = document.documentElement.lastChild ;
    //alert(body.nodeName);
    var table=document.createElement("table");
    //alert(table.nodeName);
    table.id="tbl";
    table.align="center";
     var tr = document.createElement("tr") ;
     var td = document.createElement("td") ;
    for(var i = 1 ;i <= 10 ; i++){
                  var ctr = tr.cloneNode() ;
                  for(var j = 1 ;j<=10;j++) {
                      var ctd = td.cloneNode() ;
                      ctd.innerHTML = j ;
                      ctd.index = j ;
        ctd.onclick = function(){
        
            var k;
            var tds=document.getElementsByTagName("td");
            for(k=0;k<tds.length;k++)
            {
                if(typeof(tds[k].changeColor) == "undefined")
                                   break ;    
            }
            if(k==tds.length)
            {
             alert("恭喜，游戏结束了，你共用了" + n + "步");
             return;        
             }
             n++;
        document.getElementById("txt").value = n;
        var uptr = this.parentNode.previousSibling;
        var downtr = this.parentNode.nextSibling ;
        var lefttd = this.previousSibling ;
        var righttd = this.nextSibling ;
         if(uptr != null){
                              var uptd = uptr.childNodes[this.index *1-1] ;
                              uptd.className = "one" ;
                              uptd.changeColor = 1 ;
                          }

                          if(downtr != null){
                              var downtd = downtr.childNodes[this.index * 1-1] ;
                              downtd.className = "one" ;
                               downtd.changeColor = 1 ;
                          }

                          if(lefttd !=null){
                             lefttd.className = "one" ;
                             lefttd.changeColor = 1 ;
                          }

                          if(righttd != null){
                             righttd.className = "one" ;
                              righttd.changeColor = 1 ;
                          }
                          
            }
     ctr.appendChild(ctd) ;
    }
    table.appendChild(ctr);
    }
    
    body.appendChild(table) ;    
    
}




//-->
</script>
<body onload="createTable()">
 计算步骤：<input type="text" name="" id = "txt">
 <p>玩法介绍：</p>
 <p>点击表格中数字，其上下左右四格变黑色，当所有表格全为黑色时点击表格任意位置，游戏结束，统计所用步数</p>


</body>
</html>

一个简单的网页益智游戏

标签：

原文地址：http://www.cnblogs.com/JLUyeyu/p/5076499.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行