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
| var canvas = document.getElementById("fenetreJeu");
var ctx = canvas.getContext("2d");
var mob = document.getElementById("mobile");
var fenetreDuJeuHauteur = canvas.height-5;
var fenetreDuJeuLargeur = canvas.width-5;
var largeurMobile = mob.offsetLeft;
var Vx = 2; // vitesse en pixel vers la droite
var xmin = 0; // limite gauche
var xmax = fenetreDuJeuLargeur;
var hauteurMobile = mob.offsetTop; //ordonnée du mobile
var Vy= 2;
var ymin = 0;
var ymax=fenetreDuJeuHauteur;
var timer1;
window.onload = function()
{
var debut = document.getElementById("start");
var arret = document.getElementById("stop");
var blocCentrale = document.getElementById("blocCentrale");
debut.addEventListener("click",debutPartie);
arret.addEventListener("click",pause);
quadrillage();
generationMob();
ensembleMob = document.getElementsByClassName("monstre");
ensembleMob[0].style.backgroundColor = "blue";
}
function generationMob()
{
for(i = 0; i < 10; i++){
creationPositionnement();
}
}
function creationPositionnement(){
var ensembleMob = [];
var mobCree = document.createElement("div");
mobCree.className = "monstre";
mobCree.style.width = "5px";
mobCree.style.height = "5px";
mobCree.style.backgroundColor = "red";
mobCree.style.position = "absolute";
ensembleMob = document.getElementsByClassName("monstre");
var mobCreeHauteur = mobCree.style.top = Math.floor(Math.random()*595)+"px";
var mobCreeLargeur = mobCree.style.left = Math.floor(Math.random()*595)+"px";
var aleatoirePosition = Math.floor((Math.random()*4)+1);
if (aleatoirePosition == 1){
if (mobCreeHauteur != 0){
mobCree.style.left = "0"+"px";
}
}
if (aleatoirePosition == 2){
if (mobCreeLargeur != 0){
mobCree.style.top = "0"+"px";
}
}
if (aleatoirePosition == 3){
if (mobCreeHauteur != 0){
mobCree.style.left = "595"+"px";
}
}
if (aleatoirePosition == 4){
if (mobCreeLargeur != 0){
mobCree.style.top = "595"+"px";
}
}
blocCentrale.appendChild(mobCree);
return ensembleMob;
}
function quadrillage (){
var larg = 50;
var haut = 50;
for (var i = 0; i < 40;i++){
ctx.beginPath();
ctx.moveTo(larg,0);
ctx.lineTo(larg,600);
ctx.stroke();
larg +=50;
}
for (var i = 0; i < 20;i++){
ctx.beginPath();
ctx.moveTo(0,haut);
ctx.lineTo(canvas.width,haut);
ctx.stroke();
haut +=50;
}
}
function debutPartie(){
// lance le changement de position tout les 0,01 secondes.
clearInterval(timer1); //arrête un éventuel timer déjà en place.
timer1 = setInterval(animation,10); // Lance le déplacement
}
function pause(){
clearInterval(timer1);
}
var animation = function() {
// déplace le mobile de Vx pixels vers la droite et change Vx si on arrive au bord.
largeurMobile = largeurMobile + Vx;
if ((largeurMobile<=xmin) || (largeurMobile>=xmax)) {
Vx=-Vx; // Si on est au bord, on change le sens de déplacement.
}
mobile.style.left=largeurMobile+"px"; // déplacement de l'objet à l'écran.
hauteurMobile = hauteurMobile + Vy;
if ((hauteurMobile<=ymin) || (hauteurMobile>=ymax)) {
Vy=-Vy; // Si on est au bord, on change le sens de déplacement.
}
mobile.style.top=hauteurMobile+"px"; // déplacement de l'objet à l'écran.
}
// calculer la position d'un element sur la page
/*calcul la position d'un élément sur la page
var item = document.getElementById(img);
var parent = item.offsetParent;
var posElmX = 0;
var posElmY = 0;
while(parent) {
posElmX += parent.offsetLeft;
posElmY += parent.offsetTop;
parent = parent.offsetParent;
}
var positionX = item.offsetLeft + posElmX;
var positionY = item.offsetTop + posElmY;
changer les dimension d'un élément
item.style.width = item.offsetWidth+10+'px';
item.style.height = item.offsetHeight+5+'px';
*/ |
Projet Tower Defense
Répondre avec citation
Pour moi, la seule ligne utile est :
Bonne journée 
tu peux déclarer tes variable où tu veux, et les utiliser ou non. quel rapport avec le canvas ?
Partager