一個簡單的網頁益智遊戲

時間 2019-11-13

標籤一個簡單網頁益智遊戲欄目 HTML 简体版

原文原文鏈接

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。