Bonsoir,

je souhaiterais créer un objet 'Cube' qui hérite de l'objet HTMLDivElement et qui contient ses propres propriétés et méthodes en plus de celle de div .

dans les cours ils expliquent comment faire à partir d'objet simple définis soit même , mais je n'ai pas trouvé comment en créer un qui hérite de div .

j'explique pourquoi j'essaie cette manière . Jusqu'à maintenant j'avais crée un objet Cube qui contenait un objet div . Sauf que quand je crée dans une méthode un addEvenListener sur ce div je ne peux pas passer de paramètres
concernant les propriétés de l'objet Cube .

C'est possible avec Un setInterval mais pas avec un addEventListener . D'où l'idée si je crée un objet qui hérite de l'objet div , après il sera simple d'accèder aux autre propriétés , il suffira en effet d'utiliser une e.target.propritéduCube.

voici l'ancien code qui pose problème pour la partie addEventlistener

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
 
     function   Cube(){
   this.etat=0;
   this.xDepart=600;
   this.yDepart=300;
   this.xArrive=600;
   this.yArrive=300;
   this.objx=0;
   this.objy=0;
   this.angle=0;
   this.compteur=0;
   this.compteurBord=0;
   this.rayon=100;
   this.timer=null;
   this.mydiv=document.createElement('div');
   this.init=function(){  
                          this.mydiv.setAttribute('class','draggableBox');
                          article.appendChild(this.mydiv); 
 
 
 
                          var x_affiche=this.xDepart;
                          var y_affiche=600-this.yDepart;     
 
                          this.mydiv.style.left=x_affiche+'px';
                          this.mydiv.style.top=y_affiche+'px';
                          this.etat=1;
 
                        //   var myfonction=function(){ this.etat=2;this.demarre();  };
                         //  this.mydiv.addEventListener('click',myfonction,false);          
                          this.etat=2;
                         this.demarre();
 
                         };
   this.demarre=function(){   	
                             var cube=this;
   	                       this.timer=setInterval(function(){
   	                       	                                 var etat=cube.donneEtat(); 
 
                                                             switch(etat) {
 
         	                                                                    case 2: cube.nouveauDepart();
         	                                                                           cube.avance();
         	                                                                           break;
         	                                                                    case 3 : cube.avance();
         	                                                                            break; 
         	                                                                    }           
 
 
                                                                },50,cube); 
 
 
 
                          };
   this.arret=function(){ if(this.etat!=0){clearInterval(this.timer)};this.etat=1; };
 
 
   this.nouveauDepart=function(){
   	     this.angle=getRandomInt(this.angle-10,this.angle+10);
     	     this.objx=Math.floor(Math.cos(this.angle*Math.PI/180)*this.rayon);
           this.objy=Math.floor(Math.sin(this.angle*Math.PI/180)*this.rayon);  
           this.xDepart=this.xArrive;
           this.yDepart=this.yArrive;   
           this.xArrive=this.xDepart+this.objx;
           this.yArrive=this.yDepart+this.objy;
           this.etat=3;
           this.compteur=0;           
        };
   this.avance=function(){ 
                          this.compteur=this.compteur+1;
                          var x_temp=this.xDepart+Math.floor(this.objx*this.compteur/10);
                          var y_temp=this.yDepart+Math.floor(this.objy*this.compteur/10);
                          var x_affiche=x_temp;
                          var y_affiche=600-y_temp;
 
                         if(x_affiche<=limitx_inf){ x_affiche=limitx_inf;this.etat=2;this.angle=0;this.xArrive=x_temp;this.yArrive=y_temp;}
                         if(x_affiche>=limitx_sup){ x_affiche=limitx_sup;this.etat=2;this.angle=180;this.xArrive=x_temp;this.yArrive=y_temp;}
                         if(y_affiche<=limity_inf){ y_affiche=limity_inf;this.etat=2;this.angle=270;this.xArrive=x_temp;this.yArrive=y_temp;}
                         if(y_affiche>=limity_sup){ y_affiche=limity_sup;this.etat=2;this.angle=90;this.xArrive=x_temp;this.yArrive=y_temp;}
 
                         this.mydiv.style.left=x_affiche+'px';
                         this.mydiv.style.top=y_affiche+'px';  
 
 
                          if (this.compteur==10) { this.etat=2; } 
   };     
   this.donneEtat=function(){return this.etat;};
 
 
 
 
}

et maintenant il faudrait que Cube hérite de HTMLDivElement comment faire ?

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
   function Cube(){
   
   this.etat=0;
   this.xDepart=600;
   this.yDepart=300;
   this.xArrive=600;
   this.yArrive=300;
   this.objx=0;
   this.objy=0;
   this.angle=0;
   this.compteur=0;
   this.compteurBord=0;
   this.rayon=100;
   this.timer=null;
   this.init=function(){  
                          this.setAttribute('class','draggableBox');
                          article.appendChild(this); 
                          
                          
                         
                          var x_affiche=this.xDepart;
                          var y_affiche=600-this.yDepart;     
                          
                          this.style.left=x_affiche+'px';
                          this.style.top=y_affiche+'px';
                          this.etat=1;
                          
                        
                         this.addEventListener('click',function(e){ 
                               e.target.etat=1;
                               e.target.demarre();
                                                        
                         
                          },false);          
                         
                        
                         }; 



}
Cube.prototype=new   ?   ;