Bonjour!

Je m'amuse à faire un petit jeu à base de tiles. Je souhaite simuler les déplacements en effectuant des transitions CSS sur chacun des tiles. Par exemple si j'appuie sur la touche flèche du bas, je veux que tous mes tiles effectuent une transition du bas vers le haut.

J'ai essayé avec un petit exemple, aussi disponible sur http://jsfiddle.net/DM46s/9/.

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
$(document).keydown(function (e) {
    // press down arrow key
    if (e.keyCode == 40) {
        $('.example').css({'background-position':'-32px 0'});        
    }
});
Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
.example{
    width:32px;
    height:32px;
    background: url(http://oi41.tinypic.com/2vrzj0k.jpg) 0px 0px no-repeat;
    -webkit-transition:all 1s linear;
    -moz-transition:all 1s linear;
    -o-transition:all 1s linear;
    transition:all 1s linear;
}
Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
<div class="example"></div>
Le problème est que le sens de la transition dépend de la position, dans le tileset, du prochain tile par rapport au tile courant. Dans l'exemple, le prochain tile est placé à gauche du tile courant, la transition se fait donc de droite à gauche.

Je voulais savoir si il existait un moyen propre de faire ce que je veux, sans devoir rajouter des élements dans le fichier html?

Merci bien!