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

CASSE BRIQUE TERMINÉ

Browse Source
master
SSBU_Jules 6 months ago
parent 5b706d7d0c
commit f700848caa
7 changed files with 222 additions and 11 deletions
Show Stats Download Patch File Download Diff File

19
build/index.htm
Unescape View File

@ -23,8 +23,27 @@
</script>
</head>
<body onload="load()" onresize="scene.resize()">
<h1 id="textepause">PARTIE EN PAUSE</h1>
<img id="pause" src="pause.png" width="50px" height="50px" alt="bouton de restart">
<img id="unpause" src="unpause.png" width="50px" height="50px" alt="bouton de derestart">
<div id="defaite">
<h1>VOUS AVEZ PERDU : (</h1>
<h3 style="color: white;" id="scoreI"></h3>
<button id="recommencer">RECOMMENCER</button>
</div>
<div id="victoire">
<h1>VOUS AVEZ GAGNÉ : )</h1>
<h3 style="color: white;" id="scoreI"></h3>
<button id="recommencer">RECOMMENCER</button>
</div>
<h1 id="score"></h1>
<div id="scene">
<!-- Definir ici les elements HTML qui seront manipules dans la scene. -->
<div id="jeu"></div>

100
build/jeu.css
Unescape View File

@ -7,10 +7,10 @@ body {
height: 100%;
background-image: url(background.jpg);
cursor: none;
}
#scene {
cursor: none;
user-select: none;
/*overflow: hidden;*/
@ -28,6 +28,104 @@ body {
box-shadow: none;
}
#score {
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
right: 25px;
top: 25px;
color: black;
border-radius: 15px;
z-index: 4;
position: absolute;
background-color: wheat;
padding: 15px;
}
#pause {
cursor: pointer;
z-index: 20;
position: absolute;
right: 50px;
top: 150px;
}
#unpause {
display: none;
cursor: pointer;
z-index: 20;
position: absolute;
right: 50px;
top: 150px;
}
#textepause {
margin: auto;
color: red;
padding: 15px;
background-color: black;
border: black;
display: none;
text-align: center;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
#victoire {
z-index: 40;
position: absolute;
display: none;
text-align: center;
justify-content: center;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.603);
display: flex;
flex-direction: column;
}
#victoire h1 {
justify-content: center;
margin-left: 37%;
width: 250px;
height: 75px;
padding: 50px;
background-color: green;
}
#recommencer {
cursor: pointer;
border-radius: 15px;
width: 150;
height: 50;
padding: 25px;
background-color: wheat;
}
#defaite {
z-index: 40;
position: absolute;
display: none;
text-align: center;
justify-content: center;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.603);
display: flex;
flex-direction: column;
}
#defaite h1 {
justify-content: center;
margin-left: 37%;
width: 250px;
height: 75px;
padding: 50px;
background-color: red;
}
#fullscreen {
position: absolute;
right: 10px;

BIN
build/pause.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.5 KiB

BIN
build/unpause.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

24
source/Balle.ts
Unescape View File

