2016-07-30 28 views
0

meinen HTML und jQuery-Codekeyup ausgelöst ohne

<!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 dem obigen Code zu drücken, wenn keycheck Methode aufgerufen wird und ein Schlüssel IsPressed eine Aktion ausgelöst wird. Das Problem ist jedoch, dass auch frühere Tastendrücke ausgelöst werden. Wenn zB die Pfeiltaste zum ersten Mal gedrückt wird, wird moveup ausgelöst. wenn der Pfeil nach oben erneut gedrückt wird, löst er zweimal statt einmal moveup aus. Wenn Sie zum dritten Mal drücken, wird es dreimal ausgelöst. Warum passiert dies? Was ist die Lösung?

Antwort

1

Ihre Bindung keypress Ereignis auf Dokument einmal fertig und dann wieder verbindlich keypress Ereignis für jeden Tastendruck mit Ihrer Schlüsselprüfung() Funktion, die der Grund ist, warum Ihre Funktion mehr als einmal aufgerufen worden

Lösung:.. entfernen Sie die Schlüsselprüfung() Funktion und setzen Sie den Code in Schlüsselprüfung Funktion außerhalb

+0

nicht, wie. löse das? Ich habe versucht, zu '$ (document) .click (function)' anstelle von '$ (document) .click (ready) '. und immer noch nicht das Problem lösen –

+0

Ihr Dokument fertig ist nur gut, folgen Sie der Lösung, die ich gebe und lassen Sie mich wissen –

+0

Ich habe meine Antwort mit Lösung –

0

$ (document) .ready (function() Änderung mit $ (document) .click (function()

+0

versucht hat –