View difference between Paste ID: <a href="/M7Zjx4ff">M7Zjx4ff</a> and <a href="/xBdY570U">xBdY570U</a>

<!DOCTYPE html>
1		<!DOCTYPE html>
2		<html>
3		<head>
4		<meta charset="utf-8">
5		<title>jeu</title>
6		<style type="text/css">
7		#jeu{
8		width: 600px;
9		height: 400px;
10		border: 2px black solid;
11
12		}
13		#soucoupe{
14
15		width: 10px;
16		height: 80px;
17		background-color: black;
18		border: black 2px solid;
19		border-radius: 5px;
20		z-index: 200;
21		position: absolute;
22		top: 20px;
23		left: 15px;
24
25
26		}
27
28		#balle{
29
30		width: 20px;
31		height: 20px;
32		background-color: red;
33		border: black 2px solid;
34		border-radius: 20px;
35		z-index: 200;
36		position: absolute;
37		top: 20px;
38		left: 70px;
39		}
40
41		#soucoupe2{
42
43		width: 10px;
44		height: 80px;
45		background-color: black;
46		border: black 2px solid;
47		border-radius: 5px;
48		z-index: 200;
49		position: absolute;
50		top: 20px;
51		left: 590px;
52
53		}
54
55		.Start {
56
57		position: absolute;
58		bottom:50px;
59		left: 175px;
60
61		}
62
63		.Stop {
64
65		position: absolute;
66		bottom:50px;
67		left: 300px;
68
69		}
70
71
72		</style>
73		</head>
74
75		<body>
76		<div id="jeu">
77		<img id="soucoupe">
78		<img id="balle">
79		<img id="soucoupe2">
80
81		<button class= "Start" id="activer">Start the game</button>
82
83		<button class= "Stop" id="desactiver">Stop the game</button>
84
85		</div>
86
87
88		<script src="jquery.js"></script>
89		<script src="jquery-collision.js"></script>
90		<script>
91		$(function() {
92		var stopDetection = 0;
93		$(document).keydown(function(e){
94		if (e.which == 39) // Vers la droite
95		{
96		posX = parseInt($('#soucoupe').css('left'));
97		if (posX < 575)
98		$('#soucoupe').css('left', posX+30);
99		}
100		if (e.which == 37) // Vers la gauche
101		{
102		posX = parseInt($('#soucoupe').css('left'));
103		if (posX > 40)
104		$('#soucoupe').css('left', posX-30);
105		}
106		if (e.which == 40) // Vers le bas
107		{
108		posY = parseInt($('#soucoupe').css('top'));
109		if (posY < 300)
110		$('#soucoupe').css('top', posY+30);
111		}
112		if (e.which == 38) // Vers le haut
113		{
114		posY = parseInt($('#soucoupe').css('top'));
115		if (posY > 25)
116		$('#soucoupe').css('top', posY-30);
117		}
118		if (e.which == 36) // Vers le haut et la gauche
119		{
120		posX = parseInt($('#soucoupe').css('left'));
121		posY = parseInt($('#soucoupe').css('top'));
122		if ((posY > 20) && (posX > 20))
123		$('#soucoupe').css('left', posX-30).css('top', posY-30);
124		}
125		if (e.which == 33) // Vers le haut et la droite
126		{
127		posX = parseInt($('#soucoupe').css('left'));
128		posY = parseInt($('#soucoupe').css('top'));
129		if ((posY > 20) && (posX < 470))
130		$('#soucoupe').css('left', posX+30).css('top', posY-30);
131		}
132		if (e.which == 35) // Vers le bas et la gauche
133		{
134		posX = parseInt($('#soucoupe').css('left'));
135		posY = parseInt($('#soucoupe').css('top'));
136		if ((posX > 20) && (posY < 230))
137		$('#soucoupe').css('left', posX-30).css('top', posY+30);
138		}
139		if (e.which == 34) // Vers le bas et la droite
140		{
141		posX = parseInt($('#soucoupe').css('left'));
142		posY = parseInt($('#soucoupe').css('top'));
143		if ((posY < 230) && (posX < 470))
144		$('#soucoupe').css('left', posX+30).css('top', posY+30);
145		}
146		});
147
148
149		});
150
151		$('#activer').on('click', function bis() {
152
153		$('#soucoupe2').animate({top: '+=300'}, 'slow')
154		.animate({top: '-=300'}, 'slow');
155		bis();
156
157		});
158
159		$('#desactiver').on('click', function() {
160		$('#soucoupe2').stop(true, true);
161		$('#soucoupe2').css({'bottom': '20px'});
162		$('#soucoupe2').css({'left': '580px'});
163		});
164		/#############################################################################################################################################################/
165	-	/*if ($("#soucoupe").collision("#balle")) {
165	+	/*if ($("#soucoupe").collision("#balle")) { // GameQuery Extensions
166	-	alert('Yo');
166	+	alert('Game over');
167		}*/
168
169		/#############################################################################################################################################################/
170		/*var Hits = $("#balle").collision("#soucoupe", { mode: "collision", obstacleData: "topOData" });
171
172		if (Hits.data("topOData") == true)
173	-	alert('YO')
173	+
174		alert('Game over') // Jquery Collission Extension
175		}*/
176		/#############################################################################################################################################################/
177
178		/#############################################################################################################################################################/
179		function collides(a, b) {
180		return a.x < b.x + b.width &&
181	-	}
181	+
182		a.y < b.y + b.height &&
183		a.y + a.height > b.y;
184		} // Mon propre essaie tirer d'un code jquery d'un jeu preexistant (Space Freak
185
186		function handleCollision () {
187
188		if(collides(balle, soucoupe)) {
189		alert ("Game over");}
190
191
192		}
193
194		/#############################################################################################################################################################/
195		</script>
196		</body>
197		</html>