Discussion :

[javatwister]

Objectif:
Faire évoluer les 4 images à la manière de balles de ping-pong (sans effet particulier), rebondissant sur chaque côté du cadre.

Contraintes :
pas de marquee, bien sûr;
compatibilité Mozilla / Firefox;
mouvement perpétuel sans intervention client;
chaque trajectoire de balle est indépendante des 3 autres;
les balles ne peuvent continuellement heurter les 4 mêmes points du cadre;
Le html / css doit rester en l'état;

Précision:
Soyez concis

http://javatwist.imingo.net/defi7.htm

[Calak]

"Le html / css doit rester en l'état;"

On peut rajouter des balises scripts dans le head qd même? ^_^;

[Calak]

Une autre question:

Est ce que les boules doivent dévier lorsqu'elles se touchent?

[javatwister]

non non, tu fais un truc tout basique hein! juste des boules qui suivent une trajectoire et qui rebondissent sur les côtés du cadre;

c'est vachement open comme défi, vu que j'ai mêmepas bossé le sujet (on verra ça à partir de dimanche soir)

[Taum]

http://asleep.free.fr/lab/js/dvp.com/defi7.html

j'ai bon ?

[javatwister]

salut Taum

euh... dans la mesure où ça marche, oui, on pourrait dire que t'as bon

après, je pense que tu as bien capté l'esprit du jeu

[jérôme]

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
<script type="text/javascript">
var limiteinf = 0 ;
var limitesup = 285 ;
var sens = new Array();
 
function positionner(iobj){
  var obj = document.getElementsByTagName('img')[iobj] ;
  obj.setAttribute('style', 'left: '+((sens[iobj][0] = (l = parseInt(obj.style.left)) >= limitesup || l < limiteinf ? -1 * sens[iobj][0] : sens[iobj][0]) + l)+'px; top: '+((sens[iobj][1] = (t = parseInt(obj.style.top)) >= limitesup || t < limiteinf ? -1 * sens[iobj][1] : sens[iobj][1]) + t)+'px;');
}
 
window.onload = function (){
  for (i=0; i<4; i++){
    sens[i] = [Math.ceil(Math.random()*5),Math.ceil(Math.random()*5)] ;
    setInterval(positionner, 10, i) ;
  }
}
</script>

Moi je ne fais pas dans le concis, je fais dans le burlesque

[javatwister]

salut

hum... passe pas au premier essai

[Calak]

http://asleep.free.fr/lab/js/dvp.com/defi7.html

j'ai bon ?

Vi, ca marche. Mais d'un point de vue logique et pédagogique on peut mieux faire

[Calak]

Voila un code assez brut pour commencer, rien d'optimisé dedans.
J'aimerais savoir un truc: jusqu'a quel point le script doit-il être flexible?
Et aussi, c'est comme le précédent défi? un smallest code?

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
<script type="text/javascript">
	var billes	= new Array();
	function iniBillard()
	{
 
		var c = document.getElementById('cadre');
		if (c)
		{
			var i = c.getElementsByTagName('img');
			var k = 0;
			c.style.height = '300px';
			c.style.width = '300px';
 
			while(i[k])	billes[k] = new Bille(i[k++],285,285,3);
		}
		else
		{
			setTimeout('iniBillard()',20);
		}
	}
	function Bille (img, width, height, prog)
	{
		var a		= Math.round(Math.random(0)*360)+1;
		this.img	= img;
		this.x		= parseInt(img.style.left);
		this.y		= parseInt(img.style.top);
		this.w		= width;
		this.h		= height;
		this.c		= Math.cos(a)*prog;
		this.s		= Math.sin(a)*prog;		
		setInterval('moveBilles()',50);
	}
	function moveBilles()
	{
		var k = 0;
		while(billes[k])
		{
			with(billes[k++])
			{
				if (c+x<0){c*=-1;x=0}
				else if (c+x>w){c*=-1;x= w}
				if (s+y<0){s*=-1;y=0}
				else if (s+y>h){s*=-1;y=h}
				x+=c;y+=s;
				img.style.left=x+'px';
				img.style.top=y+'px';
			}
		}
	}
	window.onload = iniBillard();
</script>

[jérôme]

2 autres soluces quasi identiques :

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
<script type="text/javascript">
function horsjeu(o,v){
  return v<o.m||v>=o.M ? -1 : 1 ;
}
function play(im){
		im.x += im.dx *= horsjeu(im,im.x) ; 
		im.y += im.dy *= horsjeu(im,im.y) ; 
		im.o.setAttribute('style', 'left:'+im.x+'px;top:'+im.y+'px;');
}
function Smiley(im,dx,dy){
	this.o = im;
	this.dx = dx;
	this.dy = dy ;
	this.x = parseInt(im.style.left) ;
	this.y = parseInt(im.style.top) ;
	this.m = 0;
	this.M = 285 ;
}
window.onload = function (){
  for (var c=0; c<4; c++){
  	smiley = new Smiley(document.getElementsByTagName('img')[c], Math.ceil(Math.random()*5), Math.ceil(Math.random()*5));
  	setInterval(play, 20, smiley);
  }
}
</script>

