[Résolu] Incompréhension d'un bug par Ceydeirom - page 1

Bonjour à tous;

Voila je suis à la fin de la programmation d'un petit casse-brique mais celui-ci bug, au moment ou la balle entre dans la zone limite des briques, elle disparait au lieu de casser une brique et de rebondir :euh:

Voila mon code de la page Xhtml:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
  <title>Titre de la page</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<code type="css"><style type="text/css">
      canvas { border: 4px solid black;}
</style></code>

</head>
<body>

<canvas id="canvasElem" width="500" height="500">
Vas telecharger un meilleur navigateur.
</canvas>

<script type="text/javascript" src="script.js"></script>

</body>
</html>

Et voila mon code Javascript:
//On récupère l'objet canvas.
var elem = document.getElementById('canvasElem');
//On récupère le contexte 2D.
var ctx = elem.getContext('2d');
//Variables globales.
var nombre_de_ligne = 4;
var nombre_de_brique_par_ligne = 9;
var longueur_brique = 20;
var largeur_brique = 50;
var espacement_brique = 3;
var largeur_barre = 80;
var longueur_barre = 10;
var largeur_zone = 500;
var longueur_zone = 500;
var dimension = 10;
var vitesse = 2;
var bouclejeu;
var gagner =0;
var limiteBriques = (espacement_brique+longueur_brique)*nombre_de_ligne;
//futur tableau a deux dimensions.
var tabbrique;
// Les deux variables indiquant la position de la barre sur l'axe x et y.
var barrex;
var barrey;
var ballex = 150;
var balley = 250;
var directionx = -1;
var directiony = 1;


genererbrique(ctx, nombre_de_ligne, nombre_de_brique_par_ligne, espacement_brique, longueur_brique, largeur_brique);

//On regle la position initial de la barre.
barrex = (largeur_zone/2)-(largeur_barre/2);
barrey = longueur_zone - longueur_barre;

bouclejeu = setInterval(actualiser, 10);

window.document.onkeydown = checkDepla;
// Notre fonction genererbrique qui va generer les briques de départ.
function genererbrique(ctx, nombre_de_ligne, nombre_de_brique_par_ligne, espacement_brique, longueur_brique, largeur_brique)
{
    tabbrique = new Array(nombre_de_ligne);
	
	for(i=0;i<nombre_de_ligne;i++)
	{
	    // On créer le tableau a deux dimensions.
		tabbrique[i] = new Array(nombre_de_brique_par_ligne);
		
		for(j=0;j<nombre_de_brique_par_ligne;j++)
		{
		    tabbrique[i][j] = 1; // On initialise les données de notre tableau à 1, car 1 = brique solide, 0 brique cassée.
		
		ctx.fillStyle = "green";
		ctx.fillRect((j*(largeur_brique+espacement_brique)),(i*(longueur_brique+espacement_brique)), largeur_brique, longueur_brique);
	    }
	}
return 1;
}

function checkDepla(e)
{
	if (e.keyCode == 39)
		barrex+= 5;
	if (e.keyCode == 37)
		barrex -= 5;
}
function actualiser()
{
    effacer(ctx, 0, 0, largeur_zone, longueur_zone);
	
	gagner = 1;
	
	for(i=0;i<nombre_de_ligne;i++)
	{
	    for(j=0;j<nombre_de_brique_par_ligne;j++)
		{
		    if(tabbrique[i][j] == 1)
			{
			    ctx.fillStyle = "green";
		        ctx.fillRect((j*(largeur_brique+espacement_brique)),(i*(longueur_brique+espacement_brique)), largeur_brique, longueur_brique);
		        
				gagner = 0
			}
		}
	}

if ( gagner ) gagne();

ctx.fillStyle = "blue";
ctx.fillRect(barrex, barrey, largeur_barre, longueur_barre);

if((ballex + directionx * vitesse) > 500)
    directionx = -1;
else if((ballex + directionx * vitesse) < 0)
    directionx = 1;
if((balley + directiony * vitesse) < 0)
    directiony = 1;
else if((balley + directiony * vitesse) > 500)
    perdu();
if((balley + directiony * vitesse) > (longueur_zone-longueur_barre) && (ballex + directionx * vitesse) >= barrex &&  (ballex + directionx * vitesse) <= (barrex+largeur_barre)) 
   {
   directiony = -1;
   directionx = 2*(ballex-(barrex+largeur_barre/2))/largeur_barre;
   }
  
if ( balley <= limiteBriques) 
{
   // On est dans la zone des briques
    var ligney = Math.floor(balley/(longueur_brique+espacement_brique));
    var lignex = Math.floor(ballex/(largeur_brique+espacement_brique));
    if ( tabbrique[ligney][lignex] == 1 ) 
	{
        tabbrique[ligney][lignex] = 0;
        directiony = 1;
    }
}
   
	
ballex += directionx * vitesse;
balley += directiony * vitesse;

ctx.beginPath();
ctx.arc(ballex, balley, dimension, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
}

function effacer(ctx, x, y, largeur_zone, longueur_zone)
{
   ctx.clearRect(x, y, largeur_zone, longueur_zone);
}

function perdu() {
clearInterval(bouclejeu);
alert("Perdu !");
}

function gagne() 
{
    clearInterval(boucleJeu);
    alert("Bravo vous avez gagné !");
}

nod_ m'a déjà aidé, il m'a dit de corriger une des conditions :

if (tabbrique[ligney] && tabbrique[ligney][lignex] == 1)

En effet cela marche, mais je ne comprends pas pourquoi avec simplement if ( tabbrique[ligney][lignex] == 1 ) cela ne marche pas... Donc si quelqu'un pouvait m'expliquer en quoi mon ancien code était mauvais s'il vous plait.

Merci d'avance.

Ceydeirom

23 juillet 2010 à 0:30:30

restimel

23 juillet 2010 à 12:01:02

Citation : Ceydeirom

nod_ m'a déjà aidé, il m'a dit de corriger une des conditions :
if (tabbrique[ligney] && tabbrique[ligney][lignex] == 1)
En effet cela marche, mais je ne comprends pas pourquoi avec simplement if ( tabbrique[ligney][lignex] == 1 ) cela ne marche pas... Donc si quelqu'un pouvait m'expliquer en quoi mon ancien code était mauvais s'il vous plait.

Merci d'avance.

(j'ai pas lu le reste)

Le problème doit venir qu'à certains moments ligney doit sortir du tableau tabbrique, du coup tabbrique[ligney] renvoie undefined . Et donc tabbrique[ligney][lignex] équivaut à undefined[lignex] ce qui n'existe pas et est impossible à faire, du coup l'interpréteur renvoie une erreur et ne continue pas à intérpréter le reste du code javascript

23 juillet 2010 à 16:12:37

Hum ok après les réponses de nod_ et les tiennes j'ai enfin compris le problème, merci

Incompréhension d'un bug

Incompréhension d'un bug

Supprimer

Modérer

Signaler le message aux modérateurs