keyup triggered without pressing

0
votes

my html and jquery code

<!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>

in the above code whenever keycheck method is called and a key ispressed an action is triggered. but the problem is that even earlier keypresses are also triggered.for eg when up arrow key is pressed for the first time moveup is triggered. when up arrow is pressed again it triggers moveup twice instead of once. similarly when up is pressed for third time it is triggered three times. why is this happening? what is the solution?

2
javascriptjqueryeventskeyboard

2 Answers

1
votes

Your binding keypress event on document ready once and then binding keypress event again for every keypress with your keycheck() function that is the reason why your function is been called more than once.

Solution : Remove the keycheck() function and put your code in keycheck function outside.

0
votes

$(document).ready(function() change with $(document).click(function()