Возврат к предыдущим пунктам меню в Javascript - PullRequest
Новая
       10

Возврат к предыдущим пунктам меню в Javascript

0 голосов
/ 12 июля 2020

Я работал над текстовой боевой последовательностью RPG с ванильным JS, в которой кнопки используются для атаки игрока, используйте magi c, et c. Кнопки для обоих действий созданы отлично и правильно работают в моем проекте, но проблема возникает, когда я использую magi c. Есть несколько заклинаний на выбор. Таким образом, я настроил его так, чтобы кнопки генерировались для каждого соответствующего заклинания при нажатии кнопки «Magi c». Эти кнопки заклинаний также работают, но после применения заклинания мне нужно вернуться к исходным кнопкам «Атака» и «Маги c», чтобы можно было выполнить следующее действие в последовательности битвы. Я не уверен, как go сделать это с тем, как я настроил свой код для создания кнопок, и я ищу некоторые рекомендации о том, как действовать: 

const optionButtonsElement = document.getElementById("option-btns");


class Spell {
  constructor(name) {
    this.name = name;
  }
}

class Person {
  constructor(magic) {
    this.magic = magic;
    this.actions = ["Attack", "Magic"];
  }
}

//spells
var fire = new Spell("Fire");
var meteor = new Spell("Meteor");
var cure = new Spell("Cure");

var playerSpells = [fire, meteor, cure];

// create player
let player1 = new Person(playerSpells);

function combatSequence() {
  while (optionButtonsElement.firstChild) {
    optionButtonsElement.removeChild(optionButtonsElement.firstChild);
  }

  for (var i = 0; i < player1.actions.length; i++) {
    const button = document.createElement("button");
    button.innerText = player1.actions[i];
    // Add enemy attack functions in 'if' statements to keep combat going
    if (i === 0) {
      // Add event listener to atk btn
    } else if (i === 1) {
      button.addEventListener("click", () => {
        console.log("Magic btn clicked");
        while (optionButtonsElement.firstChild) {
          optionButtonsElement.removeChild(optionButtonsElement.firstChild);
        }
        for (var j = 0; j < player1.magic.length; j++) {
          const magButton = document.createElement("button");
          magButton.innerText = player1.magic[j].name;

          // create btn for spell
          if (j === 0) {
            magButton.addEventListener("click", () => {
              console.log("Player uses fire");

            });
          } else if (j === 1) {
            magButton.addEventListener("click", () => {
              console.log("Player uses meteor");
            });
          } else if (j === 2) {
            magButton.addEventListener("click", () => {
              console.log("Player uses heal");
              while (optionButtonsElement.firstChild) {
                optionButtonsElement.removeChild(optionButtonsElement.firstChild);
              }
            });
          }
          optionButtonsElement.appendChild(magButton);
        }
      });
    }
    optionButtonsElement.appendChild(button);
  }
}

combatSequence();
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Text Adventure</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div id="option-btns" class="btn-grid">
      <button class="btn">Option 1</button>
      <button class="btn">Option 2</button>
      <button class="btn">Option 3</button>
      <button class="btn">Option 4</button>
    </div>
  </div>
</body>

Любые мысли или советы будут оценены. Скорее всего, есть более простой вариант, который мне здесь не хватает. Я старался ограничить код только тем, что было необходимо, но если есть слишком много лишнего, дайте мне знать. Спасибо!

1 Ответ

0 голосов
/ 12 июля 2020

, поскольку функция combatSequence () динамически создает кнопки и события щелчка, вызова той же функции при щелчке определенного c заклинания (в конце кода действия заклинания) будет достаточно

проверьте обновление ниже или это скрипка 

const optionButtonsElement = document.getElementById("option-btns");

class Spell
{
    constructor(name)
    {
        this.name = name;
    }
}

class Person
{
    constructor(magic)
    {
        this.magic = magic;
        this.actions = ["Attack","Magic"];
    }
}

//spells
var fire = new Spell("Fire");
var meteor = new Spell("Meteor");
var cure = new Spell("Cure");

var playerSpells = [fire, meteor, cure];

// create player
let player1 = new Person(playerSpells);

function combatSequence()
{
        // while loop removes default html buttons on screen, replaced by the 'attack' and 'magic' buttons
    while(optionButtonsElement.firstChild)
    {
        optionButtonsElement.removeChild(optionButtonsElement.firstChild);
    }
        // creates the 'attack' and 'magic' buttons
    // 'i' is the index value for player1.actions[]
    for(var i = 0; i < player1.actions.length; i++)
    {
        const button = document.createElement("button");
        button.innerText = player1.actions[i];
        // Player 'attack' buttons
        if(i === 0)
        {   
            button.addEventListener("click", () =>
            {
                    console.log("Player attacks");
            });
        }
        // Player 'magic' button
        else if(i === 1)
        {
            button.addEventListener("click", () => 
            {
                console.log("Magic btn clicked");
                while(optionButtonsElement.firstChild)
                {
                    optionButtonsElement.removeChild(optionButtonsElement.firstChild);
                }
                
                // creates the 'spell' buttons after 'Magic' is clicked
                for(var j = 0; j < player1.magic.length; j++)
                {
                    const magButton = document.createElement("button");
                    magButton.innerText = player1.magic[j].name;

                    // creates spell 'fire' button
                    if(j === 0)
                    {
                        magButton.addEventListener("click", () =>
                        {
                            console.log("Player uses fire");
                            combatSequence();

                        });
                    }
                                        // creates meteor button
                    else if(j === 1)
                    {
                        magButton.addEventListener("click", () =>
                        {
                            console.log("Player uses meteor");
                            combatSequence();
                        });
                    }
                    // creates cure button
                    else if(j === 2)
                    {
                        magButton.addEventListener("click", () =>
                        {
                            console.log("Player uses heal");
                            // tried this here to see if the buttons would be removed on spell click
                            while(optionButtonsElement.firstChild)
                            {
                                optionButtonsElement.removeChild(optionButtonsElement.firstChild);
                            }
                            combatSequence();
                        });
                    }
                    // adds spell buttons to html after 'magic' is clicked
                    optionButtonsElement.appendChild(magButton);
                }
            });
        }
        // adds the 'attack' and 'magic' buttons to html page
        optionButtonsElement.appendChild(button);
    }
}

combatSequence();
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Text Adventure</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="container">
            <div id="option-btns" class="btn-grid">
                <button class="btn">Option 1</button>
                <button class="btn">Option 2</button>
                <button class="btn">Option 3</button>
                <button class="btn">Option 4</button>
            </div>
        </div>

        <script src="main(SOE).js"></script>
    </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...