@ -10,9 +10,9 @@ class Balle extends Anime {
public multiplicateur : number;
public vitesseMax : number;
private coller : boolean;
private ecouteurSouris : any;
public ecouteurSouris : any;
private timerAnimation : number;
public timerAnimation : number;
private scene_ : Jeu;
@ -53,7 +53,7 @@ class Balle extends Anime {
private nx_ : number;
private ny_ : number;
private bouger() {
public bouger() {
if (this.coller) {
this.nx_= this.scene_.palet_.getX() + this.scene_.palet_.getWidth()/2 - this.getWidth()/2;
@ -61,6 +61,11 @@ class Balle extends Anime {
this.setXY(this.nx_,this.ny_)
}
else if (this.scene_.compteurScore_ >= this.scene_.brique_.length) {
this.figer();
this.scene_.palet_.figer();
this.scene_.partieGagnee();
}
else {
@ -73,11 +78,13 @@ class Balle extends Anime {
this.setXY(this.nx_, this.ny_);
}
}
private vitesse() {
this.vitesseMax = 15;
this.vitesseMax = 8;
this.multiplicateur = 1.05;
this.vx *= this.multiplicateur;
this.vy*= this.multiplicateur;
@ -101,6 +108,7 @@ class Balle extends Anime {
if (this.ny_ >= this.ymax_) {
this.figer();
this.scene_.palet_.figer();
this.scene_.partiePerdue();
}
else if (this.ny_ <= this.ymin_) {
@ -125,11 +133,13 @@ class Balle extends Anime {
for (let i : number = 0; i<this.scene_.brique_.length ; i++) {
if (Balle.collision(this.getCircle(),this.scene_.brique_[i].getRectangle())) {
this.scene_.augmenterScore();
//this.ny_ = this.scene_.brique_[i].getY() - this.getHeight();
this.vy *= -1;
this.scene_.brique_[i].setXY(-1000000,-1000000);
this.scene_.removeChild(this.scene_.brique_[i]);
this.scene_.brique_[i] = null;
this.vy *= -1;
//this.scene_.brique_[i] = null;
}
}
@ -143,8 +153,6 @@ class Balle extends Anime {
this.vx = this.vx/vr * v;
this.vy = this.vy/vr * v;
console.log(this.vitesse())
}
public getVitesse() {

88
source/Jeu.ts
Unescape View File

@ -10,6 +10,18 @@ public balle_ : Balle;
public palet_ : Palet;
public brique_ : Array<Sprite>;
public score_ : HTMLElement;
public scoreFin_ : HTMLElement;
public compteurScore_ : number;
public defaite_ : HTMLElement;
public victoire_ : HTMLElement;
public recommencer_ : HTMLElement;
public pause_ : HTMLElement;
public textePause_ : HTMLElement;
public unpause_ : HTMLElement;
public zone_ : Sprite;
//-------------------------------------------------------------------------------------Constructeur
@ -22,6 +34,30 @@ public zone_ : Sprite;
this.zone_.setXY(10,10);
this.zone_.setWidth(this.getWidth()-20);
this.zone_.setHeight(this.getHeight()-20);
//Gestion des stats
this.compteurScore_ = 0;
this.score_ = document.getElementById('score');
this.score_.textContent = "Score : " + this.compteurScore_;
this.scoreFin_ = document.getElementById('scoreI');
//Gestion de la partie
this.defaite_ = document.getElementById('defaite');
this.defaite_.style.display = 'none';
this.victoire_ = document.getElementById('victoire');
this.victoire_.style.display = 'none';
this.recommencer_ = document.getElementById('recommencer');
this.pause_ = document.getElementById('pause');
this.textePause_ = document.getElementById('textepause');
this.unpause_ = document.getElementById('unpause');
this.clique();
}
//--------------------------------------------------------------------------------------------start
@ -85,21 +121,73 @@ public zone_ : Sprite;
}
public augmenterScore() {
this.compteurScore_ += 1;
this.score_.textContent = "Score : " + this.compteurScore_;
}
public partieGagnee() {
this.scoreFin_.textContent = "Votre score : " + this.compteurScore_ + "/" + this.brique_.length;
this.victoire_.style.display = "block";
}
public partiePerdue() {
this.scoreFin_.textContent = "Votre score : " + this.compteurScore_ + "/" + this.brique_.length;
this.defaite_.style.display = "block";
}
public clique() {
this.recommencer_.addEventListener('click',this.recommencer.bind(this));
this.pause_.addEventListener('click',this.pause.bind(this));
this.unpause_.addEventListener('click',this.unpause.bind(this));
}
public recommencer() {
this.clean();
setTimeout(() => {
this.start();
}, 1500);
}
//--------------------------------------------------------------------------------------------pause
public override pause() {
/* Ecrire ici le code qui met la scene en pause. */
this.textePause_.style.display = "block";
this.unpause_.style.display = "block";
this.pause_.style.display = "none";
this.balle_.figer();
this.palet_.figer();
}
//------------------------------------------------------------------------------------------unpause
public override unpause() {
/* Ecrire ici le code qui sort la scene de la pause. */
this.textePause_.style.display = "none";
this.unpause_.style.display = "none";
this.pause_.style.display = "block";
this.balle_.animer();
this.palet_.animer();
}
//--------------------------------------------------------------------------------------------clean
public override clean() {
/* Ecrire ici le code qui nettoie la scene en vue d'un redemarrage. */
this.defaite_.style.display = "none";
this.victoire_.style.display = "none";
this.compteurScore_ = 0;
this.score_.textContent = "Score : " + this.compteurScore_;
this.removeChild(this.balle_);
this.removeChild(this.palet_);
for (let i : number = 0; i < this.brique_.length; i++) {
this.brique_[i].setXY(-1000000,-1000000);
}
}
}

2
source/Palet.ts
Unescape View File

@ -23,8 +23,6 @@ class Palet extends Anime {
if (nx <= this.xmin_) nx = this.xmin_;
if (nx >= this.xmax_) nx = this.xmax_;
console.log(this.xmax_);
this.setX(nx);
}

Write Preview
Loading…
Cancel
Save