et

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
<script type="text/javascript">
function horsjeu(o,v){
  return v<o.m||v>=o.M ? -1 : 1 ;
}
function Play(){
		this.x += this.dx *= horsjeu(this,this.x) ; 
		this.y += this.dy *= horsjeu(this,this.y) ;
		this.o.setAttribute('style', 'left:'+this.x+'px;top:'+this.y+'px;');
}
function Smiley(im,dx,dy){
	this.o = im;
	this.dx = dx;
	this.dy = dy ;
	this.x = parseInt(im.style.left) ;
	this.y = parseInt(im.style.top) ;
	this.m = 0;
	this.M = 285 ;
	this.play = Play ;
}
var smiley = new Array ;
window.onload = function (){
  for (var c=0; c<4; c++){
  	smiley[c] = new Smiley(document.getElementsByTagName('img')[c], Math.ceil(Math.random()*5), Math.ceil(Math.random()*5));
  	setInterval('smiley['+c+'].play()', 20);
  }
}
</script>

salut

hum... passe pas au premier essai Rolling Eyes

Hein ? Bah si ça passe.

[Calak]

Ca passe p-e sur ton pc, mais sur le miens, sans tester, je peux te dire que ça n'ira pas.
Ca vient du fait que quand le "onload" est execute les balises images ne sont pas encore reconnues

Sinon, voila une "amélioration" de mon code. C'est assez compact ( je sais qu'en le rendant moins compact j'aurais pu gagner pas mal de caractère, mais bon, c'est déja mieux que mon premier code

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
	function Bille (img)
	{
		var a		= Math.round(Math.random(0)*360)+1
		this.img	= img
		this.x		= parseInt(img.style.left)
		this.y		= parseInt(img.style.top)
		this.c		= Math.cos(a)*5
		this.s		= Math.sin(a)*5
		this.b		= function (c,m){return c+m<0||c+m>285?-1:1}
	}
	function moveBilles(b){with(b){c*=b(x,c);s*=b(y,s);img.setAttribute('style', 'left:'+(x+=c)+'px;top:'+(y+=s)+'px;')}}
	function iniBillard(){
		try{i = document.getElementById('cadre').getElementsByTagName('img');for(k = 0;i[k];setInterval(moveBilles, 20,new Bille(i[k++])));}
		catch(e) {setTimeout('iniBillard()',20)}
	}
	window.onload = iniBillard()

[javatwister]

salut les aminches

je vois que le week-end a été prolifique!

bon, Calak, malgré la beauté de l'oeuvre, ton dernier script ne passe pas sous IE... tu vois pourquoi non?

[SpaceFrog]

là je suis à la rue pour ce genre de choses ... par contre ça m'a l'air tellement simple pour certains que ce serait sympa de rajouter la contrainte des boules qui s'entrechoquent ...

[jérôme]

Ca passe p-e sur ton pc, mais sur le miens, sans tester, je peux te dire que ça n'ira pas.
Ca vient du fait que quand le "onload" est execute les balises images ne sont pas encore reconnues

Et bien peut-être devrais-tu tester ? Non ?
L'événement onload est déclenché une fois que la page est finie d'être chargée, donc que tout le code HTML est déjà interprété.
Sympa ta soluce mais effectivement tu utilises des fonctionnalités de javascript 1.5, que ne connait pas IE. Mais en même temps :

compatibilité Mozilla / Firefox;

[Calak]

ca doit venir de SetInterval, et son 3eme paramètre.
Il semblerait que IE ,e ne comprenne pas >_<

[javatwister]

compatibilité Mozilla / Firefox;

ahlala, ça m'apprendra à donner des contraintes pas assez explicites

il s'entend que IE doit être capable d'interpréter le code

[javatwister]

bon je balance ma daube:

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
function o(i){
this.M=285
this.m=0
this.X=Math.random()*2+1
this.Y=Math.random()*2+1
this.i=i
this.l=parseInt(i.style.left)
this.t=parseInt(i.style.top)
this.q=this.Q=0
 
this.b=function(){
with(this){
if(l<M && q==0 || l<m){
q=0
l+=X
}
else{
q=1
l-=X
}
i.style.left=l+"px"
 
if(t<M && Q==0 || t<m){
Q=0
t+=Y
}
else{
Q=1
t-=Y
}
i.style.top=t+"px"
 
}
 
}
}
var t=new Array()
 
onload=function(){
i=4
while(i--){
t[i]=new o(document.images[i])
}
setInterval('for(i in t)t[i].b()',5)
}

[Celelibi]

Aujourd'hui j'ai pas trop le temps (premières épreuves du BAC demain), mais mercredi je vous en fait un en OO et qui détecte les colisions et qui renvoi les balles dans les bonnes directions.

Par contre pour faire changer les balles de vitesse lors d'une colision je ne connais pas du tout les formules.
Mais après ce ne sont plus que des règles de physique à implémenter.

[SpaceFrog]

le changement de vitesse n'aurait lieu que si les boules voyagent à des vitesse différentes ou ont un poids différent ...