Question

我的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两次而不是一次。类似地，当第三次按下向上时，它被触发三次。为什么会这样？解决方案是什么？

Answer 1

您的文档准备好了一次绑定按键事件，然后使用您的keycheck（）函数再次为每个按键绑定按键事件，这就是为什么您的函数被多次调用的原因。

解决方案：删除keycheck（）函数并将代码放在keycheck函数之外。

Answer 2

$（document）.ready（function（）改变为$（document）.click（function（）

没有按下就触发了键盘

2 个答案: