Bonjour, bonsoir,

je viens vous voir car dans le cadre de mes études, je dois développer un petit jeu en Jquery.
Le principe est simple, on tire des missiles aériens sur des gens... ;D

J'ai deux problèmes dans mon développement :

________________________________________________________________________
Là où je click, un missile se lance. Donc au click, une image apparaît pour une durée d'une seconde, et disparaît (image d'explosion). Cependant, si je réessaye d'appuyer une deuxième fois, bah elle apparaît plus car je l'ai faite disparaître avant avec un fadeOut()... Même en mettant un "background:none" après une seconde, l'image n'apparaît tout simplement pas...

Voilà mon code :
$("#weapon").click(tirer);

function tirer(evt){

console.log("Tirer !");
var x = event.clientX;
var y = event.clientY;
x = x-50;
y = y-70;

$("#impact").css('float', 'left');
$("#impact").css('top', + y +'px');
$("#impact").css('left', + x +'px');
$("#impact").css('visibility', 'visible');
$("#impact").css('width', '100px');
$("#impact").css('height', '100px');
$("#impact").css('background', 'url("img/explosiontest.png")');
$("#impact").css('background-size', '100% 100%');

console.log("Fin du tir");
$("#impact").delay(1000).css('background', 'none');

return;
/*alert('Vous avez cliqué au point de coordonnés: ' + x + ', ' + y );*/

}
console.log("Fin du tir");

____________________________________________________________________________
Deuxième soucis ... Au lieu de tirer au click, je souhaite le faire avec les touches A,Z,E,R,T (un peu comme LoL, avec 5 missiles différentes). Mais impossible de créer un évènement avec un keyDown ou autres... Je voie les même exemples sur internet qui marche parfaitement pour les autres mais pas pour moi... (testé avec Mozilla et Chrome)

$('#container').keydown(function(e){
if(e.which == 65) { // KeyCode de la touche entrée
console.log('A');
}

if(e.which == 90) { // KeyCode de la touche entrée
alert('Z');
}

if(e.which == 69) { // KeyCode de la touche entrée
alert('E');
}

if(e.which == 82) { // KeyCode de la touche entrée
alert('R');
}

if(e.which == 84) { // KeyCode de la touche entrée
alert('T');
}
});

______________________________________________________________________________

Merci d'avance =/

Si ça peut aider :
index.html : http://pastebin.com/Kp61F510
JS : http://pastebin.com/Vwcp84WD
CSS : http://pastebin.com/NL6tfhPJ

Pour le deuxième problème, ton target est une div et elle n'a jamais le focus donc ton callback de keydown n'est jamais appelé.

Pour que la target ait un focus, il faut que ce soit par exemple un input. Pour ton cas, c'est problématique. Tu devrais donc utiliser le document, qui est toujours focus. $(document);

Pour ton premier problème, j'ai pas vu de fadeOut() mais essaie avec fadeToggle().

Le 03 janvier 2017 à 03:38:07 Cuillerebleue a écrit :
Pour le deuxième problème, ton target est une div et elle n'a jamais le focus donc ton callback de keydown n'est jamais appelé.

Pour que la target ait un focus, il faut que ce soit par exemple un input. Pour ton cas, c'est problématique. Tu devrais donc utiliser le document, qui est toujours focus. $(document);

Pour ton premier problème, j'ai pas vu de fadeOut() mais essaie avec fadeToggle().

merci ! j’essaye ça dans la journée ! :D

Le 03 janvier 2017 à 03:38:07 Cuillerebleue a écrit :
Pour le deuxième problème, ton target est une div et elle n'a jamais le focus donc ton callback de keydown n'est jamais appelé.

Pour que la target ait un focus, il faut que ce soit par exemple un input. Pour ton cas, c'est problématique. Tu devrais donc utiliser le document, qui est toujours focus. $(document);

Pour ton premier problème, j'ai pas vu de fadeOut() mais essaie avec fadeToggle().

Je confirme... tes quelques lignes m'ont permis de régler mes deux problèmes... j'y ai passé plus de 5h sans trouver de solutions ... Comme quoi il faut juste quelques modif ! Merci encore <3