CurriculumExpansion icon indicating copy to clipboard operation
CurriculumExpansion copied to clipboard

refactor: simplify role playing game workshop

Open jdwilkin4 opened this issue 7 months ago • 0 comments

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 the frontend-cert/js-projects directory
  • [ ] add your completed project in the index.html, styles.css and script.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

jdwilkin4 avatar Jul 10 '24 16:07 jdwilkin4