From 730b16ca89ad291fb1fce056ccd4c26a718e613b Mon Sep 17 00:00:00 2001 From: Jonathan Henrique Date: Sun, 12 Nov 2023 17:51:42 -0300 Subject: [PATCH] update --- html/game.html | 7 ++ src/css/game.css | 68 ++++++++++++ .../game-assets/tanjiro/tanjiro-fall.png | Bin 0 -> 3151 bytes .../game-assets/zenitsu/zenitsu-fall.png | Bin 0 -> 3545 bytes src/js/classes.js | 52 +++++++-- src/js/game.js | 99 ++++++++++++++++-- src/js/sprite-default-settings.js | 25 ++++- src/js/utils.js | 27 +++++ 8 files changed, 258 insertions(+), 20 deletions(-) create mode 100644 src/imagens/game-assets/tanjiro/tanjiro-fall.png create mode 100644 src/imagens/game-assets/zenitsu/zenitsu-fall.png diff --git a/html/game.html b/html/game.html index 38c1d7a..316e215 100644 --- a/html/game.html +++ b/html/game.html @@ -11,6 +11,13 @@
+
+

WINS!

+ +
diff --git a/src/css/game.css b/src/css/game.css index 1b71fa0..bf3c72c 100644 --- 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); + } } \ No newline at end of file diff --git a/src/imagens/game-assets/tanjiro/tanjiro-fall.png b/src/imagens/game-assets/tanjiro/tanjiro-fall.png new file mode 100644 index 0000000000000000000000000000000000000000..6655168b3ba929255e060e4b26e5247c96b53c93 GIT binary patch literal 3151 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 MFtIUyi^M$sA487#umAu6 literal 0 HcmV?d00001 diff --git a/src/imagens/game-assets/zenitsu/zenitsu-fall.png b/src/imagens/game-assets/zenitsu/zenitsu-fall.png new file mode 100644 index 0000000000000000000000000000000000000000..e78bfc294d107414d041f8956adc374aea0e6ce7 GIT binary patch literal 3545 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 BtE&J2 literal 0 HcmV?d00001 diff --git a/src/js/classes.js b/src/js/classes.js index ade688e..27e603c 100644 --- 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; } } } diff --git a/src/js/game.js b/src/js/game.js index 394c376..4402e84 100644 --- a/src/js/game.js +++ b/src/js/game.js @@ -107,6 +107,13 @@ const player1 = new Character({ framesHold: characterDefaultSettings[characterP1].takeHit.framesHold, scale: characterDefaultSettings[characterP1].takeHit.scale, offset: characterDefaultSettings[characterP1].takeHit.offset + }, + fall: { + imageSrc: `../src/imagens/game-assets/${characterP1}/${characterP1}-fall.png`, + framesMax: characterDefaultSettings[characterP1].fall.framesMax, + framesHold: characterDefaultSettings[characterP1].fall.framesHold, + scale: characterDefaultSettings[characterP1].fall.scale, + offset: characterDefaultSettings[characterP1].fall.offset } }, attackBox: { @@ -199,6 +206,13 @@ const player2 = new Character({ framesHold: characterDefaultSettings[characterP2].takeHit.framesHold, scale: characterDefaultSettings[characterP2].takeHit.scale, offset: characterDefaultSettings[characterP2].takeHit.offset + }, + fall: { + imageSrc: `../src/imagens/game-assets/${characterP2}/${characterP2}-fall.png`, + framesMax: characterDefaultSettings[characterP2].fall.framesMax, + framesHold: characterDefaultSettings[characterP2].fall.framesHold, + scale: characterDefaultSettings[characterP2].fall.scale, + offset: characterDefaultSettings[characterP2].fall.offset } }, attackBox: { @@ -239,8 +253,8 @@ function isOnGround(player){ player1.direction = 1 player2.direction = -1 + function animate() { - window.requestAnimationFrame(animate) context.fillStyle = `black` context.fillRect(0,0,canvas.width,canvas.height) @@ -250,7 +264,6 @@ function animate() { player1.velocity.x = 0 player2.velocity.x = 0 - //Player 1 movement if(keys.a.pressed && player1.lastKey === `a` && player1.canMove){ @@ -290,6 +303,7 @@ function animate() { player2.direction = 1 if(isOnGround(player2)){ player2.switchSprite(`run`) } } else if (isOnGround(player2)){ + if(player2.direction === -1){ player2.switchSprite(`idle-inverted`) } else { @@ -305,23 +319,45 @@ function animate() { } } - //Detect for collision + // ================================ Detect for collision =================================== + + //PLAYER 1 COLLISION if ( rectangularCollision({ rectangle1: player1, rectangle2: player2 }) && - player1.isAttacking && player1.framesCurrent === 4 && !player2.strikedFirst + player1.isAttacking && player1.framesCurrent === 4 && !player2.strikedFirst && player2.health > 0 ) { + player1.strikedFirst = true player2.strikedFirst = false player2.takeHit() + if(player2.health === 0){ + document.getElementById('winning-result').style.display = 'block' + document.getElementById('winner').innerHTML = characterP1.toUpperCase() + setTimeout(() => { + document.querySelector('nav').style.display = 'flex' + document.querySelector('.match-result').style.background = 'black' + setTimeout(() => { + const buttons = document.querySelectorAll('#button') + buttons[0].style.opacity = 1 + buttons[1].style.opacity = 1 + }, 1500); + }, 1000); + } player1.isAttacking = false player2.color = `yellow` document.querySelector(`.health-quantity-P2`).style.width = player2.health + `%` setTimeout(() => { document.querySelector(`.lose-health-P2`).style.width = player2.health + `%` }, 1000); + + const healthBar = document.querySelector('.player2-info') + healthBar.classList.add('tremer') + setTimeout(()=>{ + healthBar.classList.remove('tremer') + },500) } else { player2.color = `blue` } @@ -330,23 +366,42 @@ function animate() { player1.isAttacking = false } - + //PLAYER 2 COLLISION if ( rectangularCollision({ rectangle1: player2, rectangle2: player1 }) && - player2.isAttacking && player2.framesCurrent === 4 && !player1.strikedFirst + player2.isAttacking && player2.framesCurrent === 4 && !player1.strikedFirst && player1.health > 0 ) { player2.strikedFirst = true player1.strikedFirst = false player1.takeHit() + if(player1.health === 0){ + document.getElementById('winning-result').style.display = 'block' + document.getElementById('winner').innerHTML = characterP2.toUpperCase() + setTimeout(() => { + document.querySelector('nav').style.display = 'flex' + document.querySelector('.match-result').style.background = 'black' + setTimeout(() => { + const buttons = document.querySelectorAll('#button') + buttons[0].style.opacity = 1 + buttons[1].style.opacity = 1 + }, 1500); + }, 1000); + } player2.isAttacking = false player1.color = `yellow` document.querySelector(`.health-quantity-P1`).style.width = player1.health + `%` setTimeout(() => { document.querySelector(`.lose-health-P1`).style.width = player1.health + `%` }, 1000); + + const healthBar = document.querySelector('.player1-info') + healthBar.classList.add('tremer') + setTimeout(()=>{ + healthBar.classList.remove('tremer') + },500) } else { player1.color = `red` } @@ -356,17 +411,19 @@ function animate() { } //Orientation collision change - + //If player1 is on left if(player1.position.x + player1.width <= player2.position.x + player2.width){ player1.attackBox.offset.x = 80 } else { - player1.attackBox.offset.x = -170 + player1.attackBox.offset.x = -180 } + //If player1 is on right if(player1.position.x + player1.width >= player2.position.x + player2.width){ player2.attackBox.offset.x = 80 } else { - player2.attackBox.offset.x = -170 + player2.attackBox.offset.x = -180 } + } animate() @@ -388,12 +445,26 @@ window.addEventListener(`keydown`, (event) =>{ keys.d.pressed = true player1.lastKey = `d` break + case `D`: + keys.d.pressed = true + player1.lastKey = `d` + break case `a`: keys.a.pressed = true player1.lastKey = `a` break + case `A`: + keys.a.pressed = true + player1.lastKey = `a` + break case `w`: - if(player1.jumps>0){ + 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-- } @@ -424,7 +495,7 @@ window.addEventListener(`keydown`, (event) =>{ player2.jumps-- } break - case `Enter`: + case `.`: if(player2.canAttack && player2.canMove && !player1.strikedFirst){ player2.attack() if(player1.position.x + player1.width >= player2.position.x + player2.width) { @@ -444,9 +515,15 @@ window.addEventListener(`keyup`, (event) =>{ case `d`: keys.d.pressed = false break + case `D`: + keys.d.pressed = false + break case `a`: keys.a.pressed = false break + case `A`: + keys.a.pressed = false + break //Player 2 keys case `ArrowRight`: diff --git a/src/js/sprite-default-settings.js b/src/js/sprite-default-settings.js index 06cfad1..2ad5ae7 100644 --- a/src/js/sprite-default-settings.js +++ b/src/js/sprite-default-settings.js @@ -43,7 +43,10 @@ const characterDefaultSettings = { jumpInverted: { framesMax: 2, framesHold: 10, - scale: 3 + scale: 3, + offset: { + y: 0 + } }, attack: { framesMax: 8, @@ -68,6 +71,14 @@ const characterDefaultSettings = { offset: { y: 0 } + }, + fall: { + framesMax: 10, + framesHold: 5, + scale: 3, + offset: { + y: 0 + } } }, @@ -109,7 +120,7 @@ const characterDefaultSettings = { framesHold: 10, scale: 2.9, offset: { - y: 0 + y: 10 } }, jumpInverted: { @@ -117,7 +128,7 @@ const characterDefaultSettings = { framesHold: 10, scale: 2.9, offset: { - y: 0 + y: 10 } }, attack: { @@ -143,6 +154,14 @@ const characterDefaultSettings = { offset: { y: -5 } + }, + fall: { + framesMax: 10, + framesHold: 5, + scale: 3, + offset: { + y: 0 + } } } } \ No newline at end of file diff --git a/src/js/utils.js b/src/js/utils.js index 349eb76..9ec9f19 100644 --- a/src/js/utils.js +++ b/src/js/utils.js @@ -14,5 +14,32 @@ function decreaseTimer() { setTimeout(decreaseTimer, 1000) timer-- document.getElementById('timer').innerHTML = timer + } else if ( timer === 0){ + document.getElementById('winning-result').style.display = 'block' + if(player1.health > player2.health){ + document.getElementById('winner').innerHTML = characterP1.toUpperCase() + } else if (player1.health < player2.health){ + document.getElementById('winner').innerHTML = characterP2.toUpperCase() + } else { + document.getElementById('winning-result').innerHTML = "DRAW!" + + } + setTimeout(() => { + document.querySelector('nav').style.display = 'flex' + document.querySelector('.match-result').style.background = 'black' + setTimeout(() => { + const buttons = document.querySelectorAll('#button') + buttons[0].style.opacity = 1 + buttons[1].style.opacity = 1 + }, 1500); + }, 1000); } +} + +function rematch(){ + location.reload() +} + +function changeCharacter(){ + window.location.href = "character-select.html" } \ No newline at end of file