-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathdessin_index.html
158 lines (145 loc) · 5.05 KB
/
dessin_index.html
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
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Dessin</title>
</head>
<body>
<canvas width ="500" height="400" id="canvas_1" tabindex="0" style="border-style: solid; border-width: 2px; width: 500px;"></canvas>
</body>
<script>
window.onload = function(){
var canvas = document.getElementById("canvas_1");
if(!canvas){
alert("Impossible de récupérer le canvas");
return;
}
var ctx = canvas.getContext('2d');
if(!ctx){
alert("Impossible de récupérer le context du canvas");
return;
}
var myInterval = setInterval(animate, 1000/30);
//alert("myInt");
//Variables pour le personnage :
var perso = new Image();
perso.src = "c.png";
//alert("Perso crée");
var xPos = 0;
var yPos = 0;
var vitesse = 1;
var tailleMini = 50;
var tailleMax = canvas.width/4;
var tailleActuelle = tailleMini;
function animate(){
//Travaille sur le personnage :
ctx.clearRect(0,0,canvas.width,canvas.heigth); //réinitialisation du canvas
xPos = (canvas.width/2)-(tailleActuelle/2);//Calcul de la position actuelle
yPos = (canvas.height/2)-(tailleActuelle/2); //On ce place au milieu du canvas
ctx.drawImage(perso,0,0,128,128,xPos,yPos,tailleActuelle,tailleActuelle);
//on récupère la portion : 128x128px de coordonnées [0,0]. On la place sur les coordonnées [xPos,yPos] du canvas et on l'agrandit de tailleActuelle*tailleActuelle px.
//alert("Perso au centre");
//Gestion de la vitesse du personnage :
var i;
for(i=0;i<80;i++){
if((xPos = canvas.width/2 + i) && (yPos = canvas.height/2 + i)){//le perso se trouve vers le centre
vitesse = 1;
}
else {
if((xPos = canvas.width/4 + i) && (yPos = canvas.height/4 + i)){//le perso se trouve entre les extrémités et le centre
vitesse = 2;
}
else{//le personnage est aux extrémités
vitesse = 3;
}
}
}
//déplacement du perso :
canvas.addEventListener("keydown", function (event) {
if (event.defaultPrevented) {
return; // Should do nothing if the key event was already consumed.
}
switch (event.key) {
case 40 : //bas
if(yPos != canvas.height-1){//le personnage est dans le canvas
var j;
for(j=0;j<4;j++){
yPos = yPos - j*vitesse;//le personnage fait 4 pas vers le bas
xPos = xPos;
ctx.drawImage(perso,j*128,256,128,128,xPos,yPos,tailleActuelle,tailleActuelle);//on change à chaque pas le context de l'image
}
}
else{//on ne peut pas placer le personnage hors du canvas
ctx.font = "18px Helvetica"; //font est une char de taille 18px et de police Helvetica
ctx.fillText("Vous etes en bas du canvas",canvas.width,canvas.height);
}
break;
case 38 : //haut
if(yPos != 1){
var j;
for(j=0;j<4;j++){
yPos = yPos + j*vitesse;
xPos = xPos;
ctx.drawImage(perso,j*128,384,128,128,xPos,yPos,tailleActuelle,tailleActuelle);
}
}
else{//on ne peut pas placer le personnage hors du canvas
ctx.font = "18px Helvetica"; //font est une char de taille 18px et de police Helvetica
ctx.fillText("Vous etes en haut du canvas",canvas.width,canvas.height);
}
break;
case 37 : //gauche
if(xPos != 1){
var j;
for(j=0;j<4;j++){
yPos = yPos;
xPos = xPos - 2*vitesse;
ctx.drawImage(perso,j*128,0,128,128,xPos,yPos,tailleActuelle,tailleActuelle);
}
}
else{//on ne peut pas placer le personnage hors du canvas
ctx.font = "18px Helvetica"; //font est une char de taille 18px et de police Helvetica
ctx.fillText("Vous etes à gauche du canvas",canvas.width,canvas.height);
}
break;
case 39 : //droite
if(xPos != canvas.width){
var j;
for(j=0;j<4;j++){
yPos = yPos;
xPos = xPos + j*vitesse;
ctx.drawImage(perso,j*128,128,128,128,xPos,yPos,tailleActuelle,tailleActuelle);
}
}
else{//on ne peut pas placer le personnage hors du canvas
ctx.font = "18px Helvetica"; //font est une char de taille 18px et de police Helvetica
ctx.fillText("Vous etes à droite du canvas",canvas.width,canvas.height);
}
break;
default :
return;//on ne bloque pas l'accés aux autres touches.
}
event.preventDefault();
},true);
//Agrandissement du personnage :
canvas.addEventListener("click", function (event) {
//variable position de la souris
var xSouris = event.clientX;
var ySouris = event.clientY;
if (event.defaultPrevented) {
return; // Should do nothing if the key event was already consumed.
}
if((xSouris == xPos) && (YSouris == yPos)){//on effectue l'action si la souris se trouve sur le personnage.
if (event.rightClick) {//click droit
tailleActuelle = tailleActuelle + 1; //le peronnage grandi
}
else{
tailleActuelle = tailleActuelle - 1; //le personnage rétréci
}
}
event.preventDefault();
}, true);
}
}
</script>
</html>