Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit 40414c3

Browse files
CleverProgrammerCleverProgrammer
committedJun 8, 2022
Add API lesson for random dog & refactor fighting game code
1 parent ad9c1b6 commit 40414c3

File tree

18 files changed

+495
-79
lines changed

18 files changed

+495
-79
lines changed
 

Diff for: ‎api/dogRandom/index.html

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width">
7+
<title>replit</title>
8+
<link href="style.css" rel="stylesheet" type="text/css" />
9+
</head>
10+
11+
<body>
12+
<button id='dogButton'>Get New Dog</button>
13+
<div id='dogImage'><img src="" alt=""></div>
14+
<script src="script.js"></script>
15+
</body>
16+
17+
</html>

Diff for: ‎api/dogRandom/script.js

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
// https://dog.ceo/api/breeds/image/random
2+
// .then - Promises
3+
// asynchronous programming
4+
5+
// stuff you don't have to wait for
6+
console.log('run 1st')
7+
8+
const dogImageDiv = document.getElementById('dogImage')
9+
const dogButton = document.getElementById('dogButton')
10+
11+
// stuff you have to wait for
12+
const getNewDog = () => {
13+
fetch('https://dog.ceo/api/breeds/image/random')
14+
.then(response => response.json())
15+
.then(json => {
16+
dogImageDiv.innerHTML = `<img src='${json.message}' height=300 width=300/>`
17+
})
18+
}
19+
20+
dogButton.onclick = () => getNewDog()
21+
22+
console.log('run 3rd')

Diff for: ‎classes/fightingGame/solution/index.html

+62-3
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,74 @@
1010

1111
<body>
1212

13-
<div>The solution for Fighting Game</div>
13+
<div class="title">The solution for Fighting Game</div>
1414
<br>
1515

16-
<button id="play">Run simulation</button>
16+
<div class="menu">
17+
<div class="p1Choices">
18+
<img
19+
id="p1"
20+
src="https://i.gifer.com/origin/00/0019f6845ceaa9347b881ccbe8f5644a_w200.gif"
21+
/>
22+
<button
23+
onclick = "player1.strike(player1, player2, player1.attackDmg)"
24+
id="attack"
25+
>
26+
Attack
27+
</button>
28+
29+
<button
30+
onclick = "player1.heal(player1)"
31+
id="heal"
32+
>
33+
Heal
34+
</button>
35+
36+
<div id="p1Health">100</div>
37+
</div>
1738

39+
<button id="play">Run simulation</button>
40+
41+
<div class="p2Choices">
42+
<img
43+
id="p2"
44+
src="https://i.imgur.com/Z0QCi47.gif"
45+
/>
46+
<button
47+
onclick = "player2.strike(player2, player1, player2.attackDmg)"
48+
id="attack"
49+
>
50+
Attack
51+
</button>
52+
<button
53+
onclick = "player2.heal(player2)"
54+
id="heal"
55+
>
56+
Heal
57+
</button>
58+
<div id="p2Health">100</div>
59+
</div>
60+
61+
</div>
1862
<br>
63+
1964
<div class="resultContainer">
20-
<div id="result">Hi</div>
65+
<div id="result"></div>
66+
<button onclick="game.reset(p1,p2)">Reset</button>
2167
</div>
68+
69+
<audio id="p1attack" controls style="display:none">
70+
<source src="sounds/fastpunch.mp3" type="audio/mpeg">
71+
</audio>
72+
<audio id="p1heal" controls style="display:none">
73+
<source src="sounds/fastheal.mp3" type="audio/mpeg">
74+
</audio>
75+
<audio id="p2attack" controls style="display:none">
76+
<source src="sounds/quickhit.mp3" type="audio/mpeg">
77+
</audio>
78+
<audio id="p2heal" controls style="display:none">
79+
<source src="sounds/quickheal.mp3" type="audio/mpeg">
80+
</audio>
2281
<script src="solution.js"></script>
2382
</body>
2483

Diff for: ‎classes/fightingGame/solution/solution.js

