Apparition aléatoire des fruits, légumes et plantes

build/Jeu.js

@@ -14,6 +14,9 @@ class Jeu extends Scene {
         this.appendChild(this.joueur_);
         this.joueur_.animer();
         this.regles_ = new Regles(document.getElementById("regles"), this);
+        this.objet_ = new Objet(document.createElement("img"), this);
+        this.objet_.positionnement();
+        setInterval(() => { this.objet_.apparition(); }, 1000);
     }
     pause() {
     }

build/Objet.js

@@ -0,0 +1,45 @@
+"use strict";
+class Objet extends Sprite {
+    constructor(element, scene) {
+        super(element);
+        this.scene_ = scene;
+        this.listeObjets_ = [];
+        this.widthX = document.documentElement.clientWidth;
+        this.heightY = document.documentElement.clientHeight;
+        this.fruit_ = new Sprite(document.createElement("img"));
+        this.fruit_.setImage("img/objet/fruit.png", 100, 100);
+        this.fruit_.disparitionDelay = 1500;
+        this.listeObjets_.push(this.fruit_);
+        this.legume_ = new Sprite(document.createElement("img"));
+        this.legume_.setImage("img/objet/legume.png", 100, 100);
+        this.legume_.disparitionDelay = 2500;
+        this.listeObjets_.push(this.legume_);
+        this.plante_ = new Sprite(document.createElement("img"));
+        this.plante_.setImage("img/objet/plante.png", 100, 100);
+        this.plante_.disparitionDelay = 3000;
+        this.listeObjets_.push(this.plante_);
+    }
+    apparition() {
+        const randomIndex = Math.floor(Math.random() * this.listeObjets_.length);
+        const objet = this.listeObjets_[randomIndex];
+        const clone = objet.getElement().cloneNode(true);
+        clone.style.position = "absolute";
+        clone.style.left = this.randomX(this.widthX) + "px";
+        clone.style.top = this.randomY(this.heightY) + "px";
+        this.scene_.appendChild(clone);
+        setTimeout(() => {
+            this.scene_.removeChild(clone);
+        }, objet.disparitionDelay || 2000);
+    }
+    randomX(width) {
+        return Math.floor(Math.random() * width);
+    }
+    randomY(height) {
+        return Math.floor(Math.random() * height);
+    }
+    positionnement() {
+        this.listeObjets_.forEach((objet) => {
+            objet.setXY(this.randomX(this.widthX), this.randomY(this.heightY));
+        });
+    }
+}

build/index.htm

@@ -6,6 +6,7 @@
   <link rel="stylesheet" href="jeu.css"/>
   <script src="Sprite.js"></script>
   <script src="Joueur.js"></script>
+  <script src="Objet.js"></script>
   <script src="Regles.js"></script>
   <script src="Scene.js"></script>
   <script src="Jeu.js"></script>

source/Jeu.ts

@@ -8,6 +8,7 @@ class Jeu extends Scene {
  /* Declarer ici les attributs de la scene. */
  public joueur_ : Joueur;
  public regles_ : Regles;
+ public objet_ : Objet;
 
  private zoneDeJeu_ : Sprite;
 
@@ -39,6 +40,11 @@ class Jeu extends Scene {
       //Création des boutons
       this.regles_ = new Regles(document.getElementById("regles"), this);
 
+      //Création des objets
+      this.objet_ = new Objet (document.createElement("img"),this);
+      this.objet_.positionnement();
+      setInterval(() => {this.objet_.apparition();}, 1000);
+
 
  }
 

source/Objet.ts

@@ -0,0 +1,80 @@
+class Objet extends Sprite {
+  public scene_: Jeu;
+  public listeObjets_ : Sprite[];
+
+  public fruit_ : Sprite;
+  public legume_ : Sprite;
+  public plante_ : Sprite;
+
+
+
+  public widthX : number;
+  public heightY : number;
+
+  public constructor(element: HTMLElement, scene: Jeu) {
+    super(element);
+    this.scene_ = scene;
+    this.listeObjets_ = [];
+
+    this.widthX = document.documentElement.clientWidth;
+    this.heightY = document.documentElement.clientHeight;
+
+    //Création des fruits
+    this.fruit_ = new Sprite (document.createElement("img"));
+    this.fruit_.setImage("img/objet/fruit.png",100,100);
+    this.fruit_.disparitionDelay = 1500;
+    this.listeObjets_.push(this.fruit_);
+
+
+    //Création des légumes
+    this.legume_ = new Sprite (document.createElement("img"));
+    this.legume_.setImage("img/objet/legume.png",100,100);
+    this.legume_.disparitionDelay = 2500;
+    this.listeObjets_.push(this.legume_);
+
+
+
+    //Création des plantes
+    this.plante_ = new Sprite (document.createElement("img"));
+    this.plante_.setImage("img/objet/plante.png",100,100);
+    this.plante_.disparitionDelay = 3000;
+    this.listeObjets_.push(this.plante_);
+
+
+  }
+  //Ici ChatGpt m'a été utile pour modifier ma fonction apparition. En effet je ne trouvais pas le moyen de faire apparaître plusieurs mêmes éléments du tableau. Dans mon ancienne fonction, il ne pouvait pas y avoir plusieurs plantes ou plusieurs fruits, sinon il ne voulait pas rester. La fonction choisi aléatoirement un objet du tableau à chaque appel, puis le positionne et la fait disparaitre.
+
+  public apparition() {
+    let randomIndex = Math.floor(Math.random() * this.listeObjets_.length);
+    let objet = this.listeObjets_[randomIndex];
+    let clone = objet.getElement().cloneNode(true) as HTMLElement;
+
+    clone.style.position = "absolute";
+    clone.style.left = this.randomX(this.widthX) + "px";
+    clone.style.top = this.randomY(this.heightY) + "px";
+
+    this.scene_.appendChild(clone);
+
+    setTimeout(() => {
+      this.scene_.removeChild(clone);
+    }, objet.disparitionDelay || 2000);
+  }
+
+
+
+  private randomX(width : number) {
+    return Math.floor(Math.random() * width);
+  }
+
+  private randomY(height : number) {
+    return Math.floor(Math.random() * height);
+  }
+
+  //Positionnement aléatoires des objet
+  public positionnement() {
+
+    this.listeObjets_.forEach((objet) => {
+      objet.setXY(this.randomX(this.widthX), this.randomY(this.heightY));
+    });
+  }
+  }

source/Scene.ts

@@ -31,6 +31,7 @@ class Scene extends Sprite {
   let box : DOMRect =  this.getParentNode().getBoundingClientRect();
 
   this.setDimension(document.documentElement.clientWidth, document.documentElement.clientHeight);
+  //Changement des dimensions par défault par la taille de la fenêtre
   this.setX((box.width - this.getWidth()) / 2);
   this.setY((box.height - this.getHeight()) / 2);
  }

source/Sprite.ts

@@ -33,6 +33,7 @@ class Sprite {
 
  private rotation_ : number;
  private opacity_ : number;
+ public disparitionDelay: number; // Ajout pour pouvoir donner une option de temps de disparition à mes objets
 
  //--------------------------------------------------------------------------------------Constructor
  public constructor(element : HTMLElement) {