graphiques et JS

**KowoZ** · 25/05/2011, 15h20

Bonjour,

Voilà, je suis entrain de programmer un petit jeu un ChainRXN like
Le tout en objet mais là n'est pas le problème.
Le problème, c'est la trajectoire de mes "boules", je m'explique, j'aimerais qu'elles ne soient jamais horizontales ni verticales (et pas toutes à 45°)
Pour celà, je génère un nombre aléatoire qui correspond bien a ce que je veux :

Code :

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

1
2
3
var anglemax = 60;
var quartier = 90 * Math.floor(Math.random() * 4) + 1;
var deg_angle = (Math.random() * anglemax) + ((90 - anglemax) / 2);

Avec ce code là j'obtiens donc pour deg_angle, un nombre en 15 et 75, et dans quartier, un multiple de 90 que j'ajoute pour avoir un angle compris entre 15 et 75 ou 105 et 165 ou 195 et 255 ou enfin 295 et 345, l'angle est ensuite convertit en radian pour jouer sur les cosinus et sinus pour les rebonds. Cependant quand j'exécute le code, j'obtiens seulement des trajectoire verticales, horizontales ou à 45°.

Si quelqu'un a une idée d’où vient le problème.

Code ici

Le problème est dans l'objet "boule"

Merci d'avance

**Loceka** · 26/05/2011, 08h34

D'abord 2 remarques :

Poste ton code sur le forum plutôt que sur un site externe, c'est plus facile à lire pour nous (y'en a qui sont derrière des proxys) et c'est pérenne : le site externe ne va pas garder le code bien longtemps, contrairement au forum, et les gens qui tomberont sur ton post auront du mal à comprendre la solution. Les balises codes (bouton #) sont là pour ça, profites-en !
Ta variable quartier est mal parenthésée à mon sens, elle devrait plutôt s'écrire comme ça :var quartier = 90 * Math.floor(Math.random() * 4 + 1);.

Sinon ton problème vient, à mon avis, du fait que tu utilises Math.round() sur des sinus/cosinus, ce qui revient à avoir soit 0 soit 1 (vu que sinus et cosinus ont leurs valeurs entre 0 et 1).

**KowoZ** · 26/05/2011, 09h32

Merci c'était bien le round sur les sinus et cosinus. Je l'ai décalé d'un cran et ça marche impec'

