corrigindo bugs

src/css/game.css

@@ -1,5 +1,10 @@
 body {
     overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    background-color: black;
 }
 
 .game-display {

src/js/classes.js

@@ -101,7 +101,6 @@ class Character extends Sprite {
         direction,
         canAttack = true,
         canMove = true,
-        strikedFirst,
         gotHit = false
     }){
         super({
@@ -115,7 +114,7 @@ class Character extends Sprite {
         this.width = 80
         this.height = 150
         this.lastKey
-        this.movSpeed = 8
+        this.movSpeed = 7
         this.jumps = 2
         this.attackBox = {
             position: {
@@ -136,7 +135,6 @@ class Character extends Sprite {
         this.direction = direction
         this.canAttack = canAttack
         this.canMove = canMove
-        this.strikedFirst = strikedFirst
         this.gotHit = gotHit
 
 
@@ -185,10 +183,7 @@ class Character extends Sprite {
 
     attack() {
         this.isAttacking = true
-        // this.strikedFirst = true
-
         this.canAttack = false
-
         setTimeout(()=>{
             this.canAttack = true
         },700)
@@ -222,7 +217,6 @@ class Character extends Sprite {
         switch(sprite) {
             case 'idle':
                 if(this.image !== this.sprites.idle.image){
-                    this.strikedFirst = false
                     this.canAttack = true
                     this.canMove = true
                     this.gotHit = false
@@ -236,7 +230,6 @@ class Character extends Sprite {
                 break;
             case 'idle-inverted':
                 if(this.image !== this.sprites.idleInverted.image){
-                    this.strikedFirst = false
                     this.canAttack = true
                     this.canMove = true
                     this.gotHit = false
@@ -250,6 +243,8 @@ class Character extends Sprite {
                 break;
             case 'run':
                 if(this.image !== this.sprites.run.image){
+                    this.canAttack = true
+                    this.canMove = true
                     this.image = this.sprites.run.image
                     this.framesMax = this.sprites.run.framesMax
                     this.framesCurrent = 0
@@ -260,6 +255,8 @@ class Character extends Sprite {
                 break;
             case 'run-inverted':
                 if(this.image !== this.sprites.runInverted.image){
+                    this.canAttack = true
+                    this.canMove = true
                     this.image = this.sprites.runInverted.image
                     this.framesMax = this.sprites.runInverted.framesMax
                     this.framesCurrent = 0

src/js/game.js

@@ -6,8 +6,8 @@ canvas.height = window.innerHeight
 
 context.fillRect(0,0,canvas.width,canvas.height)
 
-const gravity = 0.7
-const jumpHeight = -15
+const gravity = 0.35
+const jumpHeight = -12
 
 const background = new SpriteScenery({
     position: {
@@ -327,11 +327,8 @@ function animate() {
             rectangle1: player1,
             rectangle2: player2
         }) && 
-        player1.isAttacking && player1.framesCurrent === 4 && !player2.strikedFirst && player2.health > 0
+        player1.isAttacking && player1.framesCurrent === 4 && player2.health > 0
         ) {
-
-            player1.strikedFirst = true
-            player2.strikedFirst = false
             player2.takeHit()
             if(player2.health === 0){
                 document.getElementById('winning-result').style.display = 'block'
@@ -372,10 +369,8 @@ function animate() {
             rectangle1: player2,
             rectangle2: player1
         }) && 
-        player2.isAttacking && player2.framesCurrent === 4 && !player1.strikedFirst && player1.health > 0
+        player2.isAttacking && player2.framesCurrent === 4 && player1.health > 0
         ) {
-            player2.strikedFirst = true
-            player1.strikedFirst = false
             player1.takeHit()
             if(player1.health === 0){
                 document.getElementById('winning-result').style.display = 'block'
@@ -431,11 +426,11 @@ animate()
 
 
 let controlSwitch = 0
-window.addEventListener(`keydown`, (event) =>{
+
+window.addEventListener('keydown', (event) =>{
 
     //Player 1 keys
     switch (event.key) {
-
         case `Control`:
             keys.Control.pressed = true
             controlSwitch++
@@ -469,16 +464,6 @@ window.addEventListener(`keydown`, (event) =>{
                 player1.jumps--
             }
             break
-        case ` `:
-            if(player1.canAttack && player1.canMove && !player2.strikedFirst){
-                player1.attack()
-                if(player1.position.x + player1.width <= player2.position.x + player2.width) {
-                    player1.switchSprite(`attack`)
-                } else {
-                    player1.switchSprite(`attack-inverted`)
-                }
-            }
-            break
 
     //Player 2 keys
         case `ArrowRight`:
@@ -489,14 +474,36 @@ window.addEventListener(`keydown`, (event) =>{
             keys.ArrowLeft.pressed = true
             player2.lastKey = `ArrowLeft`
             break
-            case `ArrowUp`:
-                if(player2.jumps>0 && player2.canMove){
-                    player2.velocity.y = jumpHeight
-                    player2.jumps--
+        case `ArrowUp`:
+            if(player2.jumps>0 && player2.canMove){
+                player2.velocity.y = jumpHeight
+                player2.jumps--
+            }
+            break
+    }
+})
+
+
+window.addEventListener('keyup', (event) =>{
+
+    switch (event.key) {
+    //Player 1 keys
+        case ` `:
+            if(player1.canAttack && player1.canMove){
+                player1.attack()
+                if(player1.position.x + player1.width <= player2.position.x + player2.width) {
+                    player1.switchSprite(`attack`)
+                } else {
+                    player1.switchSprite(`attack-inverted`)
                 }
+            }
+            break
+            case 'q':
                 break
-            case `.`:
-                if(player2.canAttack && player2.canMove && !player1.strikedFirst){
+
+    //Player 2 keys
+            case `3`:
+                if(player2.canAttack && player2.canMove){
                     player2.attack()
                     if(player1.position.x + player1.width >= player2.position.x + player2.width) {
                         player2.switchSprite(`attack`)
@@ -505,8 +512,6 @@ window.addEventListener(`keydown`, (event) =>{
                     }
                 }
                 break
-
-
         }
 })
 window.addEventListener(`keyup`, (event) =>{

src/js/sprite-default-settings.js

@@ -2,15 +2,15 @@ const characterDefaultSettings = {
     tanjiro: {
         idle: {
             framesMax: 8,
-            framesHold: 10,
+            framesHold: 20,
             scale: 3,
             offset: {
                 y: 0
             }
         },
         idleInverted: {
             framesMax: 8,
-            framesHold: 10,
+            framesHold: 20,
             scale: 3,
             offset: {
                 y: 0
@@ -34,47 +34,47 @@ const characterDefaultSettings = {
         },
         jump: {
             framesMax: 2,
-            framesHold: 10,
+            framesHold: 20,
             scale: 3,
             offset: {
                 y: 0
             }
         },
         jumpInverted: {
             framesMax: 2,
-            framesHold: 10,
+            framesHold: 20,
             scale: 3,
             offset: {
                 y: 0
             }
         },
         attack: {
             framesMax: 8,
-            framesHold: 5,
+            framesHold: 7,
             scale: 3,
             offset: {
                 y: 0
             }
         },
         attackInverted: {
             framesMax: 8,
-            framesHold: 5,
+            framesHold: 7,
             scale: 3,
             offset: {
                 y: 0
             }
         },
         takeHit: {
             framesMax: 5,
-            framesHold: 5,
+            framesHold: 10,
             scale: 3,
             offset: {
                 y: 0
             }
         },
         fall: {
             framesMax: 10,
-            framesHold: 5,
+            framesHold: 10,
             scale: 3,
             offset: {
                 y: 0
@@ -85,15 +85,15 @@ const characterDefaultSettings = {
     zenitsu: {
         idle: {
             framesMax: 8,
-            framesHold: 10,
+            framesHold: 20,
             scale: 2.9,
             offset: {
                 y: -5
             }
         },
         idleInverted: {
             framesMax: 8,
-            framesHold: 10,
+            framesHold: 20,
             scale: 2.9,
             offset: {
                 y: -5
@@ -133,31 +133,31 @@ const characterDefaultSettings = {
         },
         attack: {
             framesMax: 8,
-            framesHold: 5,
+            framesHold: 7,
             scale: 2.9,
             offset: {
                 y: -5
             }
         },
         attackInverted: {
             framesMax: 8,
-            framesHold: 5,
+            framesHold: 7,
             scale: 2.9,
             offset: {
                 y: -5
             }
         },
         takeHit: {
             framesMax: 5,
-            framesHold: 5,
+            framesHold: 10,
             scale: 2.9,
             offset: {
                 y: -5
             }
         },
         fall: {
             framesMax: 10,
-            framesHold: 5,
+            framesHold: 10,
             scale: 3,
             offset: {
                 y: 0