Projet 2 : correction

Projet 2 : correction
Analyse
Le projet 2 demande de générer les divisions dans la div #view à partir du code Javascript. Il faudra
les sauver dans un tableau walls[][].
A la réinitialisation, on s'assurera que les murs seront affichés/cachés selon les besoins.
De nombreux accès devront être faits sur les divisions nouvellement créées, il est donc intéressant
de les sauver dans une variable avant de les copier dans le tableau.
Solution
HTML
On ajoutera le fichier staticdata.js dans les javascript chargés et on retirera les divisions créées dans
#view
sethandlers()
On déplacera les associations de handlers aux événements dans cette fonction ($('...').onclick=... et
autres)
init()
Cette fonction commencera par préparer le tableau walls[][] pour qu'il soit en deux dimensions
for(i=0;i<7;i++) {
walls[i]=new Array() ;
}
Le tableau walls soit avoir été créé avant init() (hors de toute fonction) par la ligne
var walls=new Array() ;
Il suffit ensuite d'appeler dans l'ordre gamefield, initdisp et sethandlers
gamefield()
Il suffit de boucler sur toutes les cellules des tableaux wallset..., de tester si wallsetImage est non
vide et, dans ce cas, de créer une <div>, remplir ses styles, ajouter la div à #view et la sauver dans
le tableau
for(i=0;i<7;i++) {
for (j=0;j<5;j++) {
if (wallsetImage[i][j]!= "") {
div=document.createElement("div") ;
div.style.backgroundImage="url('img/"+wallsetImage[i][j]+"')"
;
div.style.top=wallsetTop[i][j]+"px" ;
[...]
walls[i][j]=div ;
$("view").appendChild(div);
}
}
}
Pour le background position, on ne change sa valeur que si j<2.
if (j<2) {
div.style.backgroundPosition="100% 0";
}
Initgame()
Les divisions (1,1), (1,3), (3,1), (3,3), (4,1), (4,3), (6,1), (6,3) devront tout le temps être affichées,
on fera donc des show sur les éléments de walls[][] correspondant :
show(walls[1][1]) ;
show(walls[1][3]) ;
[...]
La division (5,2) sera elle tout le temps masquée
hide(walls[5][2]) ;
On initialisera également les contrôles et les divisions correspondantes à ce niveau (voir correctif
exercice 1)
Les gestionnaires d'événement
Au lieu de faire des show et des hide sur des ID, on les fera sur les éléments walls[i][j] qui
correspondent. Par exemple, le bouton agira sur walls[1][2] au lieu de "F0M"
Améliorations possibles
On pourrait imaginer un tableau wallsetShow[][] qui contiendrait des 1 si la division doit être
initialement visible et 0 sinon et, dans initgame, faire une boucle sur walls[][] et si la valeur est
différente de null, faire un show ou un hide en fonction de ce tableau.