Jeu en jQuery

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 :

Premier soucis :
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...

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)

Merci d'avance =/

index.html :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <title>Protect Wall </title>
 
	<link href="css/style.css" rel="stylesheet">
 
	<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
	<script type="text/javascript" src="js/script.js"></script>
</head>
<body id="body">
 
	<div id="container">
		<div id="weapon" /></div>
		<div id="impact"></div>
		<div id="mexican"></div>
		<div id="skills">
			<div class="ba"></div>
			<div class="bz"></div>
			<div class="be"></div>
			<div class="br"></div>
			<div class="bt"></div>
		</div>
	</div>
<div id="test"></div>
</body>
</html>

script.js :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
$(document).ready(initialiser); 
var OffsetCont;
 
 
function initialiser(evt) {
	OffsetCont = $("#container").offset();
	console.log("Ready !");
 
 
	$(document).mousemove(function(e) {
		if( (e.pageX > OffsetCont.left) && (e.pageY > OffsetCont.top) && (e.pageX < OffsetCont.left +1000) && (e.pageY < OffsetCont.top +600)  ) {
		$("#weapon").offset({
			left: e.pageX -25,
			top: e.pageY -25
		});
		}
	});
 
 
 
$('#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'); 
	}
});
 
 
	$("#container").mouseenter(ingame);	
	$("#container").mouseleave(deletecursor);
 
 
 
}
 
 
function ingame() {
	console.log("Crosshair !");
	$("#container").css('cursor','none');
 
	$("#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");
 
 
}
 
function deletecursor() {
	console.log("Delete Cursor !");
	$("html").css('cursor','default');
	$("img").remove();
}

style.css :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
html {
 
}
 
body {
	background-color:white;
}
 
#container {
	background-image:url("../img/background.png");
	border:2px solid black;
	width:1000px;
	height:600px;
}
 
#weapon {
	background-image:url("../img/crosshair.png");
	background-size:100% 100%;
	width:50px;
	height:50px;
	position:absolute;
	z-index:10;
}
 
#test{
	width:50px;
}
 
#impact{
	float:left;
	width:100px;
	height:100px;
	position:relative;
	top:0px;
	left:0px;
	visibility:hidden;
 
}
 
#mexican {
	width:50px;
	height:50px;
	position:relative;
	background-image:url("../img/playera.png");
}
 
.tir {
	foat:left;
	visibility:visible;		
	width:100px;
	height:100px;
	background: url("../img/explosiontest.png");
	background-size:100% 100%;
}
 
#skills {
	float:right;
	margin-right:10px;
	margin-top:150px;
 
}
 
.ba, .bz, .be, .br, .bt {
	width:150px;
	height:72px;
	margin:5px;
}
 
.ba {
	background-image:url("../img/ba.png");
}
.bz {
	background-image:url("../img/bz.png");
}
.be {
	background-image:url("../img/be.png");
}
.br {
	background-image:url("../img/br.png");
}
.bt {
	background-image:url("../img/bt.png");
}

Bonjour,

avec le code HTML/CSS associé, on pourrait au moins TESTER...

Je pensais surtout à une erreur de synthaxe ^^'.

J'envoie tout :

index.html : http://pastebin.com/Kp61F510
JS : http://pastebin.com/Vwcp84WD
CSS : http://pastebin.com/NL6tfhPJ

Merci d'avance ^^

Merci de :

copier-coller les scripts directement dans le contenu du message.
puis utiliser l'icone "#" du mini-menu pour ajouter les balises [CODE]

N.B. Il y a en effet plusieurs fautes de syntaxes.

1/ evt ou event ?
Code:

1 2 3 4 5 function tirer(evt){ ... var x = event.clientX; var y = event.clientY; ...
2/ .css() en jQuery
on peut indiquer plusieurs propriétés en même temps :
Code:

1 2 3 4 5 6 7 8 $("#impact").css({ 'float' : 'left', 'top' : y +'px', 'left' : x +'px', 'visibility' : 'visible', ....... 'background-size' : '100% 100%' // (pas de , pour le dernier) });
3/ autre ?....

Je te remercie, j'avais peur de prendre trop de place sur le premier poste... mais pas du tout, j'ai changé ! ;)

Merci pour ces petites erreurs de syntaxes, je change ça. Mais les soucis ne viennent pas de cette partie du code malheureusement =/