CurriculumExpansion
CurriculumExpansion copied to clipboard
refactor: simplify role playing game workshop
This project will be in the events and DOM module. So campers will have already learned the core fundamentals in smaller projects before this.
https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures-v8/learn-basic-javascript-by-building-a-role-playing-game/step-173
But the role playing game has to much going on. There are currently 173 steps which is to many. This needs to be cut down.
We should remove all of the easter eggs stuff here because there will already be a smaller guessing game project.
function easterEgg() {
update(locations[7]);
}
function pickTwo() {
pick(2);
}
function pickEight() {
pick(8);
}
function pick(guess) {
const numbers = [];
while (numbers.length < 10) {
numbers.push(Math.floor(Math.random() * 11));
}
text.innerText = "You picked " + guess + ". Here are the random numbers:\n";
for (let i = 0; i < 10; i++) {
text.innerText += numbers[i] + "\n";
}
if (numbers.includes(guess)) {
text.innerText += "Right! You win 20 gold!";
gold += 20;
goldText.innerText = gold;
} else {
text.innerText += "Wrong! You lose 10 health!";
health -= 10;
healthText.innerText = health;
if (health <= 0) {
lose();
}
}
}
We are also using inline handlers, but we should remove those. Here are some examples
button1.onclick = location["button functions"][0];
// initialize buttons
button1.onclick = goStore;
button2.onclick = goCave;
button3.onclick = fightDragon;
We should remove all onclicks and just use addEventListener and removeEventListener. Campers will have learned how to work with these methods in lecture videos, a smaller workshop and a lab before this role playing game workshop.
Lastly, we need to update the placement for these variable declarations.
Right now all of the variables are declared at the top.
But there are some variables that aren't used until several lines of code later like the fighting
variable.
So move the variable declarations, when appropriate, closer to where they will be used
Acceptance criteria
- [ ] create a new folder called
role-playing-game
in thefrontend-cert/js-projects
directory - [ ] add your completed project in the
index.html
,styles.css
andscript.js
files in that new folder - [ ] remove the easter egg stuff
- [ ] remove all onclicks and replace with addEventListener and removeEventListener
- [ ] move variable declarations, when appropriate, closer to where they will be used