这段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>
已赞过 已踩过<
你对这个回答的评价是？
评论 收起
黄先生
2024-12-27 广告
矩阵切换器就是将一路或多路视音频信号分别传输给一个或者多个显示设备，如两台电脑主机要共用一个显示器，矩阵切换器可以将两台电脑主机上的内容renyi切换到同一个或多个显示器上；迈拓维矩矩阵切换器种类齐全，性价比高，支持多种控制方式，为工程商采... 点击进入详情页
本回答由黄先生提供
 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  使用百度前必读 | 知道协议 | 企业推广

辅 助

模 式