Nouveau code pour ceux que ça interesseraient

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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
<html>
	<head>
		<script type="text/javascript" language="JavaScript">
			// Variables
			var 	ZONE_JEU_WIDTH = 400,
				ZONE_JEU_HEIGHT = 300,
				context,
				tabBoule = new Array(200),
				tabSphere = new Array(200),
				NbBoule = 0,
				NbSphere = 0,
				SphereEnvoyee = 0,
				NbBouleLancement = 200;
				NbPoint = 0;
 
			// Fonctions
			window.onload = init;
 
 
			function init() {
				// On récupère l'objet canvas
				var elem = document.getElementById('canvasElem');
				// On récupère le contexte 2D
				context = elem.getContext('2d');
				if (!context) return;
				// Initialisations des variables
				ZONE_JEU_WIDTH = elem.width;
				ZONE_JEU_HEIGHT = elem.height;
				// Gestion des évènements
				//window.document.onkeydown = checkDepla;
				elem.addEventListener('click',event_click,true);
				//window.document.mousedown = event_click;
				//On initialise les boules
				for (var i=0;i<NbBouleLancement;i++) {
					tabBoule[i] = new Boule(ZONE_JEU_HEIGHT,ZONE_JEU_WIDTH,context);
					NbBoule += 1;
				}
				// Boucle de rafraichissement du contexte 2D
				boucleJeu = setInterval(refreshGame,40);
			}
 
 
			//Boucle principale
			function refreshGame() {
				clearContexte(context,0,ZONE_JEU_WIDTH,0,ZONE_JEU_HEIGHT);
				for (var i=0;i<NbSphere;i++) {
					if (tabSphere[i] != null) {
						if (tabSphere[i].taille > 0 || tabSphere[i].time < tabSphere[i].timetotal) {
							tabSphere[i].Actualise();
							tabSphere[i].affiche();
						}
						else {
							tabSphere.splice(i,1);
							NbSphere += -1;
							i += -1;
						}
					}
				}
				for (var i=0;i<NbBoule;i++) {
					if (tabBoule[i] != null) {
						tabBoule[i].newPos();
						tabBoule[i].affiche();
						if (tabBoule[i].CheckSphere(tabSphere,NbSphere) == 1) {
							tabSphere[NbSphere] = new Sphere(tabBoule[i].posx,tabBoule[i].posy,tabBoule[i].color,tabBoule[i].NbPoint * 2,context);
							NbSphere += 1;
							//Ajout des points
							NbPoint += tabBoule[i].NbPoint;
							//On surpprime la boule
							//tabBoule[i] = null;
							tabBoule.splice(i,1);
							NbBoule += -1;
							i += -1;
						}
					}
				}
				if (SphereEnvoyee && NbSphere == 0) { //&& NbBoule != NbBouleLancement
					alert('You win Nb point :'+NbPoint);
					SphereEnvoyee = 0;
				}
				document.getElementById('debug').innerHTML = 'Boules restantes :'+NbBoule+' ; Nombre de points : '+NbPoint + ' ; Nb Sphere : '+NbSphere;
			}
			function RandomColor() {
				return '#'+Math.floor(Math.random()*16777215).toString(16);		
			}
				//function supprimer le context
			function clearContexte(ctx,startwidth,ctxwidth,startheight,ctxheight) {ctx.clearRect(startwidth, startheight, ctxwidth, ctxheight);}
			//Evenement click souris
			function event_click(e){
				if (!SphereEnvoyee) {
					// captures the mouse position
					posx = 0; posy = 0;
					if (!e){var e = window.event;}
					if (e.pageX || e.pageY){
					posx = e.pageX;
					posy = e.pageY;
					}
					else if (e.clientX || e.clientY){
						posx = e.clientX;
						posy = e.clientY;
					}
 
					tabSphere[0] = new Sphere(posx,posy,RandomColor(),5,context);
					NbSphere += 1;
					SphereEnvoyee = 1;
				}
				//alert('X mouse is: '+posx+' Y mouse is: '+posy);
			} 
 
			function toRad(angle) {
				return ((2 * Math.PI) / 360) * angle;
			}
 
			// Constructeur
			function Boule(Zone_H,Zone_W,ctx) {
				//calcul de l'angle
				var anglemax = 60;
				var quartier = 90 * Math.floor(Math.random() * 4 + 1);
				var deg_angle = (Math.random() * anglemax) + ((90 - anglemax) / 2);
 
				this.ang = toRad(deg_angle + quartier);
 
 
				//variables
				this.context = ctx;
				this.posx = Math.round(Math.random() * Zone_W);
				this.posy = Math.round(Math.random() * Zone_H);
				this.vitesse = Math.round(Math.random() * 4 + 3);
				this.taille = Math.round(Math.random() * 4 + 3);
				this.Zone_H = Zone_H;
				this.Zone_W = Zone_W;
				this.color = RandomColor();
				this.NbPoint = 0;
 
			}
 
			// Fonctions de la classe Boule
			Boule.prototype = {
				affiche :	function() {
									this.context.fillStyle = this.color;
									this.context.beginPath();
									this.context.arc(this.posx,this.posy,this.taille,0,Math.PI*2,true);
									this.context.fill();
							},
				newPos :	function() {
									var preposX = Math.round(this.posx + this.vitesse * Math.cos(this.ang));
									var preposY = Math.round(this.posy + this.vitesse * Math.sin(this.ang));
									if (preposX > this.Zone_W || preposX < 0) this.ang = -1 * (this.ang - Math.PI);
									if (preposY > this.Zone_H || preposY < 0) this.ang = -1 * this.ang;
									this.posx += Math.round(this.vitesse * Math.cos(this.ang));
									this.posy += Math.round(this.vitesse * Math.sin(this.ang));
 
 
							},
				CheckSphere : function(tabSphere,NbSphere) {
									var bool = 0;
									var posBx = this.posx;
									var posBy = this.posy;
									for (var i=0;i<NbSphere;i++) {
										if (tabSphere[i] != null) {
											var posSx = tabSphere[i].posx;
											var posSy = tabSphere[i].posy;
											var dist = Math.sqrt(Math.pow(posSx - posBx,2) + Math.pow(posSy - posBy,2));
											if (dist <= tabSphere[i].taille + this.taille) { 
												bool = 1;
												this.NbPoint += tabSphere[i].NbPoint;
											}
										}
									}
									return bool;
							}
			};
			//Objet sphere
			function Sphere(posX,posY,color,NbPoint,ctx) {
				this.context = ctx;
				this.posx = posX;
				this.posy = posY;
				this.taille = 1;
				this.time = 0;
				this.timetotal = 180;
				this.color = color;
				this.NbPoint = NbPoint;
				this.timeText = 90;
			}
			Sphere.prototype = {
				affiche :	function() {
									this.context.fillStyle = this.color;
									this.context.beginPath();
									this.context.arc(this.posx,this.posy,this.taille,0,Math.PI*2,true);
									this.context.fill();
									if (this.time < this.timeText && this.NbPoint > 5) {
										this.context.fillStyle = "#000000";
										this.context.font = 10 + "pt Arial"; 
										this.context.fillText('+ '+this.NbPoint / 2, this.posx, this.posy + Math.floor((this.timeText / 2) / this.time) ); 
 
									}
 
							},
				Actualise :	function() {
									if (this.time < 30) this.taille += 1; 
									else if (this.time > 150) this.taille += -1; 
									else if (this.timetotal > 180) this.taille = 0; 
									this.time += 1;
							}
			};
    </script>
	</head>
	<body>
		<canvas id="canvasElem" width="1000" height="800"></canvas>
		<br />
		<div id="debug"></div>
	</body>
</html>

**Loceka** · 26/05/2011, 09h46

T'en as oublié :

Envoyé par KowoZ

Code :

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

1
2
var preposX = this.posx + this.vitesse * Math.round(Math.cos(this.ang));
var preposY = this.posy + this.vitesse * Math.round(Math.sin(this.ang));

Merci pour le code.

**KowoZ** · 26/05/2011, 09h51

Bien vu, j'ai modifié. Merci beaucoup

graphiques et JS

JavaScript

Vue hybride

Discussions similaires

Partager

Partager