-
Notifications
You must be signed in to change notification settings - Fork 0
/
palet.js
125 lines (108 loc) · 3.96 KB
/
palet.js
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
var palet = {
/*-------------------------- Liste des propriétés ----------------------------
vie
x
vitessePalet
deplacementGauche
deplacementDroite
----------------------------- Liste des methodes -----------------------------
setup
changementVie
versLaGauche
versLaDroite
******************************************************************************
************************** Définition des propriétés *************************
*****************************************************************************/
boitePalet: window.document.querySelector("#boitePalet"),
imgPalet: window.document.querySelector("#imgPalet"),
imgVie: window.document.querySelector("#imgVie"),
vie: 100, // On commence avec une barre de vie complète.
x: 346, // par rapport à la gauche.
vitessePalet: 5, // en px déplacé à chaque interval.
deplacementGauche: "bloque",
deplacementDroite: "bloque",
animation: false,
/*****************************************************************************
*************************** Définition des méthodes **************************
******************************************************************************
----------------------------- Animation du Palet -----------------------------
Placer le palet et lancer une animation (Interval à 40ms) tous les 2 secondes (Interval à 2s).*/
setup: function(){
this.changementVie(100);
this.x = 346;
this.boitePalet.style.left = this.x + "px";
this.deplacementGauche = false;
this.deplacementDroite = false;
if (this.animation == false) {
this.animation = true;
window.setInterval(function(){
this.imgPalet.style.top = "0px";
var animationPalet = window.setInterval(function(){
if (parseFloat(this.imgPalet.style.top) > -495) {
this.imgPalet.style.top = (parseFloat(this.imgPalet.style.top) - 45)+"px";
} else {
clearInterval(animationPalet);
this.imgPalet.style.top = "0px";
}
},40);
},2000);
}
},
/*--------------------------- Changement de vie ------------------------------
Cette fonction sera appelée en cas de changement de vie.
L'interval sert à effectuer le changement progressivement et créer une animation.*/
changementVie: function(quantite){
var valeurFinale = parseFloat(this.vie) + quantite;
if (valeurFinale > 100){
valeurFinale = 100;
}
if (valeurFinale < 0){
valeurFinale = 0;
}
var intervalPalet = window.setInterval(function(){
if (this.vie > valeurFinale) {
this.vie = this.vie - 1;
}
if (this.vie < valeurFinale) {
this.vie = this.vie + 1;
}
if (this.vie == valeurFinale){
clearInterval(intervalPalet);
if (this.vie == 0) {
defaite();
}
}
this.imgVie.style.width = this.vie + "%";
this.imgVie.style.backgroundColor = "rgb(" + (200 - (this.vie * 1.5)) + "," + ((this.vie * 1.5) + 50) + ",200)";
}.bind(this),20);
},
/*------------------------- Déplacement du Palet ---------------------------*/
versLaGauche: function(){
if(this.deplacementGauche == false) {
this.deplacementGauche = window.setInterval(
function(){
if(this.x > 26){
this.x = this.x-this.vitessePalet;
this.boitePalet.style.left = this.x + "px";
}
}.bind(this),10);
}
},
versLaDroite: function(){
if(this.deplacementDroite == false) {
this.deplacementDroite = window.setInterval(
function(){
if(this.x < 670){
this.x = this.x+this.vitessePalet;
this.boitePalet.style.left = this.x + "px";
}
}.bind(this),10);
}
},
stop: function(){
window.clearInterval(palet.deplacementDroite);
window.clearInterval(palet.deplacementGauche);
palet.deplacementGauche = "bloque";
palet.deplacementDroite = "bloque";
}
}