这段javascript代码如何添加代码使得能用键盘的上下左右控制方块移动

举报该问题

推荐答案推荐于2016-09-06

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>动态多宫格</title>
<style type="text/css">
</style>
<script type="text/javascript">
window.onload = function ()
    {
    Grids.init ();
    }
    var Grids =
    {
     row: 4,
     col: 4,
        arr : [
                1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15
        ],
        init : function ()
        {
        document.body.style['text-align'] = 'center';
        var table = document.createElement ('table');
        table.style['margin'] = '0 auto';
        document.title = table.id = 'Grids' + this.row * this.col;
        document.title += " 还未开始游戏";
        for ( var i = 0; i < this.row + 1; i++)
        {
        var tr = table.insertRow (table.rows.length);
        for ( var j = 0; j < this.col; j++)
        {
        if (i <= this.row-1 && j <= this.col-1)
        {
        var td = tr.insertCell (tr.cells.length);
        var btn = document.createElement ("input");
        btn.type = 'button';
        btn.style.width = '50px';
        btn.style.height = '50px';
        td.appendChild (btn);
        if (i <= this.row-2 || i == this.row-1 && j <= this.col-2)
        {
        var start = Math.floor (Math.random () * this.arr.length);
        btn.value = this.arr[start];
        this.arr.splice (start, 1);
        }
        else
        {
        btn.value = '';
        }
        }
        }
        if (i == this.row)
        {
        var td = tr.insertCell (tr.cells.length);
        td.colSpan = this.col;
        td.style.textAlign = 'center';
        var btn = document.createElement ("input");
        btn.type = 'button';
        btn.value = '开始';
        btn.style.width = '50px';
        btn.style.height = '30px';
        btn.onclick = function ()
        {
         var table = this.parentElement.parentElement.parentElement;
         var rs = table.rows;
         for ( var j = 0; j < rs.length - 1; j++)
                        {
                        var cs = rs[j].cells;
                        for ( var k = 0; k < cs.length; k++)
                            {
                            cs[k].children[0].onclick = function ()
                            {
                             Grids.go (this);
                            }
                            }
                        }
         document.title = document.title.replace(/(Grids\d+).*/, '$1 已开始');
        }
        td.appendChild (btn);
        }
        }
        document.body.appendChild (table);
        Grids.key();
        Grids.isOver(table);
        },
        find : function (p, row, col)
        {
        var reg = /^\s*|\s*$/g;
        var rc = [
                [
                        row - 1, col
                ], [
                        row + 1, col
                ], [
                        row, col - 1
                ], [
                        row, col + 1
                ]
        ];
        for ( var i = 0; i < rc.length; i++)
        {
        if (rc[i][0] >= 0 && rc[i][0] < this.col && rc[i][1] >= 0 && rc[i][1] < this.col)
        {
        if (p.rows[rc[i][0]].cells[rc[i][1]].children[0].value.replace (reg, '') == '')
        {
        return [
                rc[i][0], rc[i][1]
        ];
        }
        }
        }
        return null;
        },
        go : function (btn)
        {
         var p = btn.parentElement.parentElement.parentElement;
        var row = btn.parentElement.parentElement.rowIndex;
        var col = btn.parentElement.cellIndex;
        var site = Grids.find (p, row, col);
        if (!!site)
        {
        var r = site[0], c = site[1];
        var replaced = p.rows[r].cells[c].children[0];
        p.rows[row].cells[col].appendChild (replaced);
        p.rows[r].cells[c].appendChild (btn);
        }
        this.isOver(p);
        },
        key: function ()
        {
         var table = document.getElementById("Grids" + this.row * this.col);
         var rows = table.rows;
         document.onkeyup = function (e)
         {
         e = e || window.event;
         var keycode = e.keyCode;
         // up, down, left, right
         if (!/^(38|40|37|39)$/.test(keycode))
                {
                 return false;
                }
         var btns = [], r = -1, c = -1;
         for ( var i = 0; i < rows.length - 1; i++)
                {
         var ri = rows[i];
                for ( var j = 0; j < ri.cells.length; j++)
                    {
                    var btn = ri.cells[j].children[0];
                    if (btn.value === '')
                        {
                        r = i;
                        c = j;
                        break;
                        }
                    }
                }
         var site = [[r+1,c],[r-1,c],[r, c+1],[r, c-1]];
         for ( var i = 0; i < site.length; i++)
                {
         var rs = rows[site[i][0]];
         if (!!rs)
                    {
         if (rs.cells.length == Grids.col)
                        {
         var temp = rs.cells[site[i][1]];
                 if (!!temp)
                            {
                         btns.push(temp.children[0]);
                            }
                 else
                 {
         btns.push(null);
         }
                        }
         else
         {
         btns.push(null);
}
                    }
         else
         {
btns.push(null);
}
                }
         switch (keycode)
                {
                case 38:
                 !!btns[0] ? Grids.go(btns[0]) : 0;
                break;
                case 40:
                 !!btns[1] ? Grids.go(btns[1]) : 0;
                break;
                case 37:
                 !!btns[2] ? Grids.go(btns[2]) : 0;
                break;
                case 39:
                 !!btns[3] ? Grids.go(btns[3]) : 0;
                break;
                default:
                break;
                }
         }
        },
        isOver: function (table)
        {
         var rows = table.rows, flag = true;
         L: for ( var i = 0; i < rows.length - 1; i++)
            {
         var r = rows[i], len = r.cells.length;
         if (i == rows.length - 2)
                {
         len = 1;
                }
         for ( var j = 0; j < len; j++)
                {
                if ( r.cells[j].children[0].value != i * r.cells.length + j + 1 )
                    {
                    flag = false;
                    break L;
                    }
                }
            }
        if (flag)
            {
            alert ('YOU WIN !');
            return true;
            }
        return false;
        }
    };
</script>
</head>
<body>
</body>
</html>

温馨提示：答案为网友推荐，仅供参考

当前网址：http://99.wendadaohang.com/zd/XBvjjvO77e7BBjetOe.html

其他回答

第1个回答 2014-12-10

document.onkeydown=function(event){//键盘按下事件
var e=event||window.event;
//e.keyCode left=37,up=38,right=39,down=40
}追问

我知道这个函数可是要怎么写的完整求完整代码。。。感激不尽

追答

document.onkeydown=function(event){//键盘按下事件
var e=event||window.event;
//e.keyCode left=37,up=38,right=39,down=40
if(e.keyCode==37)
changeDis(1);//你之前怎么移动的，照搬

if().......
}

追问

我之前就是这么写的可是还是无法用键盘移动

追答

那只能是你的代码问题，你的changeDis函数是根据位置移动，如果你想按照原先的得设置16个按键。
另外，就是指设置上下左右四个按键，写一个方法，判断0所在的位置。然后根据按键和0的位置来移动相应位置的数字

本回答被网友采纳