Skip to content

Commit 899bd8b

Browse files
deep100xdeep100x
committed
Update fightingGame
1 parent 7715d1b commit 899bd8b

File tree

5 files changed

+268
-21
lines changed

5 files changed

+268
-21
lines changed

‎projects/fightinggame/index.html

Lines changed: 38 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,36 +3,59 @@
33
<head>
44
<meta charset="utf-8" />
55
<meta name="viewport" content="width=device-width" />
6-
<title>Fighting Game</title>
6+
<title>replit</title>
77
<link href="style.css" rel="stylesheet" type="text/css" />
88
</head>
99

1010
<body>
11-
<div class="title">The solution for Fighting Game</div>
1211
<br />
1312

1413
<div class="menu">
15-
<div class="p1Choices">
14+
<div class="p1Info">
15+
<div id="p1Name">Player 1</div>
16+
1617
<img id="p1" src="https://i.gifer.com/origin/00/0019f6845ceaa9347b881ccbe8f5644a_w200.gif" />
17-
<button onclick="player1.strike(player1, player2, player1.attackDmg)" id="attack">Attack</button>
18-
<button onclick="player1.heal(player1)" id="heal">Heal</button>
18+
19+
<div class="playerControls">
20+
<div class="AttackDiv">
21+
<h3>Q:</h3>
22+
<button onclick="player1.strike(player1, player2, player1.attackDmg)" id="attack">Attack</button>
23+
</div>
24+
25+
<div class="HealDiv">
26+
<h3>A:</h3>
27+
<button onclick="player1.heal(player1)" id="heal">Heal</button>
28+
</div>
29+
</div>
30+
1931
<div id="p1Health">100</div>
2032
</div>
2133

22-
<button id="play">Run simulation</button>
34+
<button id="play">Simulate</button>
35+
36+
<div class="p2Info">
37+
<div id="p2Name">Player 2</div>
2338

24-
<div class="p2Choices">
2539
<img id="p2" src="https://i.gifer.com/origin/00/0019f6845ceaa9347b881ccbe8f5644a_w200.gif" />
26-
<button onclick="player2.strike(player2, player1, player2.attackDmg)" id="attack">Attack</button>
27-
<button onclick="player2.heal(player2)" id="heal">Heal</button>
40+
<div class="playerControls">
41+
<div class="AttackDiv">
42+
<h3>P:</h3>
43+
<button onclick="player2.strike(player2, player1, player2.attackDmg)" id="attack">Attack</button>
44+
</div>
45+
<div class="HealDiv">
46+
<h3>L:</h3>
47+
<button onclick="player2.heal(player2)" id="heal">Heal</button>
48+
</div>
49+
</div>
50+
2851
<div id="p2Health">100</div>
2952
</div>
3053
</div>
3154
<br />
3255

3356
<div class="resultContainer">
3457
<div id="result"></div>
35-
<button onclick="game.reset(p1,p2)">Reset</button>
58+
<button id="reset" onclick="game.reset(p1,p2)">Reset</button>
3659
</div>
3760

3861
<audio id="p1attack" controls style="display: none">
@@ -47,6 +70,10 @@
4770
<audio id="p2heal" controls style="display: none">
4871
<source src="sounds/quickheal.mp3" type="audio/mpeg" />
4972
</audio>
50-
<script src="solution.js"></script>
73+
<audio id="victory" controls style="display: none">
74+
<source src="sounds/victory.mp3" type="audio/mpeg" />
75+
</audio>
76+
77+
<script src="script.js"></script>
5178
</body>
5279
</html>

