Jeu en jQuery

**Pythanos** · 01/01/2017, 11h26

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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");
}

Invité · 01/01/2017, 14h01

Bonjour,

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

**Pythanos** · 01/01/2017, 15h38

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 ^^

Invité · 01/01/2017, 18h12

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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)
});