diff --git a/build/Jeu.js b/build/Jeu.js index e35bd1b..b7f561a 100644 --- a/build/Jeu.js +++ b/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() { } diff --git a/build/Objet.js b/build/Objet.js new file mode 100644 index 0000000..29e61bd --- /dev/null +++ b/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)); + }); + } +} diff --git a/build/img/objet/fruit.png b/build/img/objet/fruit.png new file mode 100644 index 0000000..94798fa Binary files /dev/null and b/build/img/objet/fruit.png differ diff --git a/build/img/objet/legume.png b/build/img/objet/legume.png new file mode 100644 index 0000000..f3fb8ff Binary files /dev/null and b/build/img/objet/legume.png differ diff --git a/build/img/objet/plante.png b/build/img/objet/plante.png new file mode 100644 index 0000000..1ea1e0a Binary files /dev/null and b/build/img/objet/plante.png differ diff --git a/build/index.htm b/build/index.htm index 8ea685f..8b19d05 100644 --- a/build/index.htm +++ b/build/index.htm @@ -6,6 +6,7 @@ + diff --git a/source/Jeu.ts b/source/Jeu.ts index b3fff1f..a2b6769 100644 --- a/source/Jeu.ts +++ b/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); + } diff --git a/source/Objet.ts b/source/Objet.ts new file mode 100644 index 0000000..1abfd2d --- /dev/null +++ b/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)); + }); + } + } \ No newline at end of file diff --git a/source/Scene.ts b/source/Scene.ts index af8170c..e291cea 100644 --- a/source/Scene.ts +++ b/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); } diff --git a/source/Sprite.ts b/source/Sprite.ts index aba9914..599ccec 100644 --- a/source/Sprite.ts +++ b/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) {