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

<script>functionstarGame(){document.getElementById("but").style.display="none";init()... <script>

function starGame(){
document.getElementById("but").style.display="none";
init();
for(var i=1;i<16;i++){
document.getElementById(i).style.display="block";
}
document.getElementById("but2").style.display="block";
}
function changeDis(did){

if(Math.abs(did-mubiao)==1||Math.abs(did-mubiao)==4){
var yuandiv=document.getElementById(did);
var mubiaodiv=document.getElementById(mubiao);
mubiaodiv.innerHTML=yuandiv.innerHTML;
yuandiv.innerHTML="0";
mubiaodiv.style.display="block";
yuandiv.style.display="none";
mubiao=did;
count++;

if(isSuss()){
endTime=new Date();
time= (endTime.getTime()-beginTime.getTime())/1000;
window.alert("Greet!\n时间:"+time+"秒，次数："+count+"\n重新开始！");
init();
}
}
}
function isSuss(){
for(var i=1;i<16;i++){
if(document.getElementById(i).innerHTML!=i){
return false;
}
}
return true;
}
function init(){
do{
var num = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];
for(var i=15;i>0;i--){
var innum=Math.floor(Math.random()*i)+1;
document.getElementById(i).innerHTML=num[innum-1];
num.splice(innum-1,1);
}
}while(isSuss());
mubiao=16;
count=0;
beginTime=new Date();
}
function reStart(){
init();
for(var i=1;i<16;i++){
document.getElementById(i).style.display="block";
}
with(document.getElementById(16)){
style.display="none";
innerHTML="0";
}
}

</script>
</head>
<body>
<h1>16格游戏</h1>
<button id="but" onclick="starGame()">开始游戏</button>
<table>
<tr>
<td><div id="1" onclick="changeDis(1)" >1</div></td>
<td><div id="2" onclick="changeDis(2)">2</div></td>
<td><div id="3" onclick="changeDis(3)" >3</div></td>
<td><div id="4" onclick="changeDis(4)" >4</div></td>
</tr>
<tr>
<td><div id="5" onclick="changeDis(5)">5</div></td>
<td><div id="6" onclick="changeDis(6)" >6</div></td>
<td><div id="7" onclick="changeDis(7)">7</div></td>
<td><div id="8" onclick="changeDis(8)">8</div></td>
</tr>
<tr>
<td><div id="9" onclick="changeDis(9)" >9</div></td>
<td><div id="10" onclick="changeDis(10)" >10</div></td>
<td><div id="11" onclick="changeDis(11)" >11</div></td>
<td><div id="12" onclick="changeDis(12)" >12</div></td>
</tr>
<tr>
<td><div id="13" onclick="changeDis(13)">13</div></td>
<td><div id="14" onclick="changeDis(14)" >14</div></td>
<td><div id="15" onclick="changeDis(15)" >15</div></td>
<td><div id="16" onclick="changeDis(16)" >0</div></td>
</tr>
</table>
<button id="but2" style="display:none;" onclick="reStart()">重新开始</button>
</body> 展开
 我来答
2个回答
#合辑# 机票是越早买越便宜吗？
yugi111
推荐于2016-09-06 · TA获得超过8.1万个赞
知道大有可为答主
回答量：5.1万
采纳率：70%
帮助的人：1.3亿
我也去答题访问个人页
展开全部 
<!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>
已赞过 已踩过<
你对这个回答的评价是？
评论 收起
302652034_bai
2014-12-10 · TA获得超过4145个赞
知道大有可为答主
回答量：2206
采纳率：66%
帮助的人：1547万
我也去答题访问个人页
展开全部
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().......
}
本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是？
评论 收起
推荐律师服务： 若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

为你推荐：

下载百度知道APP，抢鲜体验
使用百度知道APP，立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

京ICP证030173号-1   京网文【2023】1034-029号     ©2024Baidu  使用百度前必读 | 知道协议 | 企业推广

辅 助

模 式