update

JhonFXA · Nov 12, 2023 · 730b16c · 730b16c
1 parent 73152ea
commit 730b16c
Show file tree

Hide file tree

Showing 8 changed files with 258 additions and 20 deletions.
diff --git a/html/game.html b/html/game.html
@@ -11,6 +11,13 @@
 <body>
     <!-- red container div -->
     <div class="game-display">
+        <div class="match-result">
+            <h1 id="winning-result"><span id="winner"></span> WINS!</h1>
+            <nav>
+                <button onclick="rematch()" id="button">REMATCH</button>
+                <button onclick="changeCharacter()" id="button">CHANGE CHARACTER</button>
+            </nav>
+        </div>
         <div class="players-info">
             <img class="character1-icon" src="" alt="">
             <div class="player1-info">

diff --git a/src/css/game.css b/src/css/game.css
@@ -7,6 +7,56 @@ body {
     position: relative;
 }
 
+.match-result {
+    z-index: 1;
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    background-color: transparent;
+    transition: background-color 5s;
+}
+
+nav {
+    display: none;
+    flex-direction: column;
+    position: absolute;
+    bottom: 100px;
+}
+
+button {
+    background-image: radial-gradient(rgb(43, 43, 26), rgb(43, 43, 26));
+    color: #fff;
+    width: 400px;
+    height: 100px;
+    font-size: 30px;
+    border: groove 4px rgb(190, 153, 93);
+    cursor: pointer;
+    transition: ease 0.5s;
+    margin-bottom: 20px;
+    padding: 20px;
+    opacity: 0;
+}
+
+button:hover {
+    background-image: radial-gradient(rgb(252, 214, 0), rgb(165, 117, 44));
+    color: #000;
+}
+
+#winning-result {
+    font-size: 50px;
+    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
+    letter-spacing: 10px;
+    text-shadow: #000 3px 3px 0;
+    color: #fff;
+    display: none;
+    margin-bottom: 40px;
+
+}
+
 .players-info {
     display: flex;
     justify-content: center;
@@ -89,4 +139,22 @@ body {
     font-weight: bolder;
     font-size: 60px;
     font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+}
+
+.tremer {
+    animation: tremer 0.5s;
+}
+
+@keyframes tremer {
+    0% {
+        transform: translate(0, 0);
+    }
+
+    10%, 30%, 50%, 70%, 90% {
+        transform: translate(-5px, -5px);
+    }
+
+    20%, 40%, 60%, 80%, 100% {
+        transform: translate(5px, 5px);
+    }
 }
diff --git a/src/imagens/game-assets/tanjiro/tanjiro-fall.png b/src/imagens/game-assets/tanjiro/tanjiro-fall.png
diff --git a/src/imagens/game-assets/zenitsu/zenitsu-fall.png b/src/imagens/game-assets/zenitsu/zenitsu-fall.png
diff --git a/src/js/classes.js b/src/js/classes.js
@@ -62,6 +62,14 @@ class Sprite {
     }
 
     animateFrames(){
+
+        if (this.image === this.sprites.fall.image) {
+            if (this.framesCurrent >= this.sprites.fall.framesMax - 1) {
+                // Aqui, ao atingir o último quadro, você pode interromper a animação.
+                return;
+
+            }
+        }
         this.framesElapsed++
 
         if(this.framesElapsed % this.framesHold === 0) {
@@ -93,7 +101,8 @@ class Character extends Sprite {
         direction,
         canAttack = true,
         canMove = true,
-        strikedFirst
+        strikedFirst,
+        gotHit = false
     }){
         super({
             position,
@@ -128,6 +137,9 @@ class Character extends Sprite {
         this.canAttack = canAttack
         this.canMove = canMove
         this.strikedFirst = strikedFirst
+        this.gotHit = gotHit
+
+
 
 
         for (const sprite in this.sprites){
@@ -161,11 +173,19 @@ class Character extends Sprite {
             this.position.x = canvas.width - this.width
         }
 
+        if(this.health === 0){
+            this.switchSprite('fall')
+            this.canMove = false
+
+        }
+
+
     }
+
 
     attack() {
         this.isAttacking = true
-        this.strikedFirst = true
+        // this.strikedFirst = true
 
         this.canAttack = false
 
@@ -175,22 +195,27 @@ class Character extends Sprite {
     }
 
     takeHit(){
-        this.switchSprite('take-hit')
-        this.canMove = false
         if(this.health > 0){
+            this.gotHit = true
+            this.isAttacking = false
+            this.switchSprite('take-hit')
+            this.canMove = false
             this.health -= 4
         }
     }
 
     switchSprite(sprite) {
-        //overriding all other animations with the attack animation
-        if (this.image === this.sprites.attack.image && this.framesCurrent < this.sprites.attack.framesMax - 1  || this.image === this.sprites.attackInverted.image && this.framesCurrent < this.sprites.attackInverted.framesMax - 1) {
+        if(this.image === this.sprites.fall.image && this.framesCurrent < this.sprites.fall.framesMax){
             return
         }
         //override when character gets hit
         if(this.image === this.sprites.takeHit.image && this.framesCurrent < this.sprites.takeHit.framesMax - 1){
             return
         }
+        //overriding all other animations with the attack animation
+        if (this.image === this.sprites.attack.image && this.framesCurrent < this.sprites.attack.framesMax - 1  && this.gotHit === false || this.image === this.sprites.attackInverted.image && this.framesCurrent < this.sprites.attackInverted.framesMax - 1 && this.gotHit === false ) {
+            return
+        }
 
 
 
@@ -200,6 +225,7 @@ class Character extends Sprite {
                     this.strikedFirst = false
                     this.canAttack = true
                     this.canMove = true
+                    this.gotHit = false
                     this.image = this.sprites.idle.image
                     this.framesMax = this.sprites.idle.framesMax
                     this.framesCurrent = 0
@@ -213,6 +239,7 @@ class Character extends Sprite {
                     this.strikedFirst = false
                     this.canAttack = true
                     this.canMove = true
+                    this.gotHit = false
                     this.image = this.sprites.idleInverted.image
                     this.framesMax = this.sprites.idleInverted.framesMax
                     this.framesCurrent = 0
@@ -248,6 +275,7 @@ class Character extends Sprite {
                     this.framesCurrent = 0
                     this.framesHold = this.sprites.jump.framesHold
                     this.scale = this.sprites.jump.scale
+                    this.offset.y = this.sprites.jump.offset.y
                 }
                 break;
             case 'jump-inverted':
@@ -257,6 +285,7 @@ class Character extends Sprite {
                     this.framesCurrent = 0
                     this.framesHold = this.sprites.jumpInverted.framesHold
                     this.scale = this.sprites.jumpInverted.scale
+                    this.offset.y = this.sprites.jumpInverted.offset.y
                 }
                 break;
             case 'attack':
@@ -290,6 +319,17 @@ class Character extends Sprite {
                     this.offset.y = this.sprites.takeHit.offset.y
                 }
                 break;
+            case 'fall':
+                if(this.image !== this.sprites.fall.image){
+                    this.canAttack = false
+                    this.image = this.sprites.fall.image
+                    this.framesMax = this.sprites.fall.framesMax
+                    this.framesCurrent = 0
+                    this.framesHold = this.sprites.fall.framesHold
+                    this.scale = this.sprites.fall.scale
+                    this.offset.y = this.sprites.fall.offset.y
+                }
+                break;
         }
     }
 }