Modification image casse-brique
Bonjour,
je suis entrain de faire un casse-brique en javascript.
j'aimerai pouvoir changer la "balle" par une image.
Comment procéder svp?
voici mon code:
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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
| <!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML5 Casse-Briques</title>
<script src="jquery-latest.js" ></script>
<script>
$(document).ready(function(){
/* Variables */
var x=75;
var y=75;
var rayon_balle=10;
var couleur_balle = "red";
var dx=2; // déplacement en x de la balle à chaque itération
var dy=4; // déplacement en y de la balle à chaque itération
var ctx;
var LARGEUR;
var HAUTEUR;
var palette_largeur;
var palette_hauteur;
var palette_couleur;
var palette_x;
var palette_y;
function init_palette() {
palette_x = LARGEUR/2;
palette_hauteur = 10;
palette_largeur = 100;
palette_couleur = "blue";
}
function init() {
/* rappel en Javascript
var c = document.getElementById("monCanvas");
var ctx = c.getContext("2d");
*/
ctx = $("#monCanvas")[0].getContext('2d');
LARGEUR = $("#monCanvas").width();
HAUTEUR = $("#monCanvas").height();
return setInterval(dessine,25); // dessine la balle à sa nouvelle position toutes les 100 millisecondes
}
function clear() {
// efface le canvas avant de dessiner à une nouvelle position
ctx.clearRect(0,0,LARGEUR,HAUTEUR);
}
function dessineRectangle(x,y,largeur,hauteur,couleur) {
ctx.beginPath();
ctx.fillStyle = couleur;
ctx.fillRect(x,y,largeur,hauteur);
ctx.closePath();
ctx.fill();
}
function dessineBalle() {
// dessine la balle
ctx.fillStyle = couleur_balle;
ctx.beginPath();
ctx.arc(x,y,rayon_balle,0,2*Math.PI,false);
ctx.closePath();
ctx.fill();
}
function dessinePalette() {
// coin supérieur gauche de notre palette se trouve
// en X : palette_x
// en Y : palette au raz du sol => sa valeur en y vaut HAUTEUR - palette_hauteur
// largeur du rectangle = palette_largeur
// hauteur du rectangle = palette_hauteur
// couleur du rectangle = palette_couleur
dessineRectangle(palette_x, HAUTEUR - palette_hauteur, palette_largeur, palette_hauteur, palette_couleur);
}
function dessine() {
clear();
dessineBalle();
dessinePalette();
// rebond sur le sol (on inverse le sens de déplacement en y si y est plus grand que la hauteur du canvas)
// ou
// rebond sur le mur du haut (on inverse le sens de déplacement en y si y est plus petit que 0)
if ((y+dy > HAUTEUR) || (y+dy < 0))
dy = -dy;
// rebond sur le mur droit (on inverse le sens de déplacement en x si x est plus grand que la largeur du canvas)
// ou
// rebond sur le mur gauche (on inverse le sens de déplacement en x si x est plus petit que 0)
if ((x+dx > LARGEUR) || (x+dx < 0))
dx = -dx;
// préparer la nouvelle position de la balle
x+=dx;
y+=dy;
}
function demarrage() {
init();
init_palette();
}
// Appel de la fonction d'initialisation init quand la page est prête
window.onload = demarrage;
});
</script>
</head>
<body>
<h1>HTML5 Casse-Briques</h1>
<canvas id="monCanvas" width="400" height="400" style="border: 1px solid black;">
Texte alternatif si le navigateur ne supporte pas le canvas HTML5
</canvas>
</body>
</html> |
