Problema con le animazioni in jquery

**giannino1995** · 06-06-2015, 20:29

Provate a premere sui tasti freccia e potete giocare a un giochino molto divertente:

codice:

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      body {
        background-color:black;
      }
 
      h1 {
        color: yellow;
      }
 
      img#spaceShip {
        position: absolute;
        left:0;
        top:80%; 
        background-color:blue;
      }
 
      img#invader {
        position: absolute;
        left:25%;
        top:10%; 
      }
 
      div#laser {
        position: absolute;
        display: none; 
        left:0;
        top:0;
        width:10px;
        height:70px;
        background-color: red; 
      }
    </style>
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
      $(function(){
        $( document ).keydown( function( event ){
          var keyCode = event.keyCode || event.which;
          var keyMap = { left: 37, up: 38, right: 39, down: 40 };
 
          switch ( keyCode ) {
            case keyMap.left:
              $( "#spaceShip" ).animate({
                left: '-=50'
              }, 200 );
            break;
 
            case keyMap.up:
              var ufoLeft = $( "#spaceShip" ).offset().left;
              var ufoTop = $( "#spaceShip" ).offset().top;
              $( "#laser" ).offset( {left:ufoLeft+87, top:(ufoTop-30)} );
              $( "#laser" ).css( "display", "block" )
                         .animate( {top:10}, 200, function(){
                            var invaderLeft = $( "#invader" ).offset().left;
                            var laserLeft = $( "#laser" ).offset().left;
 
                            if( laserLeft >= invaderLeft && 
                                laserLeft <= invaderLeft + 288){ 
                              $( "#invader" ).hide();
                              $( "body" ).html( "<h1>Direct Hit!</h1>" );
                            } 
 
                            $( "#laser" ).offset( {left:0, top:0} );
                            $( "#laser" ).css( "display","none" );
                         });
            break;
 
            case keyMap.right:
              $( "#spaceShip" ).animate({
                left: '+=50'
              }, 200 );
            break;
          }
        });
      });
    </script>
  </head>
  <body>
    <img id="spaceShip" src="spaceShip.png">
    <img id="invader" src="invader.png"> 
    <div id="laser"></div>
  </body>
</html>

L'unica cosa che non capisco è questa riga di codice:

codice:

var keyCode = event.keyCode || event.which;

che l'autore non commenta minimamente. event.keyCode credo che serva per catturare il numero del tasto che sta scatenando l'evento ma event.which non ho la minima idea. Oltre più se scrivo:

codice:

var keyCode = event.keyCode;

lo snippet funziona ugualmente. In pratica keyCode e which forniscono lo stesso valore e non mi è chiaro perché l'autore li usa entrambi.

**badaze** · 06-06-2015, 21:58

Immagino che certi browser usano keyCode, altri which e forse altri tutti e due.
Per var keyCode =event.keyCode ||event.which;
Se keyCode torna null e which un valore non nullo allora il risultato è il valore non nullo. E vice versa.

**giannino1995** · 07-06-2015, 13:45

Originariamente inviata da badaze

Immagino che certi browser usano keyCode, altri which e forse altri tutti e due.
Per var keyCode =event.keyCode ||event.which;
Se keyCode torna null e which un valore non nullo allora il risultato è il valore non nullo. E vice versa.

thanks

Discussione: Problema con le animazioni in jquery

Strumenti discussione

Ricerca discussione

Visualizza

Problema con event.which

Permessi di invio