+
+ 
+ 
+
+
diff --git a/build/jeu.css b/build/jeu.css
index 624490e..ac8afa5 100644
--- a/build/jeu.css
+++ b/build/jeu.css
@@ -1,3 +1,7 @@
+
+@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
+
+
body {
position: absolute;
overflow: hidden;
@@ -18,10 +22,68 @@ body {
}
#jeu {
- background-image: url(img/background.png);
+ background-image: url(img/background-game.png);
background-size: cover;
}
+#regles {
+ display: block;
+ z-index: 4;
+ position: absolute;
+ box-shadow: 12px 12px 4px rgba(0, 0, 0, 0.664);
+ padding: 20px;
+ color: beige;
+ display: flex;
+ 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;
+}
+
+#menu {
+ display: none;
+ cursor: pointer;
+ transform: rotate(0deg);
+ position: absolute;
+ right: 20px;
+ bottom: 20px;
+ transition: transform;
+}
+
+#menu:hover {
+ transform: rotate(-5deg);
+ transition: 0.2s;
+
+}
+
+#fermer {
+ transition: all;
+ position: absolute;
+ right: 20px;
+ top: 20px;
+ cursor: pointer;
+}
+#fermer:hover {
+ width: 55px;
+ height: 55px;
+ transition-duration: 0.2s;
+}
+
+#regles ul {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+}
+
+#logo {
+ margin: auto;
+ padding-top: 10px;
+}
+
#scene.fullscreen {
box-shadow: none;
}
diff --git a/build/sfx/fermerMenu.wav b/build/sfx/fermerMenu.wav
new file mode 100644
index 0000000..4675d28
Binary files /dev/null and b/build/sfx/fermerMenu.wav differ
diff --git a/build/sfx/ouvrirMenu.wav b/build/sfx/ouvrirMenu.wav
new file mode 100644
index 0000000..274e20f
Binary files /dev/null and b/build/sfx/ouvrirMenu.wav differ
diff --git a/source/Jeu.ts b/source/Jeu.ts
index dad77a3..b3fff1f 100644
--- a/source/Jeu.ts
+++ b/source/Jeu.ts
@@ -7,6 +7,7 @@ class Jeu extends Scene {
//----------------------------------------------------------------------------------------Attributs
/* Declarer ici les attributs de la scene. */
public joueur_ : Joueur;
+ public regles_ : Regles;
private zoneDeJeu_ : Sprite;
@@ -30,11 +31,15 @@ class Jeu extends Scene {
this.joueur_ = new Joueur (document.createElement("img"),this);
this.joueur_.setImage("img/joe.png",50,60);
- this.joueur_.setX(this.getWidth()/2 - this.getWidth()/2);
- this.joueur_.setY(this.getHeight()/2 - this.getHeight()/2);
+ 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();
+ //Création des boutons
+ this.regles_ = new Regles(document.getElementById("regles"), this);
+
+
}
//--------------------------------------------------------------------------------------------pause
diff --git a/source/Joueur.ts b/source/Joueur.ts
index 6f6dd71..8c6661c 100644
--- a/source/Joueur.ts
+++ b/source/Joueur.ts
@@ -23,6 +23,12 @@ class Joueur extends Sprite {
this.ecouteurClavierStop_ = (evt: KeyboardEvent) => this.stopperDeplacement(evt);
}
+ public figer() {
+ window.removeEventListener("keydown", this.ecouteurClavier_);
+ window.removeEventListener("keyup", this.ecouteurClavierStop_);
+ clearInterval(this.timerAnimation);
+ }
+
public animer() {
window.addEventListener("keydown", this.ecouteurClavier_);
window.addEventListener("keyup", this.ecouteurClavierStop_);
@@ -98,7 +104,7 @@ class Joueur extends Sprite {
public deplacer(evt: KeyboardEvent) {
this.touchesEnfoncees[evt.key] = true;
if (this.timerAnimation === null) {
- this.timerAnimation = setInterval(() => this.mettreAJourDeplacement(), 1000 / 120);
+ this.timerAnimation = setInterval(() => this.mettreAJourDeplacement(), 1000 / 144);
}
}
diff --git a/source/Regles.ts b/source/Regles.ts
new file mode 100644
index 0000000..da87231
--- /dev/null
+++ b/source/Regles.ts
@@ -0,0 +1,51 @@
+class Regles extends Sprite {
+ public scene_ : Jeu;
+
+ private reglesDiv_: HTMLElement;
+ private menu_ : HTMLElement;
+ private fermerImg_: HTMLElement;
+ private ouvertureMenu_: HTMLAudioElement;
+ private fermetureMenu_: HTMLAudioElement;
+
+
+ public constructor(element: HTMLElement, scene: Jeu) {
+ super(element);
+ this.scene_ = scene;
+
+ this.reglesDiv_ = document.getElementById('regles');
+ this.fermerImg_ = document.getElementById('fermer');
+ this.fermetureMenu_ = document.getElementById('fermetureMenu') as HTMLAudioElement;
+ this.ouvertureMenu_ = document.getElementById('ouvertureMenu') as HTMLAudioElement;
+
+ this.menu_ = document.getElementById('menu');
+ this.clique();
+
+ this.setX(document.documentElement.clientWidth /2 - this.getWidth()/2);
+ this.setY(document.documentElement.clientHeight /2 - this.getHeight()/2);
+ }
+
+ public clique(): void {
+ if (this.fermerImg_) {
+
+ this.fermerImg_.addEventListener('click', this.cacher.bind(this));
+ this.menu_.addEventListener('click', this.montrer.bind(this));
+ }
+}
+
+ public cacher(): void {
+ if (this.reglesDiv_) {
+ this.fermetureMenu_.play();
+ this.reglesDiv_.style.display = 'none';
+ this.menu_.style.display = 'block';
+
+ }
+ }
+
+ public montrer() {
+ if (this.menu_) {
+ this.ouvertureMenu_.play();
+ this.reglesDiv_.style.display = 'block'
+ this.menu_.style.display = 'none';
+ }
+ }
+}
\ No newline at end of file
+
+ Bienvenue dans le jardin de Joe !
+Devenez le jardinier le plus rapide en rammassant le plus de vos récoltes dans un temps imparti !
+ +Aides
+Dans ce petit jeu, vous avez 1 minute et 30 secondes
pour rammassez des fruits, des légumes ou des plantes !
+ Soyez rapide sinon ils disparaîtront, vous pourriez même tomber sur de mauvaises surprises...
Déplacement
+-
+
- ⇧ : Se diriger vers le haut +
- ⇨ : Se diriger vers la droite +
- ⇦ : Se diriger vers la gauche +
- ⇩ : Se dirigier vers le bas +