<html>
<head>
<title>Casse brique Canvas by La Ferme du Web</title>
<style type='text/css'>
body {
background: #000;
}
#conteneur {
width: 400px;
height: 300px;
border: 1px solid #333;
margin: 0 auto;
background: #FFF;
text-align: center;
}
h1 {
text-align: center;
font-variant: small-caps;
color: #FFF;
}
</style>
<script type="text/javascript">
// Constantes du jeu
var NBR_LIGNES = 5;
var NBR_BRIQUES_PAR_LIGNE = 8;
var BRIQUE_WIDTH = 48;
var BRIQUE_HEIGHT = 15;
var ESPACE_BRIQUE = 2;
var BARRE_JEU_WIDTH = 80;
var BARRE_JEU_HEIGHT = 10;
var PXL_DEPLA = 8;
var ZONE_JEU_WIDTH = 400;
var ZONE_JEU_HEIGHT = 300;
var COULEURS_BRIQUES = ["#503A22", "#88502F", "#A17048", "#D9C38A", "#F7DDAC"];
var COULEUR_BALLE = "#16A6DB";
var DIMENSION_BALLE = 8;
var VITESSE_BALLE = 2;
// Variables
var tabBriques; // Tableau virtuel contenant les briques
var barreX; // Position en X de la barre: Changement dynamique avec clavier / souris
var barreY; // Position en Y de la barre: Ne bougera pas.
var context;
var balleX = 100;
var balleY = 250;
var dirBalleX = 1;
var dirBalleY = -1;
var boucleJeu;
var limiteBriques = (ESPACE_BRIQUE+BRIQUE_HEIGHT)*NBR_LIGNES;
var aGagne = 0;
window.addEventListener('load', function () {
// On récupère l'objet canvas
var elem = document.getElementById('canvasElem');
if (!elem || !elem.getContext) {
return;
}
// On récupère le contexte 2D
context = elem.getContext('2d');
if (!context) {
return;
}
// Initialisations des variables
ZONE_JEU_WIDTH = elem.width;
ZONE_JEU_HEIGHT = elem.height;
barreX = (ZONE_JEU_WIDTH/2)-(BARRE_JEU_WIDTH/2);
barreY = (ZONE_JEU_HEIGHT-BARRE_JEU_HEIGHT);
// Le navigateur est compatible, on peut continuer: On initialise le jeu.
creerBriques(context, NBR_LIGNES, NBR_BRIQUES_PAR_LIGNE, BRIQUE_WIDTH, BRIQUE_HEIGHT, ESPACE_BRIQUE);
// Boucle de rafraichissement du contexte 2D
boucleJeu = setInterval(refreshGame, 10);
// Gestion des évènements
window.document.onkeydown = checkDepla;
}, false);
function refreshGame() {
// On efface la zone
clearContexte(context, 0, ZONE_JEU_WIDTH, 0, ZONE_JEU_HEIGHT);
// On réaffiche le nécessaire
aGagne = 1;
// Réaffichage des briques
for (var i=0; i < tabBriques.length; i++) {
context.fillStyle = COULEURS_BRIQUES[i];
for (var j=0; j < tabBriques[i].length; j++) {
if (tabBriques[i][j] == 1) {
context.fillRect((j*(BRIQUE_WIDTH+ESPACE_BRIQUE)),(i*(BRIQUE_HEIGHT+ESPACE_BRIQUE)),BRIQUE_WIDTH,BRIQUE_HEIGHT);
aGagne = 0; // Le joueur n'a pas gagné, il reste toujours au moins une brique
}
}
}
// On vérifie si le joueur à gagné
if ( aGagne ) gagne();
// Réaffichage de la barre
context.fillStyle = "#333333";
context.fillRect(barreX,barreY,BARRE_JEU_WIDTH,BARRE_JEU_HEIGHT);
// Calcul de la nouvelle position de la balle
if ( (balleX + dirBalleX * VITESSE_BALLE) > ZONE_JEU_WIDTH) dirBalleX = -1;
else if ( (balleX + dirBalleX * VITESSE_BALLE) < 0) dirBalleX = 1;
if ( (balleY + dirBalleY * VITESSE_BALLE) > ZONE_JEU_HEIGHT) perdu();
else {
if ( (balleY + dirBalleY * VITESSE_BALLE) < 0) dirBalleY = 1;
else {
if ( ((balleY + dirBalleY * VITESSE_BALLE) > (ZONE_JEU_HEIGHT - BARRE_JEU_HEIGHT)) && ((balleX + dirBalleX * VITESSE_BALLE) >= barreX) && ((balleX + dirBalleX * VITESSE_BALLE) <= (barreX+BARRE_JEU_WIDTH))) {
dirBalleY = -1;
dirBalleX = 2*(balleX-(barreX+BARRE_JEU_WIDTH/2))/BARRE_JEU_WIDTH;
}
}
}
// Test des collisions avec les briques
if ( balleY <= limiteBriques) {
// On est dans la zone des briques
var ligneY = Math.floor(balleY/(BRIQUE_HEIGHT+ESPACE_BRIQUE));
var ligneX = Math.floor(balleX/(BRIQUE_WIDTH+ESPACE_BRIQUE));
if ( tabBriques[ligneY][ligneX] == 1 ) {
tabBriques[ligneY][ligneX] = 0;
dirBalleY = 1;
}
}
balleX += dirBalleX * VITESSE_BALLE;
balleY += dirBalleY * VITESSE_BALLE;
// Affichage de la balle
context.fillStyle = COULEUR_BALLE;
context.beginPath();
context.arc(balleX, balleY, DIMENSION_BALLE, 0, Math.PI*2, true);
context.closePath();
context.fill();
}
function checkDepla(e) {
// Flêche de droite préssée
if (e.keyCode == 39) {
if ( (barreX+PXL_DEPLA+BARRE_JEU_WIDTH) <= ZONE_JEU_WIDTH ) barreX += PXL_DEPLA;
}
// Flêche de gauche préssée
else if (e.keyCode == 37) {
if ( ((barreX-PXL_DEPLA)) >= 0 ) barreX -= PXL_DEPLA;
}
}
function perdu() {
clearInterval(boucleJeu);
alert("Perdu !");
}
function gagne() {
clearInterval(boucleJeu);
alert("Bravo vous avez gagné !");
}
function clearContexte(ctx, startwidth, ctxwidth, startheight, ctxheight) {
ctx.clearRect(startwidth, startheight, ctxwidth, ctxheight);
}
// Fonction permettant de créer les briques du jeu
function creerBriques(ctx, nbrLignes, nbrParLigne, largeur, hauteur, espace) {
// Tableau virtuel: On initialise les lignes de briques
tabBriques = new Array(nbrLignes);
for (var i=0; i < nbrLignes; i++) {
// Tableau virtuel: On initialise les briques de la ligne
tabBriques[i] = new Array(nbrParLigne);
// Affichage: On attribue une couleur aux briques de la ligne
ctx.fillStyle = COULEURS_BRIQUES[i];
for (var j=0; j < nbrParLigne; j++) {
// Affichage: On affiche une nouvelle brique
ctx.fillRect((j*(largeur+espace)),(i*(hauteur+espace)),largeur,hauteur);
// Tableau virtuel: On attribue à la case actuelle la valeur 1 = Une brique existe encore
tabBriques[i][j] = 1;
}
}
// Nos briques sont initialisées.
return 1;
}
</script>
</head>
<body>
<h1>Casse brique Canvas</h1>
<div id='conteneur'>
<canvas id="canvasElem" width="400" height="300">
IE Sucks! <br /><a href="http://www.getfirefox.net/">Télécharge Firefox !!</a>
</canvas>
</div>
</body>
</html>