From bada22d0b6d236f41b56bc5ce97158524f6ac254 Mon Sep 17 00:00:00 2001 From: SSBU_Jules Date: Fri, 17 May 2024 05:28:12 +0200 Subject: [PATCH] Deplacements fluides (en diagonale aussi) --- build/Joueur.js | 80 +++++++++++++++------- source/Jeu.ts | 1 + source/Joueur.ts | 170 +++++++++++++++++++++++++++++------------------ 3 files changed, 162 insertions(+), 89 deletions(-) diff --git a/build/Joueur.js b/build/Joueur.js index b9735a4..2019270 100644 --- a/build/Joueur.js +++ b/build/Joueur.js @@ -3,40 +3,70 @@ class Joueur extends Sprite { constructor(element, scene) { super(element); this.scene_ = scene; - this.timerAnimation = 0; - this.ecouteurClavier_ = (evt) => (this.deplacer(evt)); - this.vitesse_ = 2; - this.initVitesse(this.vitesse_); + this.timerAnimation = null; + this.vitesse_ = 6; + this.vitesseMax_ = 15; + this.touchesEnfoncees = {}; + this.ecouteurClavier_ = (evt) => this.deplacer(evt); + this.ecouteurClavierStop_ = (evt) => this.stopperDeplacement(evt); } animer() { - this.timerAnimation = setInterval(() => { this.deplacer(this.ecouteurClavier_); }, 1000 / 60); window.addEventListener("keydown", this.ecouteurClavier_); + window.addEventListener("keyup", this.ecouteurClavierStop_); } - figer() { - clearInterval(this.timerAnimation); - window.removeEventListener("keydown", this.ecouteurClavier_); + deplacementGauche() { + this.setX(this.getX() - this.vitesse_); } - deplacer(evt) { - console.log(evt.key); - if (evt.key == "ArrowLeft") { - this.nx_ = this.getX() - this.vx_; - this.setX(this.nx_); + deplacementDroite() { + this.setX(this.getX() + this.vitesse_); + } + deplacementHaut() { + this.setY(this.getY() - this.vitesse_); + } + deplacementBas() { + this.setY(this.getY() + this.vitesse_); + } + mettreAJourDeplacement() { + if (this.touchesEnfoncees["ArrowLeft"] && this.touchesEnfoncees["ArrowUp"]) { + this.deplacementGauche(); + this.deplacementHaut(); + } + else if (this.touchesEnfoncees["ArrowLeft"] && this.touchesEnfoncees["ArrowDown"]) { + this.deplacementGauche(); + this.deplacementBas(); + } + else if (this.touchesEnfoncees["ArrowRight"] && this.touchesEnfoncees["ArrowUp"]) { + this.deplacementDroite(); + this.deplacementHaut(); } - else if (evt.key == "ArrowRight") { - this.nx_ = this.getX() + this.vx_; - this.setX(this.nx_); + else if (this.touchesEnfoncees["ArrowRight"] && this.touchesEnfoncees["ArrowDown"]) { + this.deplacementDroite(); + this.deplacementBas(); } - else if (evt.key == "ArrowUp") { - this.ny_ = this.getY() + this.vy_; - this.setY(this.ny_); + else if (this.touchesEnfoncees["ArrowLeft"]) { + this.deplacementGauche(); } - else if (evt.key == "ArrowDown") { - this.ny_ = this.getY() - this.vy_; - this.setY(this.ny_); + else if (this.touchesEnfoncees["ArrowRight"]) { + this.deplacementDroite(); + } + else if (this.touchesEnfoncees["ArrowUp"]) { + this.deplacementHaut(); + } + else if (this.touchesEnfoncees["ArrowDown"]) { + this.deplacementBas(); + } + } + deplacer(evt) { + this.touchesEnfoncees[evt.key] = true; + if (this.timerAnimation === null) { + this.timerAnimation = setInterval(() => this.mettreAJourDeplacement(), 1000 / 120); } } - initVitesse(v) { - this.vx_ = v; - this.vy_ = -v; + stopperDeplacement(evt) { + delete this.touchesEnfoncees[evt.key]; + if (Object.keys(this.touchesEnfoncees).length === 0 && this.timerAnimation !== null) { + clearInterval(this.timerAnimation); + this.timerAnimation = null; + } } } diff --git a/source/Jeu.ts b/source/Jeu.ts index 1b108e4..dad77a3 100644 --- a/source/Jeu.ts +++ b/source/Jeu.ts @@ -34,6 +34,7 @@ class Jeu extends Scene { this.joueur_.setY(this.getHeight()/2 - this.getHeight()/2); this.appendChild(this.joueur_); this.joueur_.animer(); + } //--------------------------------------------------------------------------------------------pause diff --git a/source/Joueur.ts b/source/Joueur.ts index 2867f74..6f6dd71 100644 --- a/source/Joueur.ts +++ b/source/Joueur.ts @@ -1,90 +1,132 @@ class Joueur extends Sprite { + public scene_: Jeu; - /*public xmin_ : number; - public xmax_ : number; - public ymin_ : number; - public ymax_ : number;*/ + public vitesse_: number; + public vitesseMax_: number; - public vx_ : number; - public vy_ : number; - public vitesse_ : number; + public timerAnimation: number | null; - public timerAnimation : number; - public scene_ : Jeu; - - - public ecouteurClavier_ : any; - - public constructor(element : HTMLElement, scene : Jeu) { + public ecouteurClavier_: any; + public ecouteurClavierStop_: any; + private touchesEnfoncees: { [key: string]: boolean }; + public constructor(element: HTMLElement, scene: Jeu) { super(element); this.scene_ = scene; - this.timerAnimation = 0; - this.ecouteurClavier_ = (evt : KeyboardEvent) => (this.deplacer(evt)); - - this.vitesse_ = 2; - this.initVitesse(this.vitesse_) - + this.timerAnimation = null; - } + this.vitesse_ = 6; + this.vitesseMax_ = 15; - //Lancement de l'anmation (appelée dans Jeu.ts) - public animer() { - this.timerAnimation = setInterval( () => {this.deplacer(this.ecouteurClavier_)},1000/60); - window.addEventListener("keydown", this.ecouteurClavier_); + this.touchesEnfoncees = {}; + this.ecouteurClavier_ = (evt: KeyboardEvent) => this.deplacer(evt); + this.ecouteurClavierStop_ = (evt: KeyboardEvent) => this.stopperDeplacement(evt); } - //Stop - public figer() { - clearInterval(this.timerAnimation); - window.removeEventListener("keydown", this.ecouteurClavier_); + public animer() { + window.addEventListener("keydown", this.ecouteurClavier_); + window.addEventListener("keyup", this.ecouteurClavierStop_); + } + + private deplacementGauche() { + this.setX(this.getX() - this.vitesse_); + } + + private deplacementDroite() { + this.setX(this.getX() + this.vitesse_); + } + + private deplacementHaut() { + this.setY(this.getY() - this.vitesse_); + } + + private deplacementBas() { + this.setY(this.getY() + this.vitesse_); + } + + /* public deplacer(evt: KeyboardEvent) { + if (this.timerAnimation !== null) return; + console.log(evt.key); + if (evt.key === "ArrowLeft") { + this.timerAnimation = setInterval(() => this.deplacementGauche(), 1000 / 120); + } + + else if (evt.key === "ArrowRight") { + this.timerAnimation = setInterval(() => this.deplacementDroite(), 1000 / 120); + } + + else if (evt.key === "ArrowUp") { + this.timerAnimation = setInterval(() => this.deplacementHaut(), 1000 / 120); + } + + else if (evt.key === "ArrowDown") { + this.timerAnimation = setInterval(() => this.deplacementBas(), 1000 / 120); + } + }*/ + private mettreAJourDeplacement() { + + //Mouvement en diagonales + if (this.touchesEnfoncees["ArrowLeft"] && this.touchesEnfoncees["ArrowUp"]) { + this.deplacementGauche(); + this.deplacementHaut(); + } + else if (this.touchesEnfoncees["ArrowLeft"] && this.touchesEnfoncees["ArrowDown"]) { + this.deplacementGauche(); + this.deplacementBas(); + } + else if (this.touchesEnfoncees["ArrowRight"] && this.touchesEnfoncees["ArrowUp"]) { + this.deplacementDroite(); + this.deplacementHaut(); + } + else if (this.touchesEnfoncees["ArrowRight"] && this.touchesEnfoncees["ArrowDown"]) { + this.deplacementDroite(); + this.deplacementBas(); + + //Mouvments normaux + } else if (this.touchesEnfoncees["ArrowLeft"]) { + this.deplacementGauche(); + } else if (this.touchesEnfoncees["ArrowRight"]) { + this.deplacementDroite(); + } else if (this.touchesEnfoncees["ArrowUp"]) { + this.deplacementHaut(); + } else if (this.touchesEnfoncees["ArrowDown"]) { + this.deplacementBas(); + } } + public deplacer(evt: KeyboardEvent) { + this.touchesEnfoncees[evt.key] = true; + if (this.timerAnimation === null) { + this.timerAnimation = setInterval(() => this.mettreAJourDeplacement(), 1000 / 120); + } + } - //Déplacement du personnage - private nx_ : number; - private ny_ : number; - - - public deplacer(evt : KeyboardEvent){ - console.log(evt.key); - - - //appel des déplacements du personnage - if (evt.key == "ArrowLeft") { - this.nx_ = this.getX() - this.vx_; - this.setX(this.nx_); - } - else if (evt.key == "ArrowRight") { - this.nx_ = this.getX() + this.vx_; - this.setX(this.nx_); - } - else if (evt.key == "ArrowUp") { - this.ny_ = this.getY() + this.vy_; - this.setY(this.ny_); - } - else if (evt.key == "ArrowDown") { - this.ny_ = this.getY() - this.vy_; - this.setY(this.ny_); - } - } -public initVitesse(v : number) { - this.vx_ = v; - this.vy_ = -v; -} + //J'ai crée cette fonction avec ChatGPT + //J'avais trouvé tout seul le moyen d'arrêter mon personnage avec un deuxième écouteur, mais en appuyant sur deux touche simulatement, cela faisait n'importe quoi, j'ai donc rectifié ma fonctione de base qui était celle-ci : + /* public nondeplacer(evt : KeyboardEvent) { + console.log(evt.key); + if (evt.key == "ArrowLeft") {clearInterval(this.timerAnimation);} + else if (evt.key == "ArrowRight") {clearInterval(this.timerAnimation);} + else if (evt.key == "ArrowUp") {clearInterval(this.timerAnimation);} + else if (evt.key == "ArrowDown") {clearInterval(this.timerAnimation);} + }*/ + public stopperDeplacement(evt: KeyboardEvent) { + delete this.touchesEnfoncees[evt.key]; + if (Object.keys(this.touchesEnfoncees).length === 0 && this.timerAnimation !== null) { + clearInterval(this.timerAnimation); + this.timerAnimation = null; + } + } /*public setLimites() { - this.xmax_ = 0; this.xmin_ = 0; this.ymax_ = 0; this.ymin_ = 0; - }*/ - -} \ No newline at end of file +}