+142-71
Original file line numberDiff line numberDiff line change
@@ -1,110 +1,181 @@
1-
let playButton = document.getElementById('play')
2-
let resultDiv = document.getElementById('result')
1+
/*
2+
🌟 APP: Fighting Game
3+
4+
Create an updateGame() function that will update the DOM with the state of the game 👇
5+
========================================
36
7+
- updateGame()
48
9+
These are the 2 classes you must create and their methods 👇
10+
========================================
511
612
class Player {
7-
constructor(name, health, atkDamage) {
13+
- strike()
14+
- heal()
15+
}
16+
17+
class Game {
18+
- play()
19+
- checkIsOver()
20+
- declareWinner()
21+
- reset()
22+
}
23+
24+
These functions are hard coded in the HTML. So, you can't change their names.
25+
26+
These are all the DIV ID's you're gonna need access to 👇
27+
========================================================
28+
#1 ID 👉 'play' = Button to run simulation
29+
#2 ID 👉 'result' = Div that holds the winner of the match
30+
#3 ID 👉 'p1Health' = Div that holds player 1's health
31+
#4 ID 👉 'p2Health' = Div that holds player 2's health
32+
*/
33+
34+
// ** Grabs elements from the DOM and stores them into variables **
35+
let playButton = document.getElementById('play')
36+
let resultDiv = document.getElementById('result')
37+
let p1HealthDiv = document.getElementById('p1Health')
38+
let p2HealthDiv = document.getElementById('p2Health')
39+
40+
// ** Check if either players health is 0 and if it is, then update isOver to true **
41+
const updateGame = (p1,p2,p1HealthDiv,p2HealthDiv, gameState) => {
42+
// Update the DOM with the latest health of players
43+
console.log(p1.health, p1, "👈👈👈👈")
44+
p1HealthDiv.innerText = p1.health
45+
p2HealthDiv.innerText = p2.health
46+
if (p1.health <= 0 || p2.health <= 0) {
47+
game.isOver = true;
48+
gameState = game.isOver
49+
result.innerText = game.declareWinner(game.isOver,p1,p2)
50+
return gameState
51+
}
52+
}
53+
54+
// ** Create the Player class which can create a player with all it's attributes and methods **
55+
class Player {
56+
constructor(name, health, attackDamage) {
857
this.name = name;
958
this.health = health;
10-
this.attack = atkDamage;
59+
this.attackDmg = attackDamage;
1160
}
12-
13-
14-
attack(player, enemy) {
15-
let damageAmount = Math.ceil(Math.random() * 10)
61+
// ** Attack an enemy with a random number from 0 to YOUR attackDmg bonus **
62+
strike (player, enemy, attackDmg) {
63+
let damageAmount = Math.ceil(Math.random() * attackDmg)
1664
enemy.health -= damageAmount
65+
66+
updateGame(p1,p2,p1HealthDiv,p2HealthDiv,gameState)
1767

18-
return `${player} attacks ${enemy} for ${damageAmount} damage!`
68+
return `${player.name} attacks ${enemy.name} for ${damageAmount}`
1969
}
20-
//Generate a random number between 1 and 5 using Math.random()
21-
//Use that number to increase health of player 1
22-
heal(player) {
70+
// ** Heal the player for random number from 1 to 5 **
71+
heal (player) {
2372
let hpAmount = Math.ceil(Math.random() * 5)
2473
player.health += hpAmount
25-
26-
return `${player} heals for ${hpAmount} + HP!`
74+
75+
updateGame(p1,p2,p1HealthDiv,p2HealthDiv,gameState)
76+
return `${player.name} heals for ${hpAmount} + HP!`
2777
}
2878
}
2979

80+
// ** Create the Game class with all it's attributes and methods to run a match **
3081
class Game {
31-
// default arugments
32-
constructor(player1, player2) {
33-
// Flag that indicates if the game is over or not
82+
constructor(p1HealthDiv,p2HealthDiv) {
3483
this.isOver = false;
84+
this.p1HealthDiv = p1HealthDiv
85+
this.p2HealthDiv = p2HealthDiv
3586
}
3687

37-
// Starts the game and logs out the status of players
38-
play(player1, player2) {
39-
// this.reset();
40-
41-
// while loops
42-
console.log(player1.attack())
43-
// while (!this.isOver) {
44-
// player1.attack(player1,player2)
45-
// player1.heal(player1)
46-
// player2.attack(player2,player1);
47-
// player2.heal(player2)
48-
// this.checkTheEnd(player1,player2);
49-
// }
50-
// return this.declareWinner(this.isOver,this.player1,this.player2);
51-
}
52-
53-
// Console log the winner of the battle
88+
// ** If the game is over and a player has 0 health declare the winner! **
5489
declareWinner(isOver,p1, p2) {
5590
let message
5691
if (isOver == true && p1.health <= 0) {
5792
message = `${p2.name} WINS!`;
58-
console.log(message)
5993
}
6094
else if(isOver == true && p2.health <= 0) {
6195
message = `${p1.name} WINS!`
6296
}
97+
console.log(isOver,message, "🧑‍🚀🧑‍🚀🧑‍🚀🧑‍🚀", p2.health, p1.health)
6398
return message
6499
}
65100

66-
// If player 1 or player 2 health is below 0
67-
// Mark theEnd true, to stop the game
68-
checkTheEnd(p1,p2) {
69-
if (p1.health <= 0 || p2.health <= 0) {
70-
this.isOver = true;
71-
return this.isOver
72-
}
73-
101+
// ** Reset the players health back to it's original state and isOver to FALSE **
102+
reset(p1,p2) {
103+
p1.health = 100
104+
p2.health = 100
105+
this.isOver = false
106+
resultDiv.innerText = ''
107+
updateGame(p1,p2,p1HealthDiv,p2HealthDiv)
108+
}
109+
110+
// ** Simulates the whole match untill one player runs out of health **
111+
play(p1, p2) {
112+
this.reset(p1,p2);
113+
// Make sure the players take turns untill isOver is TRUE
114+
while (!this.isOver) {
115+
p1.strike(p1,p2, p1.attackDmg)
116+
p2.heal(p2)
117+
p2.strike(p2,p1, p2.attackDmg);
118+
p1.heal(p1)
119+
updateGame(p1,p2,p1HealthDiv,p2HealthDiv);
120+
}
121+
// Once isOver is TRUE run the declareWinner() method
122+
return this.declareWinner(this.isOver,player1,player2);
123+
}
124+
125+
}
126+
127+
// ** Create 2 players using the player class **
128+
let player1 = new Player('Lance', 100, 15)
129+
let player2 = new Player('Qazi', 100, 15)
130+
131+
// ** Save original Player Data **
132+
let p1 = player1
133+
let p2 = player2
134+
135+
// ** Create the game object from the Game class **
136+
let game = new Game(p1HealthDiv,p2HealthDiv);
137+
138+
// ** Save original Game Data **
139+
let gameState = game.isOver
140+
141+
142+
// ** Add a click listener to the simulate button that runs the play() method on click and pass in the players **
143+
play.onclick = () => result.innerText = game.play(player1,player2);
144+
145+
146+
// ** BONUS **
147+
// Add functionality where players can press a button to attack OR heal
148+
149+
// ** Player 1 Controls **
150+
document.addEventListener('keydown', function(e) {
151+
if (e.key == "q" && player2.health > 0 ){
152+
player1.strike(player1, player2, player1.attackDmg)
153+
document.getElementById('p1attack').play();
74154
}
155+
});
75156

76-
// Console log the name and health of both players
77-
// Ex: Player 1: 100 | Player 2: 50
78-
playerStatus() {
79-
// console.log(
80-
// 'Player 1: ' + this.player1.name + ',' + ' Health: ' + this.player1.health
81-
// );
82-
// console.log(
83-
// 'Player 2: ' + this.player2.name + ',' + ' Health: ' + this.player2.health
84-
// );
157+
document.addEventListener('keydown', function(e) {
158+
if (e.key == "a" && player2.health > 0 ){
159+
player1.heal(player1)
160+
document.getElementById('p1heal').play();
85161
}
162+
});
86163

87-
//Reset health of player 1 and player 2 to 100
88-
//Reset theEnd to false
89-
// reset() {
90-
// this.player1.health = 100;
91-
// this.player2.health = 100;
92-
// this.isOver = false;
93-
// }
94-
// ** pl1AttackPl2 allows you to attack another player & deplete their health **
95-
//Generate a random number between 1 and 10 using Math.random()
96-
//Use that number to decrease health from player 2
97-
// Problem: trying to do 2 things
164+
// ** Player 2 Controls **
165+
document.addEventListener('keydown', function(e) {
166+
if (e.key == "p" && player1.health > 0){
167+
player2.strike(player2, player1, player2.attackDmg)
168+
document.getElementById('p2attack').play();
169+
}
170+
});
98171

99-
}
172+
document.addEventListener('keydown', function(e) {
173+
if (e.key == "l" && player2.health > 0 ){
174+
player2.heal(player2)
175+
document.getElementById('p2heal').play();
176+
}
177+
});
100178

101-
// Initialize the class here
102-
// Call the start function of the game
103-
let player1 = new Player('Lance', 75, 25)
104-
let player2 = new Player('Qazi', 200, 0)
105-
let game = new Game();
106179

107-
play.onclick = () => result.innerText = game.play(player1,player2)
108-
;
109180

110181

Diff for: ‎classes/fightingGame/solution/sounds/fastheal.mp3

17.6 KB
Binary file not shown.

Diff for: ‎classes/fightingGame/solution/sounds/fastpunch.mp3

9.68 KB
Binary file not shown.

Diff for: ‎classes/fightingGame/solution/sounds/quickheal.mp3

13.5 KB
Binary file not shown.

Diff for: ‎classes/fightingGame/solution/sounds/quickhit.mp3

6.66 KB
Binary file not shown.

0 commit comments

Comments
 (0)
Please sign in to comment.