【发布时间】：2016-12-05 04:36:14
【问题描述】：
我的 html 和 jquery 代码
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js">
</script>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<style>
td
{
min-height: 50px;
min-width: 50px;
}
</style>
</head>
<body>
<table border="1" id="tab">
<tr>
<td class="game"></td>
<td class="game"></td>
<td class="game"></td>
<td class="game"></td>
</tr>
<tr>
<td class="game"></td>
<td class="game"></td>
<td class="game"></td>
<td class="game"></td>
</tr>
<tr>
<td class="game"></td>
<td class="game"></td>
<td class="game"></td>
<td class="game"></td>
</tr>
<tr>
<td class="game"></td>
<td class="game"></td>
<td class="game"></td>
<td class="game"></td>
</tr>
</table>
<div id="muse"></div>
<script>
var tab;
$(document).ready(function()
{
var i,j;
tab=[
[0,0,0,0],
[0,0,0,0],
[0,0,0,0],
[0,0,0,0]];
for(row=0;row<4;row++)
{
for(col=0;col<4;col++)
{
num=tab[row][col];
console.log("tab["+row+"]["+col+"]="+tab[row][col]);
}
}
console.log("Document ready");
randomnum();
});
function randomnum()
{
var num=Math.random();
console.log("called random num");
if(num<0.5)
num=2;
else
num=4;
console.log("num="+num);
var row=Math.floor(Math.random()*10);
row=row%4;
var col=Math.floor(Math.random()*10);
col=col%4;
console.log("random row col"+row+" "+col);
while(tab[row][col]!=0)
{
console.log("false");
var row=Math.floor(Math.random()*10);
row=row%4;
var col=Math.floor(Math.random()*10);
col=col%4;
console.log("random row col"+row+" "+col);
}
console.log("row:"+row+"col"+col);
tab[row][col]=num;
console.log("tab["+row+"]["+col+"]="+tab[row][col]);
$("#tab tr:eq("+row+") td:eq("+col+")").text(num);
keycheck();
}
function keycheck()
{ console.log("at key check");
$(document).keyup(function(event){
console.log(event.which)
if(event.which==38)
moveup();
else if(event.which==40)
movedown();
else if(event.which==39)
moveright();
else if(event.which==37)
moveleft();
});
}
function moveup()
{ console.log("moveup");
var row,col,j,st;
for(col=0;col<4;col++)
{
for(row=0;row<3;row++)
{
for(j=row;j<3;j++)
{
if(tab[j][col]==0&&tab[j+1][col]!=0)
{
tab[j][col]=tab[j+1][col];
tab[j+1][col]=0;
}
}
}
for(row=0;row<3;row++)
{
st=row+1;
/*while(tab[st][col]==0&&st<3)
{
//console.log(tab[st][col]);
st++;
}*/
if(tab[row][col]==tab[st][col])
{
tab[row][col]=tab[row][col]*2;
tab[st][col]=0;
}
}
for(row=0;row<3;row++)
{
for(j=row;j<3;j++)
{
if(tab[j][col]==0&&tab[j+1][col]!=0)
{
tab[j][col]=tab[j+1][col];
tab[j+1][col]=0;
}
}
}
}
chntable();
}
function movedown()
{
var row,col,j,st;
for(col=0;col<4;col++)
{
for(row=3;row>0;row--)
{
for(j=row;j>0;j--)
{
if(tab[j][col]==0&&tab[j-1][col]!=0)
{
tab[j][col]=tab[j-1][col];
tab[j-1][col]=0;
}
}
}
for(row=3;row>0;row--)
{
st=row-1;
while(tab[st][col]==0&&st>0&&tab[row][col]!=0)
{
//console.log(tab[st][col]);
st--;
}
if(tab[row][col]==tab[st][col])
{
tab[row][col]=tab[row][col]*2;
tab[st][col]=0;
}
}
for(row=3;row>0;row--)
{
for(j=row;j>0;j--)
{
if(tab[j][col]==0&&tab[j-1][col]!=0)
{
tab[j][col]=tab[j-1][col];
tab[j-1][col]=0;
}
}
}
}
chntable();
}
function moveright()
{ console.log("moveup");
var row,col,j,st;
for(row=0;row<4;row++)
{
for(col=0;row<3;row++)
{
for(j=col;j<3;j++)
{
if(tab[row][j]==0&&tab[row][j]!=0)
{
tab[j][col]=tab[j+1][col];
tab[j+1][col]=0;
}
}
}
for(col=0;col<3;col++)
{
st=col+1;
/*while(tab[st][col]==0&&st<3)
{
//console.log(tab[st][col]);
st++;
}*/
if(tab[row][col]==tab[st][col])
{
tab[row][col]=tab[row][col]*2;
tab[st][col]=0;
}
}
for(col=0;col<3;col++)
{
for(j=col;j<3;j++)
{
if(tab[row][j]==0&&tab[row][j+1]!=0)
{
tab[j][col]=tab[j+1][col];
tab[j+1][col]=0;
}
}
}
}
chntable();
}
function chntable()
{
var row,col,num;
for(row=0;row<4;row++)
{
for(col=0;col<4;col++)
{
num=tab[row][col];
//console.log("tab["+row+"]["+col+"]="+tab[row][col]);
$("#tab tr:eq("+row+") td:eq("+col+")").text(num);
}
}
randomnum();
}
</script>
</body>
</html>
在上面的代码中，只要调用keycheck 方法并按下一个键就会触发一个动作。但问题是甚至更早的按键也会被触发。例如，当第一次按下向上箭头键时，moveup 被触发。当再次按下向上箭头时，它会触发 moveup 两次而不是一次。同样，当第三次按下向上时，它会触发三次。为什么会这样？解决办法是什么？
【问题讨论】：
标签： javascript jquery events keyboard