Robię więc tę przygodową grę tekstową i po prostu możesz wpisać zestaw działań, w którym chcesz się udać na tej wyimaginowanej mapie. Na przykład wpisz w polu wprowadzania „północ”, a wynik będzie brzmiał „zdecydowałeś się pojechać na północ i zostałeś powitany przez supermarket”. Chciałbym wiedzieć, czy to możliwe, gdybym mógł dodać obraz na podstawie wybranego przeze mnie miejsca docelowego? Podobnie jak w powyższym przykładzie wybrałem północ i trafiłem do supermarketu, więc wynikiem będzie obraz supermarketu. Rozgryzłem już działanie instrukcji if wyświetlających tekst, aby dać graczowi znać, gdzie się udał, ale chciałbym również wiedzieć, jak dodać obraz wraz z nim?

...

<p> Pick a direction to go </p>

<input id = "input" type = "text" placeholder = "Type Help for actions"/><button onClick = "button()">Confirm</button>
<p id = "message"></p>


<script>

  function button() {
    var textInput;
    var newInput = input.value;
    if (newInput == "North") {
      textInput = "you went to the Abandoned Church";
      document.getElementById("message").innerHTML = textInput;
    }

    if (newInput == "North Again") {
      textInput = "you went to the Abandoned Someplace";
      document.getElementById("message").innerHTML = textInput;
    }

    if (newInput == "Help") {
      textInput = "Commands you can use: <ul><li>South</li><li>North</li><li>East</li><li>West</li><li>North Again</li><li>South again</li><li>West Again</li><li>East Again</li><li>North One More</li><li>East Once More</li><li>West Once More</li><li>South Once More</li>";
      document.getElementById("message").innerHTML = textInput;
    }


  }

</script>
1
The.Epistemophile.Bibliophile 3 kwiecień 2020, 23:35

3 odpowiedzi

Najlepsza odpowiedź

Tak, możesz to zrobić na dwa sposoby.

Rozwiązanie A - kombinacja HTML / JS:

<!DOCTYPE html>
<html>
<body>

<img id="myImg"/>

<p>Click the button to change the value of the src attribute of the image.</p>
<p><b>Note:</b> The src property can be changed at any time. However, the new image inherits the height and width attributes of the original image, if not new height and width properties are specified.</p>
<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  document.getElementById("myImg").src = "hackanm.gif";
}
</script>

</body>
</html>

W tym podejściu masz wstępnie zdefiniowany tag obrazu w swoim html, ale nie ma on img src. Możesz ustawić to w dowolnym momencie w swoim javascript - najlepiej, gdy wybierają kierunek lub opcję.

Więc w twoim przypadku wyglądałoby to tak:

<p> Pick a direction to go </p>

<img id="myImg"/>

<input id = "input" type = "text" placeholder = "Type Help for actions"/><button onClick = "button()">Confirm</button>
<p id = "message"></p>


<script>

  function button() {
    var textInput;
    var newInput = input.value;
    if (newInput == "North") {
      textInput = "you went to the Abandoned Church";
      document.getElementById("message").innerHTML = textInput;
      document.getElementById("myImg").src = "church.png";
    }

    if (newInput == "North Again") {
      textInput = "you went to the Abandoned Someplace";
      document.getElementById("message").innerHTML = textInput;
      document.getElementById("myImg").src = "abandoned.png";
    }

    if (newInput == "Help") {
      textInput = "Commands you can use: <ul><li>South</li><li>North</li><li>East</li><li>West</li><li>North Again</li><li>South again</li><li>West Again</li><li>East Again</li><li>North One More</li><li>East Once More</li><li>West Once More</li><li>South Once More</li>";
      document.getElementById("message").innerHTML = textInput;
    }


  }

</script>

Rozwiązanie B - czysto JS:

<!DOCTYPE html>
<html>
<body>

<p>Click the button to change the value of the src attribute of the image.</p>
<p><b>Note:</b> The src property can be changed at any time. However, the new image inherits the height and width attributes of the original image, if not new height and width properties are specified.</p>
<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  var img = document.createElement("img");
  img.id = "myImg";
  document.body.appendChild(img);
  document.getElementById("myImg").src = "hackanm.gif";
}
</script>

</body>
</html>

Alternatywnie, w przypadku rozwiązania B , nie musisz w ogóle definiować tagu <img/> w swoim html i możesz go utworzyć wyłącznie z javascript.

Proponuję przeczytać ten dokument, aby uzyskać więcej informacji tutaj

Mam nadzieję, że to Ci pomoże.

0
Shane Creedon 3 kwiecień 2020, 20:51

W tym celu byłoby lepiej, gdybyś przyjęła podejście oparte na danych. Jeśli masz zestaw danych, do których możesz przeszukiwać, możesz pobrać wszystko, czego potrzebujesz, w tym adresy URL obrazów. Oto prosty przykład dla twojego przypadku użycia:

let data = {
      options: {
        North: {
          message: "you went to the Abandoned Church",
          image: "https://picsum.photos/200/300?random=1"
        },
        South: {
          message: "you went to the Abandoned Someplace",
          image: "https://picsum.photos/200/300?random=2"
        }
      }
    };

Utworzyłem również dla niego Codepen tutaj: https://codepen.io/richjava/pen/poJmKBg

Mam nadzieję, że to pomoże.

0
Richard Lovell 3 kwiecień 2020, 21:04

W html istnieje tag <img>, który pozwala na umieszczenie obrazu.

Myślę, że możliwym sposobem na to jest utworzenie tagu img z pustym src, a następnie ustawienie atrybutu src z linkiem do obrazu, który chcesz wyświetlić.

Tutaj znajdziesz przykład.

0
Vito Ruggirello 3 kwiecień 2020, 20:47