. 02. 03. 04.

23.

<script type="text/javascript">// <![CDATA[ 24. 25. // Constantes du jeu 26. var NBR_LIGNES = 5; 27. var NBR_BRIQUES_PAR_LIGNE = 8; 28. var BRIQUE_WIDTH = 48; 29. var BRIQUE_HEIGHT = 15; 30. var ESPACE_BRIQUE = 2; 31. 32. // Variables 33. var tabBriques; // Tableau virtuel contenant les briques 34. var context; 35. 36. window.addEventListener('load', function () { 37. // On récupère l'objet canvas 38. var elem = document.getElementById('canvasElem'); 39. if (!elem || !elem.getContext) { 40. return; 41. } 42. 43. // On récupère le contexte 2D 44. context = elem.getContext('2d'); 45. if (!context) { 46. return; 47. } 48. 49. // Le navigateur est compatible, on peut continuer: On initialise le jeu. 50. creerBriques(context, NBR_LIGNES, NBR_BRIQUES_PAR_LIGNE, BRIQUE_WIDTH, BRIQUE_HEIGHT, ESPACE_BRIQUE); 51. 52. 53. 54. }, false); 55. 56. // Fonction permettant de créer les briques du jeu 57. function creerBriques(ctx, nbrLignes, nbrParLigne, largeur, hauteur, espace) { 58. 59. // Tableau virtuel: On initialise les lignes de briques 60. tabBriques = new Array(nbrLignes); 61. 62. for (var i=0; i < nbrLignes; i++) { 63. 64. // Tableau virtuel: On initialise les briques de la ligne 65. tabBriques[i] = new Array(nbrParLigne); 66. 67. // Affichage: On attribue une couleur aux briques de la ligne 68. ctx.fillStyle = "rgb("+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+")"; 69. 70. for (var j=0; j < nbrParLigne; j++) { 71. 72. // Affichage: On affiche une nouvelle brique 73. ctx.fillRect((j*(largeur+espace)),(i*(hauteur+espace)),largeur,hauteur); 74. 75. // Tableau virtuel: On attribue à la case actuelle la valeur 1 = Une brique existe encore 76. tabBriques[i][j] = 1; 77. 78. } 79. } 80. 81. // Nos briques sont initialisées. 82. return 1; 83. 84. } 85. 86. 87. // ]]></script>

88. 89. 90.

Casse brique Canvas

91.

96. 97.