Création objet qui hérite de HTMLDivElement
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:
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:
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 ? ; |
