这段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> 展开
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个回答
展开全部
<!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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
document.onkeydown=function(event){//键盘按下事件
var e=event||window.event;
//e.keyCode left=37,up=38,right=39,down=40
}
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().......
}
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
