added screen resolution selection and dash script

index.html

@@ -17,6 +17,13 @@
             <img src="src/imagens/menu-illustration.jpg" aria-hidden="true"/>
         </div>
         <nav class="menu">
+            <form>
+                <label for="resolucao">Resolução de tela</label>
+                <select name="resolucao" id="resolucao">
+                    <option value="1920x1080">1920 x 1080</option>
+                    <option value="1280x720">1280 x 720</option>
+                </select>
+            </form>
             <img class="logo" src="src/imagens/demonslayer-logo.png" alt="Demon Slayer">
             <ul class="button-list">
                 <li><button class="active" onclick="startGame()">Start Game</button></li>

src/js/classes.js

@@ -101,7 +101,9 @@ class Character extends Sprite {
         direction,
         canAttack = true,
         canMove = true,
-        gotHit = false
+        gotHit = false,
+        clickCount = 0,
+
     }){
         super({
             position,
@@ -114,7 +116,7 @@ class Character extends Sprite {
         this.width = 80
         this.height = 150
         this.lastKey
-        this.movSpeed = 7
+        this.movSpeed = speed
         this.jumps = 2
         this.attackBox = {
             position: {
@@ -136,6 +138,7 @@ class Character extends Sprite {
         this.canAttack = canAttack
         this.canMove = canMove
         this.gotHit = gotHit
+        this.clickCount = clickCount
 
 
 
@@ -171,10 +174,27 @@ class Character extends Sprite {
             this.position.x = canvas.width - this.width
         }
 
+        // Defeat checker
         if(this.health === 0){
             this.switchSprite('fall')
             this.canMove = false
+        }
+
 
+
+
+
+
+        if(this.clickCount === 2){
+            if(this.direction > 0){
+                this.position.x += 20
+                this.switchSprite('dash')
+            } else {
+                this.position.x -= 20
+            }
+            setTimeout(() => {
+                this.clickCount = 0
+            }, 300);
         }
 
 
@@ -200,20 +220,24 @@ class Character extends Sprite {
     }
 
     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.gotHit === false || this.image === this.sprites.attackInverted.image && this.framesCurrent < this.sprites.attackInverted.framesMax - 1 && this.gotHit === false ) {
+            return
+        }
+
         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 ) {
+
+        if(this.image === this.sprites.dash.image && this.framesCurrent < this.sprites.dash.framesMax - 1 && !this.isAttacking){
             return
         }
 
 
-
         switch(sprite) {
             case 'idle':
                 if(this.image !== this.sprites.idle.image){
@@ -327,6 +351,13 @@ class Character extends Sprite {
                     this.offset.y = this.sprites.fall.offset.y
                 }
                 break;
+            case 'dash':
+                this.image = this.sprites.dash.image
+                this.framesMax = this.sprites.dash.framesMax
+                this.framesCurrent = 0
+                this.framesHold = this.sprites.dash.framesHold
+                this.scale = this.sprites.dash.scale
+                this.offset.y = this.sprites.dash.offset.y
         }
     }
 }

src/js/game.js

@@ -6,8 +6,9 @@ canvas.height = window.innerHeight
 
 context.fillRect(0,0,canvas.width,canvas.height)
 
-const gravity = 0.35
-const jumpHeight = -12
+const gravity = resolucao==='1280x720'? 0.6: 0.35
+const jumpHeight = resolucao==='1280x720'? -14: -12
+const speed = resolucao==='1280x720'? 10: 7
 
 const background = new SpriteScenery({
     position: {
@@ -114,6 +115,13 @@ const player1 = new Character({
             framesHold: characterDefaultSettings[characterP1].fall.framesHold,
             scale: characterDefaultSettings[characterP1].fall.scale,
             offset: characterDefaultSettings[characterP1].fall.offset
+        },
+        dash: {
+            imageSrc: `../src/imagens/game-assets/${characterP1}/${characterP1}-dash.png`,
+            framesMax: characterDefaultSettings[characterP1].dash.framesMax,
+            framesHold: characterDefaultSettings[characterP1].dash.framesHold,
+            scale: characterDefaultSettings[characterP1].dash.scale,
+            offset: characterDefaultSettings[characterP1].dash.offset
         }
     },
     attackBox: {
@@ -136,9 +144,6 @@ const player2 = new Character({
         x: 0,
         y: 0
     },
-    // imageSrc: `../src/imagens/game-assets/${characterP2}/${characterP2}-idle.png`,
-    // framesMax: 8,
-    // scale: 3,
     offset: {
         x: 300,
         y: 0
@@ -213,6 +218,13 @@ const player2 = new Character({
             framesHold: characterDefaultSettings[characterP2].fall.framesHold,
             scale: characterDefaultSettings[characterP2].fall.scale,
             offset: characterDefaultSettings[characterP2].fall.offset
+        },
+        dash: {
+            imageSrc: `../src/imagens/game-assets/${characterP2}/${characterP2}-dash.png`,
+            framesMax: characterDefaultSettings[characterP2].dash.framesMax,
+            framesHold: characterDefaultSettings[characterP2].dash.framesHold,
+            scale: characterDefaultSettings[characterP2].dash.scale,
+            offset: characterDefaultSettings[characterP2].dash.offset
         }
     },
     attackBox: {
@@ -230,6 +242,9 @@ const keys = {
         pressed: false
     },
     d: {
+        pressed: false,
+    },
+    space: {
         pressed: false
     },
     ArrowLeft: {
@@ -428,49 +443,101 @@ animate()
 let controlSwitch = 0
 
 window.addEventListener('keydown', (event) =>{
-
     //Player 1 keys
     switch (event.key) {
         case `Control`:
             keys.Control.pressed = true
             controlSwitch++
-        // // }
             break
+
         case `d`:
+            if(keys.d.pressed === false && player1.clickCount < 2) {
+                player1.clickCount++
+                setTimeout(() => {
+                    player1.clickCount = 0
+                }, 300);
+            }
             keys.d.pressed = true
             player1.lastKey = `d`
             break
+
         case `D`:
+            if(keys.d.pressed === false && player1.clickCount < 2) {
+                player1.clickCount++
+                setTimeout(() => {
+                    player1.clickCount = 0
+                }, 300);
+            }
             keys.d.pressed = true
             player1.lastKey = `d`
             break
+
         case `a`:
+            if(keys.a.pressed === false) {
+                player1.clickCount++
+                setTimeout(() => {
+                    player1.clickCount = 0
+                }, 300);
+            }
             keys.a.pressed = true
             player1.lastKey = `a`
             break
+
         case `A`:
+            if(keys.a.pressed === false) {
+                player1.clickCount++
+                setTimeout(() => {
+                    player1.clickCount = 0
+                }, 300);
+            }
             keys.a.pressed = true
             player1.lastKey = `a`
             break
+
         case `w`:
             if(player1.jumps>0 && player1.canMove){
                 player1.velocity.y = jumpHeight
                 player1.jumps--
             }
             break
+
         case `W`:
             if(player1.jumps>0 && player1.canMove){
                 player1.velocity.y = jumpHeight
                 player1.jumps--
             }
             break
 
+        case ` `:
+            if(player1.canAttack && player1.canMove && keys.space.pressed === false){
+                player1.attack()
+                if(player1.position.x + player1.width <= player2.position.x + player2.width) {
+                    player1.switchSprite(`attack`)
+                } else {
+                    player1.switchSprite(`attack-inverted`)
+                }
+            }
+            keys.space.pressed = true
+        break
+
     //Player 2 keys
         case `ArrowRight`:
+            if(keys.ArrowRight.pressed === false) {
+                player2.clickCount++
+                setTimeout(() => {
+                    player2.clickCount = 0
+                }, 300);
+            }
             keys.ArrowRight.pressed = true
             player2.lastKey = `ArrowRight`
             break
         case `ArrowLeft`:
+            if(keys.ArrowLeft.pressed === false) {
+                player2.clickCount++
+                setTimeout(() => {
+                    player2.clickCount = 0
+                }, 300);
+            }
             keys.ArrowLeft.pressed = true
             player2.lastKey = `ArrowLeft`
             break
@@ -484,36 +551,6 @@ window.addEventListener('keydown', (event) =>{
 })
 
 
-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
-
-    //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`)
-                    } else {
-                        player2.switchSprite(`attack-inverted`)
-                    }
-                }
-                break
-        }
-})
 window.addEventListener(`keyup`, (event) =>{
     switch (event.key) {
         //Player 1 keys
@@ -529,6 +566,8 @@ window.addEventListener(`keyup`, (event) =>{
         case `A`:
             keys.a.pressed = false
             break
+        case ' ':
+            keys.space.pressed = false
 
         //Player 2 keys
         case `ArrowRight`:
@@ -537,6 +576,16 @@ window.addEventListener(`keyup`, (event) =>{
         case `ArrowLeft`:
             keys.ArrowLeft.pressed = false
             break
+        case `3`:
+            if(player2.canAttack && player2.canMove){
+                player2.attack()
+                if(player1.position.x + player1.width >= player2.position.x + player2.width) {
+                    player2.switchSprite(`attack`)
+                } else {
+                    player2.switchSprite(`attack-inverted`)
+                }
+            }
+            break
     }
 
 })

src/js/index.js

@@ -1,4 +1,6 @@
 function startGame(){
+    const select = document.getElementById("resolucao")
+    localStorage.setItem('resolucao', select.options[select.selectedIndex].value)
     window.location.href = "html/character-select.html"
 }