jules.cespedes
/
2024_SAE_401_JEUX_JOE_GARDEN
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

Menu de règle avec bouton d'ouverture et de fermeture

Browse Source
master
SSBU_Jules 1 year ago
parent bada22d0b6
commit f8ffc1825e
16 changed files with 199 additions and 7 deletions
Show Stats Download Patch File Download Diff File

5
build/Jeu.js
Unescape View File

@ -9,10 +9,11 @@ class Jeu extends Scene {
start() {
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();
this.regles_ = new Regles(document.getElementById("regles"), this);
}
pause() {
}

7
build/Joueur.js
Unescape View File

@ -10,6 +10,11 @@ class Joueur extends Sprite {
this.ecouteurClavier_ = (evt) => this.deplacer(evt);
this.ecouteurClavierStop_ = (evt) => this.stopperDeplacement(evt);
}
figer() {
window.removeEventListener("keydown", this.ecouteurClavier_);
window.removeEventListener("keyup", this.ecouteurClavierStop_);
clearInterval(this.timerAnimation);
}
animer() {
window.addEventListener("keydown", this.ecouteurClavier_);
window.addEventListener("keyup", this.ecouteurClavierStop_);
@ -59,7 +64,7 @@ class Joueur extends Sprite {
deplacer(evt) {
this.touchesEnfoncees[evt.key] = true;
if (this.timerAnimation === null) {
this.timerAnimation = setInterval(() => this.mettreAJourDeplacement(), 1000 / 120);
this.timerAnimation = setInterval(() => this.mettreAJourDeplacement(), 1000 / 144);
}
}
stopperDeplacement(evt) {

35
build/Regles.js
Unescape View File

@ -0,0 +1,35 @@
"use strict";
class Regles extends Sprite {
constructor(element, scene) {
super(element);
this.scene_ = scene;
this.reglesDiv_ = document.getElementById('regles');
this.fermerImg_ = document.getElementById('fermer');
this.fermetureMenu_ = document.getElementById('fermetureMenu');
this.ouvertureMenu_ = document.getElementById('ouvertureMenu');
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);
}
clique() {
if (this.fermerImg_) {
this.fermerImg_.addEventListener('click', this.cacher.bind(this));
this.menu_.addEventListener('click', this.montrer.bind(this));
}
}
cacher() {
if (this.reglesDiv_) {
this.fermetureMenu_.play();
this.reglesDiv_.style.display = 'none';
this.menu_.style.display = 'block';
}
}
montrer() {
if (this.menu_) {
this.ouvertureMenu_.play();
this.reglesDiv_.style.display = 'block';
this.menu_.style.display = 'none';
}
}
}

BIN
build/img/Background-scene.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 129 KiB

0
build/img/background.png → build/img/background-game.png
Unescape View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.5 KiB

After

Width:  |  Height:  |  Size: 9.5 KiB

BIN
build/img/background-rules.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 MiB

BIN
build/img/fermer.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

BIN
build/img/logo.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 134 KiB

BIN
build/img/menu_regles.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

27
build/index.htm
Unescape View File

@ -6,6 +6,7 @@
<link rel="stylesheet" href="jeu.css"/>
<script src="Sprite.js"></script>
<script src="Joueur.js"></script>
<script src="Regles.js"></script>
<script src="Scene.js"></script>
<script src="Jeu.js"></script>
<!-- Inclure ici les fichiers JavaScript necessaires a la scene. -->
@ -20,9 +21,35 @@
</script>
</head>
<body onload="load()" onresize="scene.resize()">
<div class="audios">
<audio src="sfx/ouvrirMenu.wav" id="ouvertureMenu"></audio>
<audio src="sfx/fermerMenu.wav" id="fermetureMenu"></audio>
</div>
<div id="scene">
<!-- Definir ici les elements HTML qui seront manipules dans la scene. -->
<div id="jeu"></div>
<img src="img/menu_regles.png" width="75" height="75" alt="Menu des règles" id="menu">
<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">
<h2 style="text-align: center;">Bienvenue dans le jardin de Joe !</h2>
<p>Devenez le jardinier le plus rapide en rammassant le plus de vos récoltes dans un temps imparti !</p>
<h2 style="text-align: center;">Aides</h2>
<p>Dans ce petit jeu, vous avez 1 minute et 30 secondes<br> pour rammassez des fruits, des légumes ou des plantes !<br>
Soyez rapide sinon ils disparaîtront, vous pourriez même tomber sur de mauvaises surprises...</p>
<h3><i>Déplacement<i></h3>
<ul>
<li>⇧ : Se diriger vers le haut</li>
<li>⇨ : Se diriger vers la droite</li>
<li>⇦ : Se diriger vers la gauche</li>
<li>⇩ : Se dirigier vers le bas</li>
</ul>
</div>
<!-- Le code ci-dessous permet affiche un bouton pour le plein ecran -->
<!-- <div id="fullscreen" onmousedown="scene.toggleFullscreen(event);">F</div> -->

64
build/jeu.css
Unescape View File

@ -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;
}

BIN
build/sfx/fermerMenu.wav
View File

Binary file not shown.

BIN
build/sfx/ouvrirMenu.wav
View File

Binary file not shown.

9
source/Jeu.ts
Unescape View File

@ -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

8
source/Joueur.ts
Unescape View File

@ -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);
}
}

51
source/Regles.ts
Unescape View File

@ -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';
}
}
}
Write Preview
Loading…
Cancel
Save