‎projects/fightinggame/script.js

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
// playDiv = document.getElementById('play');
2+
3+
// playDiv.addEventListener('click',() => {
4+
// console.log("hello");
5+
// })
6+
7+
// document.addEventListener('keydown',(e) => {
8+
// console.log("HI");
9+
// if (e.key == "q")
10+
// {
11+
// console.log("you pressed q");
12+
// document.getElementById('p1attack').play()
13+
// }
14+
// else
15+
// {
16+
// console.log("not q");
17+
// }
18+
// })
19+
20+
let playButton = document.getElementById('play')
21+
let resultDiv = document.getElementById('result')
22+
let p1NameDiv = document.getElementById('p1Name')
23+
let p2NameDiv = document.getElementById('p2Name')
24+
let p1HealthDiv = document.getElementById('p1Health')
25+
let p2HealthDiv = document.getElementById('p2Health')
26+
27+
// ** Check if either players health is 0 and if it is, then update isOver to true **
28+
const updateGame = (p1,p2,gameState) => {
29+
// Update the DOM with the names and the latest health of players
30+
p1NameDiv.innerText = " dog"
31+
32+
// Condition IF either player health is <= 0 then set isOver to true and declareWinner
33+
34+
}
35+
36+
// ** Create the Player class which can create a player with all it's attributes and methods **
37+
// qazi = new Player('Qazi', 100, 7)
38+
// qazi.name 👉 'Qazi'
39+
// qazi.health 👉 100
40+
// qazi.attackDmg 👉 7
41+
class Player {
42+
constructor(name,health,attackDamage) {
43+
this.name = name;
44+
this.health = health;
45+
this.attackDmg = attackDamage;
46+
}
47+
// ** Attack an enemy with a random number from 0 to YOUR attackDmg bonus **
48+
strike (player,enemy,attackDmg) {
49+
50+
// Get random number between 1 - 10 and that is damageAmount
51+
52+
// Subtract the enemy health with the damageAmount
53+
54+
// Update the game and DOM with updateGame()
55+
56+
// Return a message of 'player name attacks enemy name for damageAmount'
57+
58+
}
59+
// ** Heal the player for random number from 1 to 5 **
60+
heal (player) {
61+
62+
// Get random number between 1 - 5 and store that in hpAmount
63+
64+
// Add hpAmount to players health
65+
66+
// Update the game and DOM with updateGame()
67+
68+
// Return a message of 'player name heals for hpAmount HP'
69+
70+
}
71+
}
72+
73+
// ** Create the Game class with all it's attributes and methods to run a match **
74+
// game = new Game()
75+
// game.isOver 👉 false
76+
class Game {
77+
constructor() {
78+
this.isOver = false;
79+
}
80+
81+
// ** If the game is over and a player has 0 health declare the winner! **
82+
declareWinner (isOver,p1,p2) {
83+
84+
// Create a message variable that will hold a message based on the condition
85+
86+
// If isOver is true AND p1 health is <= 0 then update message variable to 'p1 WINS!'
87+
88+
// Else if isOver is true AND p2 health is <= 0 then update message variable to 'p2 WINS!'
89+
// Play victory sound
90+
91+
// Return message variable
92+
93+
}
94+
95+
// ** Reset the players health back to it's original state and isOver to FALSE **
96+
reset (p1,p2) {
97+
// set p1 health and p2 health back to 100 and isOver back to false and clear resultDiv.innerText and don't forget to updateGame()
98+
99+
}
100+
101+
// ** Simulates the whole match untill one player runs out of health **
102+
play (p1,p2) {
103+
// Reset to make sure player health is back to full before starting
104+
105+
// Make sure the players take turns untill isOver is TRUE
106+
while (!this.isOver)
107+
{
108+
//Make sure both players get strike() and heal() once each loop
109+
}
110+
// Once isOver is TRUE run the declareWinner() method
111+
112+
}
113+
114+
}
115+
116+
// ** Create 2 players using the player class **
117+
let player1 = new Player('Oggy',100,10)
118+
let player2 = new Player('Jack',100,10)
119+
120+
121+
// ** Save original Player Data into a variable in order to reset **
122+
let p1 = player1
123+
let p2 = player2
124+
125+
// ** Create the game object from the Game class **
126+
let game = new Game()
127+
128+
// ** Intialize the game by calling updateGame() **
129+
updateGame(p1,p2,game.isOver)
130+
131+
// ** Save intial isOver from the game object inside this variable **
132+
let gameState;
133+
134+
135+
// ** Add a click listener to the simulate button that runs the play() method on click and pass in the players **
136+
137+
138+
// Add functionality where players can press a button to attack OR heal
139+

‎projects/fightinggame/solution.js

Whitespace-only changes.

‎projects/fightinggame/sounds/victory.mp3

29.4 KB
Binary file not shown.

‎projects/fightinggame/style.css

Lines changed: 91 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
body {
2-
background: 'red';
3-
}
1+
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
2+
43

54
body {
65
background: 'blue';
@@ -10,6 +9,7 @@ body {
109
flex-direction: column;
1110
justify-content: center;
1211
align-items: center;
12+
font-family: 'VT323', monospace;
1313
}
1414

1515
.menu {
@@ -20,40 +20,121 @@ body {
2020
}
2121

2222
#p1 {
23-
width: 80px;
24-
height: 80px;
23+
width: 100px;
24+
height: 100px;
2525
}
2626

27-
.p1Choices {
27+
.p1Info {
2828
display: flex;
2929
flex-direction: column;
3030
justify-content: center;
3131
align-items: center;
32+
height: 300px;
33+
width: 300px;
34+
/* background: red; */
35+
}
36+
37+
#p1Name {
38+
font-size: 30px;
3239
}
3340

3441
#p1Health {
3542
font-size: 50px;
3643
}
3744

3845
#p2 {
39-
width: 80px;
40-
height: 80px;
46+
width: 100px;
47+
height: 100px;
4148
}
4249

4350

44-
.p2Choices {
51+
.p2Info {
4552
display: flex;
4653
flex-direction: column;
4754
justify-content: center;
4855
align-items: center;
56+
height: 300px;
57+
width: 300px;
58+
/* background: red; */
59+
}
60+
61+
#p2Name {
62+
font-size: 30px;
4963
}
5064

5165
#p2Health {
5266
font-size: 50px;
5367
}
5468

69+
.playerControls {
70+
display: flex;
71+
flex-direction: column;
72+
justify-content: space-around;
73+
74+
}
75+
76+
.AttackDiv {
77+
display: flex;
78+
align-items: center;
79+
justify-content: space-around;
80+
height: 40px;
81+
width: 100px;
82+
/* background: blue; */
83+
}
84+
85+
.HealDiv {
86+
display: flex;
87+
align-items: center;
88+
justify-content: space-around;
89+
height: 40px;
90+
width: 100px;
91+
/* background: yellow; */
92+
}
93+
94+
#attack {
95+
height: 30px;
96+
width: 60px;
97+
border-radius: 50px;
98+
border: none;
99+
background: #FFFF01;
100+
outline: none;
101+
102+
}
103+
104+
#heal {
105+
height: 30px;
106+
width: 60px;
107+
border-radius: 50px;
108+
border: none;
109+
background: #7DFFFF;
110+
outline: none;
111+
112+
}
113+
114+
#play {
115+
height: 50px;
116+
width: 120px;
117+
border-radius: 20px;
118+
/* border:none; */
119+
background: #02cf02;
120+
outline: none;
121+
color: white;
122+
}
123+
55124
#result {
56-
font-size: 50px
125+
font-size: 50px;
126+
color: #3dff3d;
127+
}
128+
129+
#reset {
130+
margin-top: 20px;
131+
height: 50px;
132+
width: 100px;
133+
border-radius: 20px;
134+
/* border:none; */
135+
background: #FF8800;
136+
outline: none;
137+
color: white;
57138
}
58139

59140
.resultContainer {

0 commit comments

Comments
 (0)