<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>replit</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
body {
background: 'blue';
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-family: 'VT323', monospace;
}
.menu {
width: 50%;
display: flex;
justify-content: space-between;
align-items: center;
}
#p1 {
width: 100px;
height: 100px;
}
.p1Info {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 300px;
width: 300px;
/* background: red; */
}
#p1Name {
font-size: 30px;
}
#p1Health {
font-size: 50px;
}
#p2 {
width: 100px;
height: 100px;
}
.p2Info {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 300px;
width: 300px;
/* background: red; */
}
#p2Name {
font-size: 30px;
}
#p2Health {
font-size: 50px;
}
.playerControls {
display: flex;
flex-direction: column;
justify-content: space-around;
}
.AttackDiv {
display: flex;
align-items: center;
justify-content: space-around;
height: 40px;
width: 100px;
/* background: blue; */
}
.HealDiv {
display: flex;
align-items: center;
justify-content: space-around;
height: 40px;
width: 100px;
/* background: yellow; */
}
#attack {
height: 30px;
width: 60px;
border-radius: 50px;
border: none;
background: #FFFF01;
outline: none;
}
#heal {
height: 30px;
width: 60px;
border-radius: 50px;
border: none;
background: #7DFFFF;
outline: none;
}
#play {
height: 50px;
width: 120px;
border-radius: 20px;
/* border:none; */
background: #02cf02;
outline: none;
color: white;
}
#result {
font-size: 50px;
color: #3dff3d;
}
#reset {
margin-top: 20px;
height: 50px;
width: 100px;
border-radius: 20px;
/* border:none; */
background: #FF8800;
outline: none;
color: white;
}
.resultContainer {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
height: 150px;
width: 300px;
}
</style>
</head>
<body>
<br>
<div class="menu">
<div class="p1Info">
<div id="p1Name">Player 1</div>
<img id="p1" src="https://i.gifer.com/origin/00/0019f6845ceaa9347b881ccbe8f5644a_w200.gif" />
<div class="playerControls">
<div class="AttackDiv">
<h3>Q:</h3>
<button onclick="player1.strike(player1, player2, player1.attackDmg)" id="attack">
Attack
</button>
</div>
<div class="HealDiv">
<h3>A:</h3>
<button onclick="player1.heal(player1)" id="heal">
Heal
</button>
</div>
</div>
<div id="p1Health">100</div>
</div>
<button id="play">Simulate</button>
<div class="p2Info">
<div id="p2Name">Player 2</div>
<img id="p2" src="https://i.imgur.com/Z0QCi47.gif" />
<div class="playerControls">
<div class="AttackDiv">
<h3>P:</h3>
<button onclick="player2.strike(player2, player1, player2.attackDmg)" id="attack">
Attack
</button>
</div>
<div class="HealDiv">
<h3>L:</h3>
<button onclick="player2.heal(player2)" id="heal">
Heal
</button>
</div>
</div>
<div id="p2Health">100</div>
</div>
</div>
<br>
<div class="resultContainer">
<div id="result"></div>
<button id="reset" onclick="game.reset(p1,p2)">Reset</button>
</div>
<audio id="p1attack" controls style="display:none">
<source src="sounds/fastpunch.mp3" type="audio/mpeg">
</audio>
<audio id="p1heal" controls style="display:none">
<source src="sounds/fastheal.mp3" type="audio/mpeg">
</audio>
<audio id="p2attack" controls style="display:none">
<source src="sounds/quickhit.mp3" type="audio/mpeg">
</audio>
<audio id="p2heal" controls style="display:none">
<source src="sounds/quickheal.mp3" type="audio/mpeg">
</audio>
<audio id="victory" controls style="display:none">
<source src="sounds/victory.mp3" type="audio/mpeg">
</audio>
<script>
/*
🌟 APP: Fighting Game
Create an updateGame() function that will update the DOM with the state of the game 👇
========================================
- updateGame()
These are the 2 classes you must create and their methods 👇
========================================
class Player {
- strike()
- heal()
}
class Game {
- play()
- checkIsOver()
- declareWinner()
- reset()
}
These functions are hard coded in the HTML. So, you can't change their names.
These are all the DIV ID's you're gonna need access to 👇
========================================================
#1 ID 👉 'play' = Button to run simulation
#2 ID 👉 'result' = Div that holds the winner of the match
#3 ID 👉 'p1Name' = Div that holds player 1's Name
#4 ID 👉 'p2Name' = Div that holds player 2's Name
#5 ID 👉 'p1Health' = Div that holds player 1's health
#6 ID 👉 'p2Health' = Div that holds player 2's health
*/
// ** Grabs elements from the DOM and stores them into variables **
let playButton = document.getElementById('play')
let resultDiv = document.getElementById('result')
let p1NameDiv = document.getElementById('p1Name')
let p2NameDiv = document.getElementById('p2Name')
let p1HealthDiv = document.getElementById('p1Health')
let p2HealthDiv = document.getElementById('p2Health')
// ** Check if either players health is 0 and if it is, then update isOver to true **
const updateGame = (p1, p2, gameState) => {
// Update the DOM with the names and the latest health of players
p1NameDiv.innerText = player1.name
p2NameDiv.innerText = player2.name
p1HealthDiv.innerText = p1.health
p2HealthDiv.innerText = p2.health
// Condition IF either player health is <= 0 then set isOver to true and declareWinner
if (p1.health <= 0 || p2.health <= 0) {
game.isOver = true
gameState = game.isOver
resultDiv.innerText = game.declareWinner(game.isOver, p1, p2)
return gameState
}
}
// ** Create the Player class which can create a player with all it's attributes and methods **
// qazi = new Player('Qazi', 100, 7)
// qazi.name 👉 'Qazi'
// qazi.health 👉 100
// qazi.attackDmg 👉 7
class Player {
constructor(name, health, attackDamage) {
this.name = name;
this.health = health;
this.attackDmg = attackDamage;
}
// ** Attack an enemy with a random number from 0 to YOUR attackDmg bonus **
strike(player, enemy, attackDmg) {
// Get random number between 1 - 10 and that is damageAmount
let damageAmount = Math.floor(Math.random() * attackDmg)
// Subtract the enemy health with the damageAmount
enemy.health -= damageAmount
// Update the game and DOM with updateGame()
updateGame(p1, p2, game.isOver)
// Return a message of 'player name attacks enemy name for damageAmount'
return `${player.name} attacks ${enemy.name} for ${damageAmount} damage`
}
// ** Heal the player for random number from 1 to 5 **
heal(player) {
if (player.health >= 100) {
return
}
// Get random number between 1 - 5 and store that in hpAmount
let hpAmount = Math.floor(Math.random() * 5)
// Add hpAmount to players health
player.health += hpAmount
// Update the game and DOM with updateGame()
updateGame(p1, p2, game.isOver)
// Return a message of 'player name heals for hpAmount HP'
return `${player.name} heals for ${hpAmount} HP!`
}
}
// ** Create the Game class with all it's attributes and methods to run a match **
// game = new Game()
// game.isOver 👉 false
class Game {
constructor() {
this.isOver = false;
}
// ** If the game is over and a player has 0 health declare the winner! **
declareWinner(isOver, p1, p2) {
// Create a message variable that will hold a message based on the condition
let message = 'TIE!'
// If isOver is true AND p1 health is <= 0 then update message variable to 'p1 WINS!'
if (isOver == true && p1.health <= 0) {
message = `${p2.name} Wins!`
}
else if (isOver == true && p2.health <= 0) {
message = `${p1.name} Wins!`
}
// Else if isOver is true AND p2 health is <= 0 then update message variable to 'p2 WINS!'
// Play victory sound
document.getElementById('victory').play()
// Return message variable
return message
}
// ** Reset the players health back to it's original state and isOver to FALSE **
reset(p1, p2) {
// set p1 health and p2 health back to 100 and isOver back to false and clear resultDiv.innerText and don't forget to updateGame()
p1.health = 100
p2.health = 100
this.isOver = false
resultDiv.innerText = ''
updateGame(p1, p2, this.isOver)
}
// ** Simulates the whole match untill one player runs out of health **
play(p1, p2) {
// Reset to make sure player health is back to full before starting
this.reset(p1, p2);
// Make sure the players take turns untill isOver is TRUE
while (!this.isOver) {
//Make sure both players get strike() and heal() once each loop
p1.strike(p1, p2, p1.attackDmg)
p2.heal(p2)
p2.strike(p2, p1, p2.attackDmg)
p1.heal(p1)
}
// Once isOver is TRUE run the declareWinner() method
return this.declareWinner(this.isOver, p1, p2)
}
}
// ** Create 2 players using the player class **
let player1 = new Player('Player 1', 100, 10)
let player2 = new Player('Player 2', 100, 10)
// ** Save original Player Data into a variable in order to reset **
let p1 = player1
let p2 = player2
// ** Create the game object from the Game class **
let game = new Game()
// ** Intialize the game by calling updateGame() **
updateGame(p1, p2, game.isOver)
// ** Save intial isOver from the game object inside this variable **
let gameState;
// ** Add a click listener to the simulate button that runs the play() method on click and pass in the players **
playButton.onclick = () => {
result.innerText = game.play(p1, p2)
}
// Add functionality where players can press a button to attack OR heal
// ** Player 1 Controls **
document.addEventListener('keydown', function (e) {
// if you press Q AND the enemy health is greater than 0 AND isOver is still false then strike()
if (e.key == 'f' && p2.health > 0 && game.isOver == false) {
// After striking then play attack sound
p1.strike(p1, p2, p1.attackDmg)
document.getElementById('p1attack').play()
}
});
document.addEventListener('keydown', function (e) {
// if you press a AND the player health is greater than 0 AND isOver is still false then heal()
if (e.key == 'v' && p2.health > 0 && game.isOver == false) {
// After healing then play heal sound
p1.heal(p1)
document.getElementById('p1heal').play()
}
});
// ** Player 2 Controls **
document.addEventListener('keydown', function (e) {
// if you press p AND enemy health is greater than 0 AND isOver is still false then stike()
if (e.key == 'j' && p1.health > 0 && game.isOver == false) {
p2.strike(p2, p1, p2.attackDmg)
document.getElementById('p2attack').play()
}
// After striking then play attack sound
});
document.addEventListener('keydown', function (e) {
// if you press l AND the player health is greater than 0 AND isOver is still false then heal()
if (e.key == 'n' && p1.health > 0) {
p2.heal(p2)
document.getElementById('p2heal').play()
}
// After healing then play heal sound
});
//console.log(p1.strike(p1,p2,p1.attackDmg))
//console.log(p1.heal(p1))qqqqqq
</script>
</body>
</html>