opensource/freeCodeCamp
3
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-09-24 23:01:18 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(curriculum): combine step 150 and step 151 in js beta build a RPG (#55095)

Browse Source
This commit is contained in:
Duong The Pham
2024-06-06 17:28:23 -07:00
committed by GitHub
parent 1272172674
commit 09f2c4dc99
26 changed files with 87 additions and 426 deletions
Download Patch File Download Diff File Expand all files Collapse all files
curriculum/challenges/_meta/learn-basic-javascript-by-building-a-role-playing-game/meta.json
+24 -28
View File
@@ -605,104 +605,100 @@
"title": "Step 149"
},
{
"id": "62aa1fed3d4e873366ff3131",
"id": "62aa204c1e1d33348ff09944",
"title": "Step 150"
},
{
"id": "62aa204c1e1d33348ff09944",
"id": "62aa20e9cf1be9358f5aceae",
"title": "Step 151"
},
{
"id": "62aa20e9cf1be9358f5aceae",
"id": "62aa2136fc49b836dfedb959",
"title": "Step 152"
},
{
"id": "62aa2136fc49b836dfedb959",
"id": "62aa21971e3b743844849985",
"title": "Step 153"
},
{
"id": "62aa21971e3b743844849985",
"id": "62aa21ea8d9d9f396b95dd87",
"title": "Step 154"
},
{
"id": "62aa21ea8d9d9f396b95dd87",
"id": "62aa226207f33d3ad4c6f546",
"title": "Step 155"
},
{
"id": "62aa226207f33d3ad4c6f546",
"id": "62aa22aba186563bcbf2c395",
"title": "Step 156"
},
{
"id": "62aa22aba186563bcbf2c395",
"id": "62aa234322d4ad3e8bce42cc",
"title": "Step 157"
},
{
"id": "62aa234322d4ad3e8bce42cc",
"id": "62aa2469c77b363fdb4f0e06",
"title": "Step 158"
},
{
"id": "62aa2469c77b363fdb4f0e06",
"id": "62aa252c3b1073415ba2b898",
"title": "Step 159"
},
{
"id": "62aa252c3b1073415ba2b898",
"id": "62aa258da314ef42ba0a1858",
"title": "Step 160"
},
{
"id": "62aa258da314ef42ba0a1858",
"id": "62aa25fcb5837d43b4d9873d",
"title": "Step 161"
},
{
"id": "62aa25fcb5837d43b4d9873d",
"id": "62aa2626c3c10244b94c787b",
"title": "Step 162"
},
{
"id": "62aa2626c3c10244b94c787b",
"id": "62aa264d23cdaa45a20efada",
"title": "Step 163"
},
{
"id": "62aa264d23cdaa45a20efada",
"id": "62aa26cca3cd3d46c431e73b",
"title": "Step 164"
},
{
"id": "62aa26cca3cd3d46c431e73b",
"id": "62aa27227399d647e1c37a3c",
"title": "Step 165"
},
{
"id": "62aa27227399d647e1c37a3c",
"id": "62aa27560def7048d7b4a095",
"title": "Step 166"
},
{
"id": "62aa27560def7048d7b4a095",
"id": "62aa27c40ca6f04ab8be5fac",
"title": "Step 167"
},
{
"id": "62aa27c40ca6f04ab8be5fac",
"id": "62aa28fb651bf14efa2dbb16",
"title": "Step 168"
},
{
"id": "62aa28fb651bf14efa2dbb16",
"id": "62aa2943669c9d5026af6985",
"title": "Step 169"
},
{
"id": "62aa2943669c9d5026af6985",
"id": "62aa2999ec27ec516655eba6",
"title": "Step 170"
},
{
"id": "62aa2999ec27ec516655eba6",
"id": "62aa29d8f8f88152c91350ca",
"title": "Step 171"
},
{
"id": "62aa29d8f8f88152c91350ca",
"id": "62aa2aec2f09d454253aad6c",
"title": "Step 172"
},
{
"id": "62aa2aec2f09d454253aad6c",
"title": "Step 173"
},
{
"id": "62aa2ba9cd881355a6f0a5a8",
"title": "Step 174"
"title": "Step 173"
}
]
}
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1fed3d4e873366ff3131.md
-344
View File
@@ -1,344 +0,0 @@
---
id: 62aa1fed3d4e873366ff3131
title: Step 150
challengeType: 0
dashedName: step-150
---
# --description--
In your `attack` function, below the `health` variable, create an `if` statement. Set the condition to call the `isMonsterHit` function.
# --hints--
You should add an `if` statement which calls `isMonsterHit` in the condition.
```js
assert.match(attack.toString(), /if\s*\(\s*isMonsterHit\s*\(\s*\)/)
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./styles.css">
<title>RPG - Dragon Repeller</title>
</head>
<body>
<div id="game">
<div id="stats">
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
</div>
<div id="controls">
<button id="button1">Go to store</button>
<button id="button2">Go to cave</button>
<button id="button3">Fight dragon</button>
</div>
<div id="monsterStats">
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
</div>
<div id="text">
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
</div>
</div>
<script src="./script.js"></script>
</body>
</html>
```
```css
body {
background-color: #0a0a23;
}
#text {
background-color: #0a0a23;
color: #ffffff;
padding: 10px;
}
#game {
max-width: 500px;
max-height: 400px;
background-color: #ffffff;
color: #ffffff;
margin: 30px auto 0px;
padding: 10px;
}
#controls,
#stats {
border: 1px solid #0a0a23;
padding: 5px;
color: #0a0a23;
}
#monsterStats {
display: none;
border: 1px solid #0a0a23;
padding: 5px;
color: #ffffff;
background-color: #c70d0d;
}
.stat {
padding-right: 10px;
}
button {
cursor: pointer;
color: #0a0a23;
background-color: #feac32;
background-image: linear-gradient(#fecc4c, #ffac33);
border: 3px solid #feac32;
}
```
```js
let xp = 0;
let health = 100;
let gold = 50;
let currentWeaponIndex = 0;
let fighting;
let monsterHealth;
let inventory = ["stick"];
const button1 = document.querySelector('#button1');
const button2 = document.querySelector("#button2");
const button3 = document.querySelector("#button3");
const text = document.querySelector("#text");
const xpText = document.querySelector("#xpText");
const healthText = document.querySelector("#healthText");
const goldText = document.querySelector("#goldText");
const monsterStats = document.querySelector("#monsterStats");
const monsterName = document.querySelector("#monsterName");
const monsterHealthText = document.querySelector("#monsterHealth");
const weapons = [
{ name: 'stick', power: 5 },
{ name: 'dagger', power: 30 },
{ name: 'claw hammer', power: 50 },
{ name: 'sword', power: 100 }
];
const monsters = [
{
name: "slime",
level: 2,
health: 15
},
{
name: "fanged beast",
level: 8,
health: 60
},
{
name: "dragon",
level: 20,
health: 300
}
]
const locations = [
{
name: "town square",
"button text": ["Go to store", "Go to cave", "Fight dragon"],
"button functions": [goStore, goCave, fightDragon],
text: "You are in the town square. You see a sign that says \"Store\"."
},
{
name: "store",
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
"button functions": [buyHealth, buyWeapon, goTown],
text: "You enter the store."
},
{
name: "cave",
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
"button functions": [fightSlime, fightBeast, goTown],
text: "You enter the cave. You see some monsters."
},
{
name: "fight",
"button text": ["Attack", "Dodge", "Run"],
"button functions": [attack, dodge, goTown],
text: "You are fighting a monster."
},
{
name: "kill monster",
"button text": ["Go to town square", "Go to town square", "Go to town square"],
"button functions": [goTown, goTown, goTown],
text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.'
},
{
name: "lose",
"button text": ["REPLAY?", "REPLAY?", "REPLAY?"],
"button functions": [restart, restart, restart],
text: "You die. &#x2620;"
},
{
name: "win",
"button text": ["REPLAY?", "REPLAY?", "REPLAY?"],
"button functions": [restart, restart, restart],
text: "You defeat the dragon! YOU WIN THE GAME! &#x1F389;"
}
];
// initialize buttons
button1.onclick = goStore;
button2.onclick = goCave;
button3.onclick = fightDragon;
function update(location) {
monsterStats.style.display = "none";
button1.innerText = location["button text"][0];
button2.innerText = location["button text"][1];
button3.innerText = location["button text"][2];
button1.onclick = location["button functions"][0];
button2.onclick = location["button functions"][1];
button3.onclick = location["button functions"][2];
text.innerHTML = location.text;
}
function goTown() {
update(locations[0]);
}
function goStore() {
update(locations[1]);
}
function goCave() {
update(locations[2]);
}
function buyHealth() {
if (gold >= 10) {
gold -= 10;
health += 10;
goldText.innerText = gold;
healthText.innerText = health;
} else {
text.innerText = "You do not have enough gold to buy health.";
}
}
function buyWeapon() {
if (currentWeaponIndex < weapons.length - 1) {
if (gold >= 30) {
gold -= 30;
currentWeaponIndex++;
goldText.innerText = gold;
let newWeapon = weapons[currentWeaponIndex].name;
text.innerText = "You now have a " + newWeapon + ".";
inventory.push(newWeapon);
text.innerText += " In your inventory you have: " + inventory;
} else {
text.innerText = "You do not have enough gold to buy a weapon.";
}
} else {
text.innerText = "You already have the most powerful weapon!";
button2.innerText = "Sell weapon for 15 gold";
button2.onclick = sellWeapon;
}
}
function sellWeapon() {
if (inventory.length > 1) {
gold += 15;
goldText.innerText = gold;
let currentWeapon = inventory.shift();
text.innerText = "You sold a " + currentWeapon + ".";
text.innerText += " In your inventory you have: " + inventory;
} else {
text.innerText = "Don't sell your only weapon!";
}
}
function fightSlime() {
fighting = 0;
goFight();
}
function fightBeast() {
fighting = 1;
goFight();
}
function fightDragon() {
fighting = 2;
goFight();
}
function goFight() {
update(locations[3]);
monsterHealth = monsters[fighting].health;
monsterStats.style.display = "block";
monsterName.innerText = monsters[fighting].name;
monsterHealthText.innerText = monsterHealth;
}
--fcc-editable-region--
function attack() {
text.innerText = "The " + monsters[fighting].name + " attacks.";
text.innerText += " You attack it with your " + weapons[currentWeaponIndex].name + ".";
health -= getMonsterAttackValue(monsters[fighting].level);
monsterHealth -= weapons[currentWeaponIndex].power + Math.floor(Math.random() * xp) + 1;
healthText.innerText = health;
monsterHealthText.innerText = monsterHealth;
if (health <= 0) {
lose();
} else if (monsterHealth <= 0) {
if (fighting === 2) {
winGame();
} else {
defeatMonster();
}
}
}
--fcc-editable-region--
function getMonsterAttackValue(level) {
const hit = (level * 5) - (Math.floor(Math.random() * xp));
console.log(hit);
return hit > 0 ? hit : 0;
}
function dodge() {
text.innerText = "You dodge the attack from the " + monsters[fighting].name;
}
function defeatMonster() {
gold += Math.floor(monsters[fighting].level * 6.7);
xp += monsters[fighting].level;
goldText.innerText = gold;
xpText.innerText = xp;
update(locations[4]);
}
function lose() {
update(locations[5]);
}
function winGame() {
update(locations[6]);
}
function restart() {
xp = 0;
health = 100;
gold = 50;
currentWeaponIndex = 0;
inventory = ["stick"];
goldText.innerText = gold;
healthText.innerText = health;
xpText.innerText = xp;
goTown();
}
```
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa204c1e1d33348ff09944.md
+17 -8
View File
@@ -1,20 +1,32 @@
---
id: 62aa204c1e1d33348ff09944
title: Step 151
title: Step 150
challengeType: 0
dashedName: step-151
dashedName: step-150
---
# --description--
Move your `monsterHealth` assignment into your `if` block.
In your attack function, find the line of code that updates the `monsterHealth` variable and place it within an `if` block with a condition that calls the `isMonsterHit` function.
# --hints--
You should move your `monsterHealth -= weapons[currentWeaponIndex].power + Math.floor(Math.random() * xp) + 1` into your `if` block.
You should add an `if` statement.
```js
assert.match(attack.toString(), /if\s*\(\s*isMonsterHit\(\s*\)\s*\)\s*\{\s*monsterHealth\s*-=\s*weapons\s*\[\s*currentWeaponIndex\s*\]\s*\.power\s*\+\s*Math\.floor\(\s*Math\.random\(\s*\)\s*\*\s*xp\s*\)\s*\+\s*1/)
assert.lengthOf(attack.toString().match(/if/g), 4)
```
Your `if` statement should call `isMonsterHit` in the condition.
```js
assert.match(attack.toString(), /if\s*\(\s*isMonsterHit\s*\(\s*\)/)
```
You should place your `monsterHealth -= weapons[currentWeaponIndex].power + Math.floor(Math.random() * xp) + 1` into your `if` block.
```js
assert.match(attack.toString(), /if\s*\(\s*isMonsterHit\s*\(\s*\)\s*\)\s*\{\s*monsterHealth\s*-=\s*weapons\s*\[\s*currentWeaponIndex\s*\]\s*\.power\s*\+\s*Math\.floor\(\s*Math\.random\(\s*\)\s*\*\s*xp\s*\)\s*\+\s*1/)
```
# --seed--
@@ -288,9 +300,6 @@ function attack() {
text.innerText = "The " + monsters[fighting].name + " attacks.";
text.innerText += " You attack it with your " + weapons[currentWeaponIndex].name + ".";
health -= getMonsterAttackValue(monsters[fighting].level);
if (isMonsterHit()) {
}
monsterHealth -= weapons[currentWeaponIndex].power + Math.floor(Math.random() * xp) + 1;
healthText.innerText = health;
monsterHealthText.innerText = monsterHealth;
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa20e9cf1be9358f5aceae.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 62aa20e9cf1be9358f5aceae
title: Step 152
title: Step 151
challengeType: 0
dashedName: step-152
dashedName: step-151
---
# --description--
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2136fc49b836dfedb959.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 62aa2136fc49b836dfedb959
title: Step 153
title: Step 152
challengeType: 0
dashedName: step-153
dashedName: step-152
---
# --description--
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa21971e3b743844849985.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 62aa21971e3b743844849985
title: Step 154
title: Step 153
challengeType: 0
dashedName: step-154
dashedName: step-153
---
# --description--
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa21ea8d9d9f396b95dd87.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 62aa21ea8d9d9f396b95dd87
title: Step 155
title: Step 154
challengeType: 0
dashedName: step-155
dashedName: step-154
---
# --description--
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa226207f33d3ad4c6f546.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 62aa226207f33d3ad4c6f546
title: Step 156
title: Step 155
challengeType: 0
dashedName: step-156
dashedName: step-155
---
# --description--
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa22aba186563bcbf2c395.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 62aa22aba186563bcbf2c395
title: Step 157
title: Step 156
challengeType: 0
dashedName: step-157
dashedName: step-156
---
# --description--
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa234322d4ad3e8bce42cc.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 62aa234322d4ad3e8bce42cc
title: Step 158
title: Step 157
challengeType: 0
dashedName: step-158
dashedName: step-157
---
# --description--
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2469c77b363fdb4f0e06.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 62aa2469c77b363fdb4f0e06
title: Step 159
title: Step 158
challengeType: 0
dashedName: step-159
dashedName: step-158
---
# --description--
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa252c3b1073415ba2b898.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 62aa252c3b1073415ba2b898
title: Step 160
title: Step 159
challengeType: 0
dashedName: step-160
dashedName: step-159
---
# --description--
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa258da314ef42ba0a1858.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 62aa258da314ef42ba0a1858
title: Step 161
title: Step 160
challengeType: 0
dashedName: step-161
dashedName: step-160
---
# --description--
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa25fcb5837d43b4d9873d.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 62aa25fcb5837d43b4d9873d
title: Step 162
title: Step 161
challengeType: 0
dashedName: step-162
dashedName: step-161
---
# --description--
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2626c3c10244b94c787b.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 62aa2626c3c10244b94c787b
title: Step 163
title: Step 162
challengeType: 0
dashedName: step-163
dashedName: step-162
---
# --description--
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa264d23cdaa45a20efada.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 62aa264d23cdaa45a20efada
title: Step 164
title: Step 163
challengeType: 0
dashedName: step-164
dashedName: step-163
---
# --description--
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa26cca3cd3d46c431e73b.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 62aa26cca3cd3d46c431e73b
title: Step 165
title: Step 164
challengeType: 0
dashedName: step-165
dashedName: step-164
---
# --description--
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27227399d647e1c37a3c.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 62aa27227399d647e1c37a3c
title: Step 166
title: Step 165
challengeType: 0
dashedName: step-166
dashedName: step-165
---
# --description--
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27560def7048d7b4a095.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 62aa27560def7048d7b4a095
title: Step 167
title: Step 166
challengeType: 0
dashedName: step-167
dashedName: step-166
---
# --description--
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27c40ca6f04ab8be5fac.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 62aa27c40ca6f04ab8be5fac
title: Step 168
title: Step 167
challengeType: 0
dashedName: step-168
dashedName: step-167
---
# --description--
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa28fb651bf14efa2dbb16.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 62aa28fb651bf14efa2dbb16
title: Step 169
title: Step 168
challengeType: 0
dashedName: step-169
dashedName: step-168
---
# --description--
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2943669c9d5026af6985.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 62aa2943669c9d5026af6985
title: Step 170
title: Step 169
challengeType: 0
dashedName: step-170
dashedName: step-169
---
# --description--
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2999ec27ec516655eba6.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 62aa2999ec27ec516655eba6
title: Step 171
title: Step 170
challengeType: 0
dashedName: step-171
dashedName: step-170
---
# --description--
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa29d8f8f88152c91350ca.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 62aa29d8f8f88152c91350ca
title: Step 172
title: Step 171
challengeType: 0
dashedName: step-172
dashedName: step-171
---
# --description--
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2aec2f09d454253aad6c.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 62aa2aec2f09d454253aad6c
title: Step 173
title: Step 172
challengeType: 0
dashedName: step-173
dashedName: step-172
---
# --description--
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2ba9cd881355a6f0a5a8.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 62aa2ba9cd881355a6f0a5a8
title: Step 174
title: Step 173
challengeType: 0
dashedName: step-174
dashedName: step-173
---
# --description--