version avec back end

source/Jeu.ts

@@ -14,16 +14,13 @@ class Jeu extends Scene {
   public fraise_ : Sprite;
   public arriverx_ : number;
   public arrivery_ : number;
+  public arriver_ : Sprite;
   public compteurfromage_ : number;
   public compteurfraise_ : number;
-  public totalfraise_ : number;
-  public totalfromage_ : number;
   public mangerfromage_ : Array<Array<Sprite>>;
   public mangerfraise_ : Array<Array<Sprite>>;
-  public compteurfromagemoins_ : number;
-  public compteurfraisemoins_ : number;
   public niveau_ : any;
-  private idniveau_ : number;
+  public idniveau_ : number;
  
  
  
@@ -34,8 +31,8 @@ class Jeu extends Scene {
    this.pas_ = 32; 
    this.mangerfromage_ = [];
    this.mangerfraise_ = [];
-   this.compteurfromagemoins_ = 0;
+   this.compteurfraise_ = 0;
-   this.compteurfraisemoins_ = 0;
+   this.compteurfromage_ = 0;
    this.idniveau_ = 1;
   }
  
@@ -45,8 +42,8 @@ class Jeu extends Scene {
    requete.open("get", "http://localhost/SAE/index.php?" + parametres);
    /* Ecouteur déclenché à la réception des données */
    requete.onreadystatechange = () => {
-     if (requete.readyState == XMLHttpRequest.DONE
+     if (requete.readyState == XMLHttpRequest.DONE && requete.status == 200) {
-       && requete.status == 200) {
+
        this.niveau_ = JSON.parse(requete.responseText);
        /* Suite du code */
        console.log(this.niveau_.id);
@@ -58,66 +55,78 @@ class Jeu extends Scene {
  }
  
  private initialiserCarte(){
-   // this.carte_ = [];
+  /* ancien code pour la carte
-   // this.carte_[0] =  [1 ,1 ,1 ,0 ,0 ,1 ,1 ,1 ,1 ,1 ,1 ,1 ,0 ,1 ,1 ,1 ,1 ,1 ,0 ,0 ];
+  this.carte_ = [];
-   // this.carte_[1] =  [1 ,8 ,1 ,0 ,0 ,1 ,2 ,2 ,2 ,2 ,2 ,1 ,0 ,1 ,2 ,2 ,2 ,1 ,0 ,0 ];
+   this.carte_[0] =  [1 ,1 ,1 ,0 ,0 ,1 ,1 ,1 ,1 ,1 ,1 ,1 ,0 ,1 ,1 ,1 ,1 ,1 ,0 ,0 ];
-   // this.carte_[2] =  [1 ,2 ,1 ,0 ,0 ,1 ,2 ,4 ,4 ,4 ,2 ,1 ,0 ,1 ,2 ,1 ,2 ,1 ,1 ,0 ];
+   this.carte_[1] =  [1 ,8 ,1 ,0 ,0 ,1 ,2 ,2 ,2 ,2 ,2 ,1 ,0 ,1 ,2 ,2 ,2 ,1 ,0 ,0 ];
-   // this.carte_[3] =  [1 ,2 ,1 ,0 ,0 ,1 ,2 ,1 ,1 ,1 ,2 ,1 ,0 ,1 ,2 ,3 ,2 ,2 ,1 ,0 ];
+   this.carte_[2] =  [1 ,2 ,1 ,0 ,0 ,1 ,2 ,4 ,4 ,4 ,2 ,1 ,0 ,1 ,2 ,1 ,2 ,1 ,1 ,0 ];
-   // this.carte_[4] =  [1 ,2 ,1 ,1 ,1 ,1 ,2 ,2 ,2 ,1 ,2 ,1 ,0 ,1 ,2 ,1 ,4 ,2 ,1 ,0 ];
+   this.carte_[3] =  [1 ,2 ,1 ,0 ,0 ,1 ,2 ,1 ,1 ,1 ,2 ,1 ,0 ,1 ,2 ,3 ,2 ,2 ,1 ,0 ];
-   // this.carte_[5] =  [1 ,2 ,2 ,2 ,1 ,3 ,2 ,1 ,2 ,1 ,2 ,1 ,0 ,1 ,2 ,1 ,4 ,2 ,1 ,0 ];
+   this.carte_[4] =  [1 ,2 ,1 ,1 ,1 ,1 ,2 ,2 ,2 ,1 ,2 ,1 ,0 ,1 ,2 ,1 ,4 ,2 ,1 ,0 ];
-   // this.carte_[6] =  [1 ,1 ,1 ,2 ,1 ,2 ,4 ,1 ,2 ,1 ,2 ,1 ,0 ,1 ,2 ,1 ,4 ,2 ,1 ,0 ];
+   this.carte_[5] =  [1 ,2 ,2 ,2 ,1 ,3 ,2 ,1 ,2 ,1 ,2 ,1 ,0 ,1 ,2 ,1 ,4 ,2 ,1 ,0 ];
-   // this.carte_[7] =  [0 ,0 ,1 ,2 ,1 ,2 ,4 ,1 ,2 ,1 ,2 ,1 ,1 ,1 ,2 ,1 ,4 ,2 ,1 ,0 ];
+   this.carte_[6] =  [1 ,1 ,1 ,2 ,1 ,2 ,4 ,1 ,2 ,1 ,2 ,1 ,0 ,1 ,2 ,1 ,4 ,2 ,1 ,0 ];
-   // this.carte_[8] =  [1 ,1 ,1 ,2 ,1 ,2 ,4 ,1 ,2 ,2 ,2 ,2 ,1 ,4 ,2 ,1 ,4 ,2 ,1 ,0 ];
+   this.carte_[7] =  [0 ,0 ,1 ,2 ,1 ,2 ,4 ,1 ,2 ,1 ,2 ,1 ,1 ,1 ,2 ,1 ,4 ,2 ,1 ,0 ];
-   // this.carte_[9] =  [1 ,2 ,2 ,2 ,1 ,2 ,4 ,1 ,2 ,1 ,1 ,2 ,1 ,4 ,2 ,1 ,4 ,2 ,1 ,0 ];
+   this.carte_[8] =  [1 ,1 ,1 ,2 ,1 ,2 ,4 ,1 ,2 ,2 ,2 ,2 ,1 ,4 ,2 ,1 ,4 ,2 ,1 ,0 ];
-   // this.carte_[10] = [1 ,2 ,1 ,1 ,1 ,2 ,4 ,1 ,2 ,1 ,1 ,2 ,1 ,4 ,2 ,1 ,4 ,2 ,1 ,0 ];
+   this.carte_[9] =  [1 ,2 ,2 ,2 ,1 ,2 ,4 ,1 ,2 ,1 ,1 ,2 ,1 ,4 ,2 ,1 ,4 ,2 ,1 ,0 ];
-   // this.carte_[11] = [1 ,2 ,2 ,2 ,1 ,2 ,2 ,2 ,2 ,2 ,2 ,2 ,2 ,2 ,2 ,1 ,4 ,2 ,1 ,1 ];
+   this.carte_[10] = [1 ,2 ,1 ,1 ,1 ,2 ,4 ,1 ,2 ,1 ,1 ,2 ,1 ,4 ,2 ,1 ,4 ,2 ,1 ,0 ];
-   // this.carte_[12] = [1 ,1 ,1 ,2 ,1 ,1 ,1 ,1 ,2 ,1 ,1 ,2 ,1 ,2 ,1 ,1 ,1 ,2 ,9 ,1 ];
+   this.carte_[11] = [1 ,2 ,2 ,2 ,1 ,2 ,2 ,2 ,2 ,2 ,2 ,2 ,2 ,2 ,2 ,1 ,4 ,2 ,1 ,1 ];
-   // this.carte_[13] = [0 ,0 ,1 ,2 ,2 ,2 ,2 ,2 ,2 ,1 ,1 ,3 ,2 ,2 ,1 ,0 ,1 ,1 ,1 ,1 ];
+   this.carte_[12] = [1 ,1 ,1 ,2 ,1 ,1 ,1 ,1 ,2 ,1 ,1 ,2 ,1 ,2 ,1 ,1 ,1 ,2 ,9 ,1 ];
-   // this.carte_[14] = [0 ,0 ,1 ,1 ,1 ,1 ,1 ,1 ,1 ,1 ,1 ,1 ,1 ,1 ,1 ,0 ,0 ,0 ,0 ,0 ];
+   this.carte_[13] = [0 ,0 ,1 ,2 ,2 ,2 ,2 ,2 ,2 ,1 ,1 ,3 ,2 ,2 ,1 ,0 ,1 ,1 ,1 ,1 ];
+   this.carte_[14] = [0 ,0 ,1 ,1 ,1 ,1 ,1 ,1 ,1 ,1 ,1 ,1 ,1 ,1 ,1 ,0 ,0 ,0 ,0 ,0 ];
+   */
    this.carte_ = JSON.parse(this.niveau_.niveau);
  }
  
  public dessinerLabyrinthe(){
-   this.compteurfromage_ = 0;
+  // dessine la map et place les objets et le rat
-   this.compteurfraise_ = 0;
    for(let i = 0 ; i<this.carte_.length; i++){
+    // creation des tableaux pour le fromage et les fraises
      this.mangerfromage_[i] = [];
      this.mangerfraise_[i] = [];
      for(let j = 0 ; j<this.carte_[i].length; j++){
+      // placement de la fin de la map sur la carte
        if (this.carte_[i][j] == 9){
          this.arriverx_ = j;
          this.arrivery_ = i;
+         this.arriver_ = new Sprite(document.createElement("img"));
+         this.arriver_.setImage("fin.png",32,32);
+         this.arriver_.setXY(this.pas_*j,this.pas_*i);
+         this.appendChild(this.arriver_);
        }
+       // placement des murs sur la carte
        if(this.carte_[i][j] == 1){
          this.wall_ = new Sprite(document.createElement("img"));
          this.wall_.setImage("mur.jpg",32,32);
          this.wall_.setXY(this.pas_*j,this.pas_*i);
          this.appendChild(this.wall_);
        }
+       // placement du rat sur la carte
        if (this.carte_[i][j] == 8){
          this.rat_ = new Rat(this,document.createElement("img"),i,j);
          this.rat_.setImage("rat.png",32,32);
          this.rat_.setXY(this.pas_*j,this.pas_*i);
          this.appendChild(this.rat_);
        }
+       // placement des fromages sur la carte
        if (this.carte_[i][j] == 2){
          this.fromage_ = new Sprite(document.createElement("img"));
          this.fromage_.setImage("fromage.png",32,32);
          this.fromage_.setXY(this.pas_*j,this.pas_*i);
          this.appendChild(this.fromage_);
-         this.compteurfromage_++;
        }
+       // placement des fraises sur la carte
        if (this.carte_[i][j] == 3){
          this.fraise_ = new Sprite(document.createElement("img"));
          this.fraise_.setImage("fraise.png",32,32);
          this.fraise_.setXY(this.pas_*j,this.pas_*i);
          this.appendChild(this.fraise_);
        }
+       // remplis le tableau qui contient uniquement le fromage
        if(this.carte_[i][j] == 2){
          this.mangerfromage_[i][j] = this.fromage_;
        } else {
          this.mangerfromage_[i][j] = null;
        }
+       // remplis le tableau qui contient uniquement les fraises
        if(this.carte_[i][j] == 3){
          this.mangerfraise_[i][j] = this.fraise_;
        } else {
@@ -125,26 +134,24 @@ class Jeu extends Scene {
        }
      }
    }
-   console.log(this.mangerfromage_);
-   console.log(this.mangerfraise_);
-   console.log(this.carte_);
  }
 
+// retire le fromage de la map
  public retirerFromage(y : number, x : number){
-   this.carte_[y][x] = 4;
+   this.carte_[y][x] = 4; //place un numero 4 dans le tableau la ou le rat etais le tour d'avant
-   this.mangerfromage_[y][x] = null;
+   this.mangerfromage_[y][x] = null; //remplace le fromage qui etais dans le tableau par nul
    for(let i = 0 ; i<this.carte_.length; i++){
      for(let j = 0 ; j<this.carte_[i].length; j++){
        if (this.carte_[i][j] == 8){
          this.carte_[i][j] = 4;
-         this.compteurfromagemoins_++;
+         this.compteurfromage_++; //augmente le compteur de fromage manger
-         this.compteurfromage_ = this.totalfromage_ - this.compteurfromagemoins_;
+         console.log(this.compteurfromage_); //pour debug et voir le nombre de fromage manger
-         console.log(this.compteurfromage_);
        }
      }
    }
    this.removeAllChildNodes();
  }
+ //la meme chose que le fromage mais pour les fraises
  public retirerFraise(y : number, x : number){
    this.carte_[y][x] = 4;
    this.mangerfraise_[y][x] = null;
@@ -152,8 +159,7 @@ class Jeu extends Scene {
      for(let j = 0 ; j<this.carte_[i].length; j++){
        if (this.carte_[i][j] == 8){
          this.carte_[i][j] = 4;
-         this.compteurfraisemoins_++;
+         this.compteurfraise_++;
-         this.compteurfraise_ = this.totalfraise_ - this.compteurfraisemoins_;
          console.log(this.compteurfraise_);
        }
      }
@@ -161,20 +167,15 @@ class Jeu extends Scene {
    this.removeAllChildNodes();
  }
  
+ //replace le personnage la ou il doit etre apres un deplacement
  public replacerPersonnage(ny : number, nx : number, ay : number, ax : number){
-   this.carte_[ny][nx] = 8;
+   this.carte_[ny][nx] = 8; //positionne le personnage au nouveau x et y
-   this.carte_[ay][ax] = 4;
+   this.carte_[ay][ax] = 4; //remplace l'ancienne position par le numero 4 
-   // for(let i = 0 ; i<this.carte_.length; i++){
+   console.log(ny,nx,ay,ax); //pour debug les problemes
-   //   for(let j = 0 ; j<this.carte_[i].length; j++){
-   //     if (this.carte_[i][j] == 8){
-   //       this.carte_[i][j] = 4;
-   //       console.log("j'ai bouger");
-   //     }
-   //   }
-   // }
    this.removeAllChildNodes();
  }
  
+ //sert a enlever tout les elements de la scene pour que le tour s'actualise
  public removeAllChildNodes() {
    const scene = document.getElementById('scene')
    while (scene.firstChild) {
@@ -182,36 +183,21 @@ class Jeu extends Scene {
    }
  }
  
- public compteur(){
-   this.totalfromage_ = 0;
-   this.totalfraise_ = 0;
-   for(let i = 0 ; i<this.carte_.length; i++){
-     for(let j = 0 ; j<this.carte_[i].length; j++){
-       if(this.carte_[i][j] == 2){
-         this.totalfromage_++;
-       }
-       if(this.carte_[i][j] == 3){
-         this.totalfraise_++;
-       }
-     }
-   }
-   console.log(this.totalfraise_);
-   console.log(this.totalfromage_);
- }
   //--------------------------------------------------------------------------------------------start
   public start_suite() {
    /* Ecrire ici le code qui demarre la scene. */
-   console.log(this.carte_);
+   this.removeAllChildNodes(); //enleve tout les elements de la scene au cas ou
+   console.log(this.carte_); //pour le debug de la carte
    this.initialiserCarte(); 
    this.dessinerLabyrinthe();
-   this.compteur();
+   this.rat_.animer(); //sert a bouger le personnage
-   this.rat_.animer();
+   this.rat_.estArriver(); //pour savoir si le joueur a finis la map
-   this.rat_.estArriver();
   }
   public override start() {
    /* Ecrire ici le code qui demarre la scene. */
+   //telecharge la carte qui est dans le backend sur une autre page
    this.telechargerNiveau(this.idniveau_);
-   this.idniveau_++;
+   console.log(this); //pour debug l'initialisation du jeu
   }
  
   //--------------------------------------------------------------------------------------------pause

source/Rat.ts

@@ -14,54 +14,55 @@ class Rat extends Sprite {
     this.px_ = px;
     this.py_ = py;
     this.ecouteurDeplacer = (event : KeyboardEvent) => {this.deplacer(event)};
-    this.getElement().style.zIndex = "2";
+    this.getElement().style.zIndex = "2"; // sert pour que le rat soit toujours au dessus
   }
 
+  //sert a bouger vert le haut jusqu'au mur le plus proche avec un rafraichissement de 20ms
   async haut(){
     while(this.scene_.carte_[this.py_-1][this.px_] != 1){
       this.ancienpy_ = this.py_;
       this.ancienpx_ = this.px_;
       this.py_ = this.py_-1;
       this.setXY(this.getX(),this.getY()-this.scene_.pas_);
-      this.getElement().style.transform = 'rotate(-90deg)';
       this.manger();
       console.log("oui");
-      await new Promise<void>(resolve => setTimeout(resolve, 20));
+      await new Promise<void>(resolve => setTimeout(resolve, 20)); //attend 20ms entre chaque mouvement
     }
   }
+  //sert a bouger vert le bas jusqu'au mur le plus proche avec un rafraichissement de 20ms
   async bas(){
     while(this.scene_.carte_[this.py_+1][this.px_] != 1){
       this.ancienpy_ = this.py_;
       this.ancienpx_ = this.px_;
       this.py_ = this.py_+1;
       this.setXY(this.getX(),this.getY()+this.scene_.pas_);
-      this.getElement().style.transform = 'rotate(90deg)';
       this.manger();
-      await new Promise<void>(resolve => setTimeout(resolve, 20));
+      await new Promise<void>(resolve => setTimeout(resolve, 20)); //attend 20ms entre chaque mouvement
     }
   }
+  //sert a bouger vert la gauche jusqu'au mur le plus proche avec un rafraichissement de 20ms
   async gauche(){
     while(this.scene_.carte_[this.py_][this.px_-1] != 1){
       this.ancienpy_ = this.py_;
       this.ancienpx_ = this.px_;
       this.px_ = this.px_-1;
       this.setXY(this.getX()-this.scene_.pas_,this.getY());
-      this.getElement().style.transform = 'rotate(90deg) scale(-1,1)';
       this.manger();
-      await new Promise<void>(resolve => setTimeout(resolve, 20));
+      await new Promise<void>(resolve => setTimeout(resolve, 20)); //attend 20ms entre chaque mouvement
     }
   }
+  //sert a bouger vert la droite jusqu'au mur le plus proche avec un rafraichissement de 20ms
   async droite(){
     while(this.scene_.carte_[this.py_][this.px_+1] != 1){
       this.ancienpy_ = this.py_;
       this.ancienpx_ = this.px_;
       this.px_ = this.px_+1;
       this.setXY(this.getX()+this.scene_.pas_,this.getY());
-      this.getElement().style.transform = 'rotate(90deg) scale(1,1)';
       this.manger();
-      await new Promise<void>(resolve => setTimeout(resolve, 20));
+      await new Promise<void>(resolve => setTimeout(resolve, 20)); //attend 20ms entre chaque mouvement
     }
   }
+  // sert a deplacer le personnage et si il est arriver demande le prochain niveau
   private deplacer(event : KeyboardEvent){
     if(this.estArriver() == false){
       if(event.key == "ArrowLeft"){
@@ -76,19 +77,22 @@ class Rat extends Sprite {
       if(event.key == "ArrowUp"){
         this.haut();
       }
+    }else{
+      this.scene_.idniveau_++;
+      this.scene_.start();
     }
-    
   }
 
   public manger(){
+    //sert a bouger le personnage si la case est vide
     if(this.scene_.carte_[this.py_][this.px_] == 4 || this.scene_.carte_[this.py_][this.px_] == 9 ){
       this.scene_.replacerPersonnage(this.py_,this.px_,this.ancienpy_,this.ancienpx_);
       console.log("j'ai bouger");
-    }else if(this.scene_.carte_[this.py_][this.px_] == 2){
+    }else if(this.scene_.carte_[this.py_][this.px_] == 2){//sert a bouger le personnage si la case est un fromage
       this.scene_.retirerFromage(this.py_,this.px_);
       console.log("j'ai mange");
       this.scene_.carte_[this.py_][this.px_] = 8;
-    }else if(this.scene_.carte_[this.py_][this.px_] == 3){
+    }else if(this.scene_.carte_[this.py_][this.px_] == 3){//sert a bouger le personnage si la case est une fraise
       this.scene_.retirerFraise(this.py_,this.px_);
       console.log("j'ai mange");
       this.scene_.carte_[this.py_][this.px_] = 8;
@@ -97,14 +101,17 @@ class Rat extends Sprite {
   }
 
   public animer(){
+    // ajoute un ecouteur de si il y a une touche presser
     window.addEventListener("keydown", this.ecouteurDeplacer);
   }
 
   public figer(){
+    // enleve l'ecouteur de la touche presser
     window.removeEventListener("keydown", this.ecouteurDeplacer);
   }
 
   public estArriver(){
+    //savoir si le personnage est arriver si oui return un true 
     return this.scene_.carte_[this.scene_.arrivery_][this.scene_.arriverx_] == 8;
   }  
 }