Modification image casse-brique

**romneo** · 20/05/2015, 11h49

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 :

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
<!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>

**melka one** · 20/05/2015, 12h28

jour

avant tout il faut precharger l'image

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var images=newImage()
images.src=chemin_de_l_image

ensuite il suffit d'utiliser drawImage mais il faut faire un decalage de l'image en haut et a gauche afin de centrer l'image

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
function dessineBalle() {
	// dessine la balle
	var dx=x-(images.widht/2)
	var dy=y-(images.height/2)
	ctx.drawImage(images, dx, dy)
}

**NoSmoking** · 20/05/2015, 23h11

Bonjour,
une technique utilisée et qui a fait ses preuves

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
// création de l'élément
var oImage = new Image();
// définition fonction exécutée une fois l'image chargée
oImage.onload = function() {
  // tous ce que l'on veut maintenant que l'image est prête
  drawImage(this);  // par exemple
};
// affection de la source, pour exemple ici
oImage.src = 'http://www.developpez.net/template/images/logo.png';

Modification image casse-brique

JavaScript

Discussions similaires

Partager

Partager