Initialisation de la Partie

build/Jeu.js

@@ -11,19 +11,40 @@ class Jeu extends Scene {
         this.compteurMonnaie = 0;
     }
     start() {
+        this.start_ = new Start(document.getElementById("starting"), this);
+    }
+    partieCommencer() {
+        this.creerJoueur();
+        this.afficherRegles();
+        this.afficherShop();
+        this.creerObject();
+    }
+    creerJoueur() {
         this.joueur_ = new Joueur(document.createElement("img"), this);
         this.joueur_.setImage("img/joe.png", 60, 80);
         this.joueur_.setX(this.zoneDeJeu_.getWidth() / 2 - this.joueur_.getWidth() / 2);
         this.joueur_.setY(this.zoneDeJeu_.getHeight() / 2 - this.joueur_.getHeight() / 2);
         this.appendChild(this.joueur_);
         this.joueur_.animer();
+    }
+    afficherRegles() {
         this.regles_ = new Regles(document.getElementById("regles"), this);
+    }
+    afficherShop() {
         this.shop_ = new Shop(document.getElementById("Shop"), this);
+    }
+    creerObject() {
         this.objet_ = new Objet(document.createElement("img"), this);
-        setInterval(() => { this.objet_.creerFruit(); }, 3000);
-        setInterval(() => { this.objet_.creerPoison(); }, 3000);
-        setInterval(() => { this.objet_.creerPlante(); }, 3000);
-        setInterval(() => { this.joueur_.collisionObjet(); }, 1000 / 144);
+        this.intervalFruit = setInterval(() => { this.objet_.creerFruit(); }, 3000);
+        this.intervalPoison = setInterval(() => { this.objet_.creerPoison(); }, 3000);
+        this.intervalPlante = setInterval(() => { this.objet_.creerPlante(); }, 3000);
+        this.intervalCollision = setInterval(() => { this.joueur_.collisionObjet(); }, 1000 / 144);
+    }
+    figerObjet() {
+        clearInterval(this.intervalFruit);
+        clearInterval(this.intervalPoison);
+        clearInterval(this.intervalPlante);
+        clearInterval(this.intervalCollision);
     }
     augmenterScore() {
         this.compteurScore += 100;

build/Joueur.js

@@ -24,6 +24,7 @@ class Joueur extends Sprite {
                 }
                 if (this.scene_.objet_.listeObjets_[i] == this.scene_.objet_.recupPoison_) {
                     console.log("tu as touché du poison");
+                    this.scene_.reduireScore();
                     this.popUpPoison();
                     this.imagePopUpPoison();
                     this.scene_.objet_.listeObjets_[i].setXY(-10000, -10000);

build/Objet.js

@@ -19,8 +19,8 @@ class Objet extends Sprite {
             'img/objet/plantes/origan.png',
         ];
         this.scene_ = scene;
-        this.limitesX = 500;
-        this.limitesY = 500;
+        this.limitesX = 100;
+        this.limitesY = 100;
         this.listeObjets_ = [];
         this.widthX = this.scene_.getWidth() - this.limitesX;
         this.heightY = this.scene_.getHeight() - this.limitesY;

build/Regles.js

@@ -37,6 +37,7 @@ class Regles extends Sprite {
     }
     cacher() {
         if (this.reglesDiv_) {
+            this.scene_.creerObject();
             this.fermetureMenu_.play();
             this.reglesDiv_.hide();
             this.menu_.style.display = 'block';
@@ -44,6 +45,7 @@ class Regles extends Sprite {
     }
     montrer() {
         if (this.menu_) {
+            this.scene_.figerObjet();
             this.ouvertureMenu_.play();
             this.musiqueDeFond.play();
             this.reglesDiv_.show();

build/Shop.js

@@ -22,6 +22,7 @@ class Shop extends Sprite {
     }
     cacher() {
         if (this.shopDiv_) {
+            this.scene_.creerObject();
             this.fermetureMenu_.play();
             this.shopDiv_.hide();
             this.menu_.style.display = 'block';
@@ -29,6 +30,7 @@ class Shop extends Sprite {
     }
     montrer() {
         if (this.menu_) {
+            this.scene_.figerObjet();
             this.ouvertureMenu_.play();
             this.shopDiv_.show();
             this.menu_.style.display = 'none';

build/Start.js

@@ -0,0 +1,21 @@
+"use strict";
+class Start extends Sprite {
+    constructor(element, scene) {
+        super(element);
+        this.scene_ = scene;
+        this.StartDiv_ = new Sprite(document.getElementById('starting'));
+        this.bouton_ = new Sprite(document.getElementById('demarrer'));
+        this.son = document.getElementById('son');
+        this.sonOui = document.getElementById('sonOui');
+        this.musiqueDeFond = document.getElementById('musiqueFond');
+        this.setX(document.documentElement.clientWidth / 2 - this.getWidth() / 2);
+        this.setY(document.documentElement.clientHeight / 2 - this.getHeight() / 2);
+        this.bouton_.addEventListener('click', this.demarrerPartie.bind(this));
+        this.musiqueDeFond.play();
+    }
+    demarrerPartie() {
+        this.StartDiv_.hide();
+        this.scene_.partieCommencer();
+        this.musiqueDeFond.play();
+    }
+}

build/index.htm

@@ -4,12 +4,21 @@
   <title>Template Jeu</title>
   <meta charset="utf-8">
   <link rel="stylesheet" href="jeu.css"/>
+
   <script src="Sprite.js"></script>
+
   <script src="Joueur.js"></script>
+
   <script src="Objet.js"></script>
+
+  <script src="Start.js"></script>
+
   <script src="Regles.js"></script>
+
   <script src="Shop.js"></script>
+
   <script src="Scene.js"></script>
+
   <script src="Jeu.js"></script>
   <!-- Inclure ici les fichiers JavaScript necessaires a la scene. -->
   <script>
@@ -37,6 +46,21 @@
 
   <div id="scene">
    <!-- Definir ici les elements HTML qui seront manipules dans la scene. -->
+   <div id="starting">
+    <img style="justify-self: center;" src="img/logo.png" width="165" height="150" alt="Logo rond de joe" id="logo">
+    <img src="img/fermer.png" width="50" height="50" alt="bouton fermer" id="fermer">
+    <img src="img/couperson.png" width="50" height="50" alt="bouton fermer" id="son">
+    <img src="img/remettreleson.png" width="50" height="50" alt="bouton fermer" id="sonOui">
+    <h2 style="text-align: center;">Bienvenue dans le jardin de Joe !</h2>
+    <p>Devenez le jardinier le plus rapide en rammassant le plus de fruits dans le temps imparti !</p>
+
+    <h2 style="text-align: center;">Aides</h2>
+    <p>Dans ce petit jeu, vous avez 1 minute et 30 secondes pour rammassez des fruits !!!<br>
+     Vous trouvez sûrement un petit peu de sous dans les feuillages, <br>histoire de pouvoir s'équiper au fil de votre aventure :)<br>
+      Soyez rapide sinon ils disparaîtront, et gare aux autre objets qui traine sur la route !</p>
+
+    <button id="demarrer">DÉMARRER</button>
+   </div>
 
 
 
@@ -63,7 +87,7 @@
 
    <img src="img/menu_regles.png" width="75" height="75" alt="Menu des règles" id="menu">
    <img src="img/menu_shop.png" width="75" height="75" alt="Menu des règles" id="menu_">
-
+   <div class="fondFlou"></div>
    <div id="Shop">
     <img src="img/fermer.png" width="50" height="50" alt="bouton fermer" id="fermer_">
     <h1 style="text-align: center ;">Le Bac de Joe !</h1>
@@ -93,16 +117,6 @@
    <div id="regles">
      <img style="justify-self: center;" src="img/logo.png" width="165" height="150" alt="Logo rond de joe" id="logo">
      <img src="img/fermer.png" width="50" height="50" alt="bouton fermer" id="fermer">
-     <img src="img/couperson.png" width="50" height="50" alt="bouton fermer" id="son">
-     <img src="img/remettreleson.png" width="50" height="50" alt="bouton fermer" id="sonOui">
-     <h2 style="text-align: center;">Bienvenue dans le jardin de Joe !</h2>
-     <p>Devenez le jardinier le plus rapide en rammassant le plus de fruits dans le temps imparti !</p>
-
-     <h2 style="text-align: center;">Aides</h2>
-     <p>Dans ce petit jeu, vous avez 1 minute et 30 secondes pour rammassez des fruits !!!<br>
-      Vous trouvez sûrement un petit peu de sous dans les feuillages, <br>histoire de pouvoir s'équiper au fil de votre aventure :)<br>
-       Soyez rapide sinon ils disparaîtront, et gare aux autre objets qui traine sur la route !</p>
-
      <h3><i>Déplacement<i></h3>
        <ul>
          <li>⇧ : Se diriger vers le haut</li>

build/jeu.css

@@ -33,9 +33,8 @@ body {
 }
 
 #regles {
-  display: block;
+  display: none;
   z-index: 4;
-  position: absolute;
   box-shadow: 12px 12px 4px rgba(0, 0, 0, 0.664);
   padding: 20px;
   color: beige;
@@ -54,7 +53,6 @@ body {
   width: 550px;
   display: block;
   z-index: 4;
-  position: absolute;
   box-shadow: 12px 12px 4px rgba(0, 0, 0, 0.664);
   padding: 50px;
   color: beige;
@@ -69,6 +67,24 @@ body {
   font-weight: 400;
 }
 
+#starting {
+  display: none;
+  z-index: 4;
+  box-shadow: 12px 12px 4px rgba(0, 0, 0, 0.664);
+  padding: 20px;
+  color: beige;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  border: 4px solid black;
+  border-radius: 15px;
+  flex-direction: column;
+  background-image: url(img/background-rules.jpg);
+  background-size: cover;
+  /*font-family: "Outfit", sans-serif;*/
+  font-weight: 400;
+}
+
 #son {
   cursor: pointer;
   position: absolute;

source/Jeu.ts

@@ -8,11 +8,18 @@ class Jeu extends Scene {
  /* Declarer ici les attributs de la scene. */
 
  public joueur_ : Joueur;
+
+ public start_ : Start;
  public regles_ : Regles;
  public shop_ : Shop;
 
  public objet_ : Objet;
 
+ public intervalFruit: number;
+ public intervalPoison: number;
+ public intervalPlante: number;
+ public intervalCollision: number;
+
  private compteurScore : number;
  private compteurMonnaie : number;
 
@@ -44,39 +51,55 @@ class Jeu extends Scene {
  //--------------------------------------------------------------------------------------------start
  public override start() {
   /* Ecrire ici le code qui demarre la scene. */
+  this.start_ = new Start (document.getElementById("starting"), this);
 
 
+ }
 
-      //Création du joueur
-      this.joueur_ = new Joueur (document.createElement("img"),this);
-      this.joueur_.setImage("img/joe.png",60,80);
+ public partieCommencer() {
 
-      this.joueur_.setX(this.zoneDeJeu_.getWidth()/2 - this.joueur_.getWidth()/2);
-      this.joueur_.setY(this.zoneDeJeu_.getHeight()/2 - this.joueur_.getHeight()/2);
-      this.appendChild(this.joueur_);
-      this.joueur_.animer();
+  this.creerJoueur();
+  this.afficherRegles();
+  this.afficherShop();
+  this.creerObject();
 
-      //Création des boutons
-      this.regles_ = new Regles(document.getElementById("regles"), this);
-      this.shop_ = new Shop(document.getElementById("Shop"), this);
+ }
 
-      //Création des objets
-      this.objet_ = new Objet (document.createElement("img"),this);
-      //this.objet_.positionnement();
-      /*setInterval(() => {this.objet_.ajouterObjet();}, 1000);*/
+ public creerJoueur() {
+  this.joueur_ = new Joueur (document.createElement("img"),this);
+  this.joueur_.setImage("img/joe.png",60,80);
 
-      setInterval(() => {this.objet_.creerFruit();}, 3000);
-      setInterval(() => {this.objet_.creerPoison();}, 3000);
-      setInterval(() => {this.objet_.creerPlante();}, 3000);
-      setInterval(() => {this.joueur_.collisionObjet();}, 1000 / 144);
+  this.joueur_.setX(this.zoneDeJeu_.getWidth()/2 - this.joueur_.getWidth()/2);
+  this.joueur_.setY(this.zoneDeJeu_.getHeight()/2 - this.joueur_.getHeight()/2);
+  this.appendChild(this.joueur_);
+  this.joueur_.animer();
+ }
 
-      //Gestion des stats
+ public afficherRegles() {
+  this.regles_ = new Regles(document.getElementById("regles"), this);
+ }
 
+ public afficherShop() {
+  this.shop_ = new Shop(document.getElementById("Shop"), this);
+ }
 
+ //Création des objets
+ public creerObject() {
+  this.objet_ = new Objet (document.createElement("img"),this);
 
+  this.intervalFruit = setInterval(() => {this.objet_.creerFruit();}, 3000);
+  this.intervalPoison = setInterval(() => {this.objet_.creerPoison();}, 3000);
+  this.intervalPlante = setInterval(() => {this.objet_.creerPlante();}, 3000);
 
+  this.intervalCollision = setInterval(() => {this.joueur_.collisionObjet();}, 1000 / 144);
+ }
 
+ public figerObjet() {
+  clearInterval(this.intervalFruit);
+  clearInterval(this.intervalPoison);
+  clearInterval(this.intervalPlante);
 
+  clearInterval(this.intervalCollision);
  }
 
  public augmenterScore() {

source/Joueur.ts

@@ -50,7 +50,7 @@ class Joueur extends Sprite {
 
             if (this.scene_.objet_.listeObjets_[i] == this.scene_.objet_.recupPoison_) {
               console.log("tu as touché du poison");
-
+              this.scene_.reduireScore();
               this.popUpPoison();
               this.imagePopUpPoison();
 

source/Objet.ts

@@ -24,8 +24,8 @@ class Objet extends Sprite {
     super(element);
     this.scene_ = scene;
 
-    this.limitesX = 500;
-    this.limitesY = 500;
+    this.limitesX = 100;
+    this.limitesY = 100;
     this.listeObjets_=[];
 
     this.widthX = this.scene_.getWidth() - this.limitesX;

source/Regles.ts

@@ -1,7 +1,7 @@
 class Regles extends Sprite {
   public scene_ : Jeu;
 
-  private reglesDiv_: Sprite;
+  public reglesDiv_: Sprite;
   private menu_ : HTMLElement;
   private fermerImg_: HTMLElement;
   private son : HTMLElement;
@@ -61,6 +61,7 @@ class Regles extends Sprite {
 
   public cacher(): void {
     if (this.reglesDiv_) {
+      this.scene_.creerObject();
       this.fermetureMenu_.play();
         this.reglesDiv_.hide();
         this.menu_.style.display = 'block';
@@ -70,6 +71,7 @@ class Regles extends Sprite {
 
   public montrer() {
     if (this.menu_) {
+      this.scene_.figerObjet();
       this.ouvertureMenu_.play();
       this.musiqueDeFond.play();
       this.reglesDiv_.show();

source/Shop.ts

@@ -37,6 +37,7 @@ class Shop extends Sprite {
 
   public cacher(): void {
     if (this.shopDiv_) {
+      this.scene_.creerObject();
       this.fermetureMenu_.play();
         this.shopDiv_.hide();
         this.menu_.style.display = 'block';
@@ -46,6 +47,7 @@ class Shop extends Sprite {
 
   public montrer() {
     if (this.menu_) {
+      this.scene_.figerObjet();
       this.ouvertureMenu_.play();
       this.shopDiv_.show();
       this.menu_.style.display = 'none';

source/Start.ts

@@ -0,0 +1,41 @@
+class Start extends Sprite {
+
+  public scene_ : Jeu;
+
+  private StartDiv_: Sprite;
+  private bouton_ : Sprite;
+  private menu_ : HTMLElement;
+
+  private son : HTMLElement;
+  private sonOui : HTMLElement;
+
+
+  private musiqueDeFond : HTMLAudioElement;
+
+
+  public constructor(element: HTMLElement, scene: Jeu) {
+    super(element);
+    this.scene_ = scene;
+
+    this.StartDiv_ = new Sprite (document.getElementById('starting'));
+    this.bouton_ = new Sprite (document.getElementById('demarrer'));
+
+    this.son = document.getElementById('son');
+    this.sonOui = document.getElementById('sonOui');
+    this.musiqueDeFond = document.getElementById('musiqueFond') as HTMLAudioElement;
+
+    this.setX(document.documentElement.clientWidth /2 - this.getWidth()/2);
+    this.setY(document.documentElement.clientHeight /2 - this.getHeight()/2);
+
+    this.bouton_.addEventListener('click',this.demarrerPartie.bind(this));
+
+    this.musiqueDeFond.play();
+  }
+
+  public demarrerPartie() {
+    this.StartDiv_.hide();
+    this.scene_.partieCommencer();
+    this.musiqueDeFond.play();
+  }
+
+}