tondeurh

Canvas HTML et Jquery

Noter ce billet

par

, 26/05/2016 à 22h19 (1288 Affichages)

Un Bouncing Ball avec le Canvas HTML, et un pilotage via JQuery, rien que pour le fun !

Nom : 2016-05-26_22h09_56.png
Affichages : 1801
Taille : 95,4 Ko

Code HTML :

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
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
163
164
165
166
167
168
169
170
171
 
<!DOCTYPE html>
<html>
<head>
<title>Bouncing Ball dans un Canvas</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.11.4/themes/cupertino/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-2.2.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
 
<!--
black-tie
blitzer
cupertino
dark-hive
dot-luv
eggplant
excite-bike
flick
hot-sneaks
humanity
le-frog
mint-choc
overcast
pepper-grinder
redmond smoothness
south-street
start
sunny
swanky-purse
trontastic
ui-darkness
ui-lightness
vader
-->
 
<style>
body{
background-color: darkslategray;
}
h1{
color: white;
}
div{
color: white;
}
</style>
 
<script>
$(function() {
$("#btnGo").button({label:"Go!"});
$("#slider").slider({animate: true,min:10,max:50,value:30,step:5});
$("#sliderX").slider({animate: true,min:1,max:10,value:3,step:1});
$("#sliderY").slider({animate: true,min:1,max:10,value:2,step:1});
$("#slider").slider({change: function( event, ui ) {$("#tbval").text($
("#slider").slider("value"));}});
$("#sliderX").slider({change: function( event, ui ) {$("#vxval").text($
("#sliderX").slider("value"));}});
$("#sliderY").slider({change: function( event, ui ) {$("#vyval").text($
("#sliderY").slider("value"));}});
});
var running=false;
var myInterval;
function drawcanvas(){
if (running){
clearInterval(myInterval);
running=false;
$("#btnGo").val("Go!");
$("h1").html("BOUNCING BALL (Stop)");
return;
}
//recuperer le canvas
var canvas = document.getElementById("moncanvas");
//tester si le canvas est disponible
if(!canvas)
{
alert("Impossible de récupérer le canvas");
return;
}
//recuperer le contexte ecriture 2d du canvas
var context = canvas.getContext("2d");
if(!context)
{
alert("Impossible de récupérer le context");
return;
}
//ajuster les variables
var diametreBalle = 30;
var posX = 1+diametreBalle/2;
var posY = 1+diametreBalle/2;
var vitesseX = 3;
var vitesseY = 2;
var directionX=1;
var directionY=1;
//lancer l'animation appel de la procedure animate tous les 10ms
myInterval = setInterval(animate, 1000/100);
$("#btnGo").button("option","label","Stop!");
$("h1").html("BOUNCING BALL (Running)");
running=true;
 
/**********************
** Fonction animate
***********************/
function animate()
{
context.clearRect(0, 0, canvas.width, canvas.height);
//Tracé de la balle
//relire le diametre du jquery
diametreBalle = $("#slider").slider("value");
context.beginPath();
context.fillstyle="#ffaa44";
context.arc(posX, posY, diametreBalle/2, 0, Math.PI*2);
context.fill();
//On va vérifier si la balle à toucher l'un des bords du canvas.
if(posX+diametreBalle/2 >= canvas.width || posX <=
0+diametreBalle/2)//Si on touche le bord gauche ou droit
{
directionX *= -1;
//On inverse la vitesse de déplacement sur l'axe horizontal.
}
if(posY+diametreBalle/2 >= canvas.height || posY <=
0+diametreBalle/2)//Si on touche le bord du bas ou du haut
{
directionY *= -1;
//On inverse la vitesse de déplacement sur l'axe vertical.
}
vitesseX = $("#sliderX").slider("value") * directionX;
vitesseY = $("#sliderY").slider("value") * directionY;
//On additionne les vitesses de déplacement avec les positions
posX += vitesseX;
posY += vitesseY;
} //fin fonction animate
}
</script>
 
</head>
 
<body>
<div>
<center>
<h1 style="width: 500px;text-align: center;">BOUNCING BALL</h1>
<canvas id="moncanvas" width="500" height="300" style="background-color:
whitesmoke;border: solid black 1px;">
</canvas>
<br>
<div style="border: solid darkcyan 2px;width: 500px;" >
<input type="button" id="btnGo" value="GO!"
onclick="drawcanvas();"><br>
<div style="float:left;width: 200px;">Taille de la balle</div>
<div id="slider" style="width: 250px;float:left;margin-left:
10px;margin-right: 10px;"></div>
<div id="tbval" style="margin-left: 10px;">30</div>
<div style="clear:left;"></div>
<div style="float:left;width: 200px;">Vitesse horizontale de la
balle</div>
<div id="sliderX" style="width: 250px;margin-left: 10px;margin-right:
10px;float:left;"></div>
<div id="vxval" style="margin-left: 10px;">2</div>
<div style="clear:left;"></div>
<div style="float:left;width: 200px;">Vitesse verticale de la
balle</div>
<div id="sliderY" style="width: 250px;margin-left: 10px;margin-right:
10px;float:left;"></div>
<div id="vyval" style="margin-left: 10px;">3</div>
</div>
</center>
</div>
</body>
</html>