Come dare alla mia javascript ball un'animazione che si muove quando si muove?

Question

Ho il seguente codice HTML:

<img src="game_files/ball.png" id="ball" /> Si tratta di un div che contiene l'immagine di una palla (vista dall'alto di una palla)

Questa palla riesco a muovermi con le mie frecce e alcuni Javacript andare su, sinistra, destra, giù, ecc ecc ho farlo con questo codice:

var ball = function () { 
    var inited = false, 
     el, 
     xcheck = 50, 
     x = 50, 
     ycheck = 50, 
     y = 50, 
     xspeed = 0, 
     yspeed = 0, 
     power = 0.4, 
     friction = 0.99, 
     xwind = 0, 
     ywind = 0, 
     dead = true, 
     timer = function(keys) { 
      if (dead === true) { 
       return; 
      } 
      if (keys[38] === true) { 
       yspeed += power; 
      } 
      if (keys[40] === true) { 
       yspeed -= power; 
      } 
      if (keys[37] === true) { 
       xspeed += power; 
      } 
      if (keys[39] === true) { 
       xspeed -= power; 
      } 
      xspeed = xspeed * friction - xwind; 
      yspeed = yspeed * friction - ywind; 
      if (Math.abs(xspeed) < 0.004) { 
       xspeed = 0; 
      } 
      if (Math.abs(xspeed) < 0.004) { 
       xspeed = 0; 
      } 
      x -= xspeed; 
      y -= yspeed; 
      plane.move(x,y); 
     }; 
    return { 
     init: function() { 
      if (inited != true) { 
       inited = true; 
       el = document.getElementById('ball'); 
       roller.register(timer, 'time'); 
      } 
     } 
    }; 
}(); 

questa tutte le opere, ma la palla non ha l'animazione di rotolamento! L'immagine scorre semplicemente a sinistra oa destra. Come posso aggiungerla? Ho trovato questo tutorial: http://www.emanueleferonato.com/2007/06/10/creation-of-realistic-spheres-in-flash-with-textures-and-masking/ che pensavo potesse aiutarmi.

Sfortunatamente, questo è per una sfera flash (speravo che questo si applicasse in qualche modo anche a JS). Questo tutorial mostra esattamente quello che voglio: una palla con animazione a rotazione (vedi la pagina del tutorial vicino alla fine del tutorial la palla con la pelle di leopardo, appena sotto: Righe 26-37: Se la posizione della trama relativamente alla palla. ..).

Come posso applicare questo al mio pallone JS? qualche idea?

Cordiali saluti e un felice anno nuovo

ps io uso/jquery carico così

--edit --------

Creato un violino: http://jsfiddle.net/mauricederegt/dhUw5/

1- aprire il violino

2- fare clic sul 1

0.123.516,410617 millions

3- utilizzare i tasti freccia per muovere la palla, rimanere sul campo verde!

4- Sede, nessun effetto di rotolamento

Answer 1

Per avere lo stesso effetto dell'esempio Flash collegato, è sufficiente aggiungere uno sfondo all'elemento e spostarlo di conseguenza.

Ho sostituito il tuo elemento img con uno span e gli ho dato l'immagine di sfondo tramite CSS e un raggio di bordo per arrotondarlo. Nella funzione plane.move ho aggiunto la seguente riga:

document.getElementById('ball').style.backgroundPosition = x + 'px ' + y +'px'; 

voilà, lo stesso effetto come nell'esempio Flash: http://jsfiddle.net/dhUw5/1/

Answer 2

Si sarebbe probabilmente utilizzare HTML5 canvas. Dovresti ritagliare parte dell'immagine usata come superficie della palla usando drawImage e poi mask it to get a circle shape. Quindi puoi animarlo ridisegnando la tela, con la posizione di ritaglio (sx, sy) modificata in modo simile all'esempio flash a cui ti sei collegato. (In seguito non è testato, fare una jsfiddle con il codice originale, se si desidera provare.)

// ... when the user moves 
this.sy += yspeed; 
this.sx += xspeed; 
if (this.sx > textureSize) { 
    this.sx -= textureSize; 
} 
else if (this.sx < 0) { 
    this.sx += textureSize; 
} 
if (this.sy > textureSize) { 
    this.sy -= textureSize; 
} 
else if (this.sy < 0) { 
    this.sy += textureSize; 
} 

// ... redraw the ball once every frame 
context.clearRect(0, 0, canvasWidth, canvasHeight); // clear the canvas 
context.save(); 
context.beginPath(); 
context.arc(this.x, this.y, ballRadius, Math.PI * 2, false); 
context.clip();  
context.drawImage(ballImage, this.sx, this.sy, 
        ballDiameter, ballDiameter, 
        this.x, this.y, 
        ballDiameter, ballDiameter);  // redraw the ball  
context.restore(); 

In alternativa è possibile utilizzare un div con la texture come immagine di sfondo, e maschera per fare un cerchio utilizzando CSS3 o sovrapponendo un'altra immagine (vedere Best way to mask an image in HTML5). Poi si sarebbe cambiare le coordinate del l'immagine di sfondo (texture) utilizzando

ballElement.style.backgroundPosition = this.sx + 'px ' + this.sy + 'px';

Answer 3

Questo è abbastanza facile se si utilizzano i CSS trasforma. In questo esempio la velocità di rotazione è determinata in base al valore scalare della velocità della palla è attualmente viaggiando a:

var increment = Math.round(Math.sqrt(Math.pow(xspeed, 2) + Math.pow(yspeed, 2))); 
    if (!isNaN(increment)) { 
     currangle = currangle + ((xspeed < 0 ? 1 : -1) * increment); 
    } 

    $('#ball').css({ 
     '-webkit-transform': 'rotate(' + currangle + 'deg)' 
    }); 

    $('#ball').css({ 
     '-moz-transform': 'rotate(' + currangle + 'deg)' 
    }); 

Questo codice va nel metodo move in plane.Ecco una dimostrazione: http://jsfiddle.net/BahnU/show/