因此，我正在制作此文本冒险游戏，基本上，您可以在该假想图中的位置输入一组动作。例如，在输入框“北”中键入，然后结果将是“您决定向北走，并迎接了一家超级市场”。我想知道的是，是否可以根据选择的目的地添加图像？像上面的示例一样，我选择北向，最终到达了一家超市，因此结果将是超市的图像。我已经弄清楚了if语句的工作原理，该语句显示文本以使玩家知道他去了哪里，但我还想知道如何在图像中添加图像？
...
<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>
在html中，存在<img>标记，可用于放置图像。
我认为实现此目的的一种可能方法是，通过创建一个带有空src的img标签，然后使用您要显示的图像的链接设置src属性。
是的，您可以通过两种方式执行此操作。
<!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>
在这种方法中，您的html中有一个预定义的图像标签，但没有img src。您可以在JavaScript中设置所需的时间-理想情况下，当他们选择方向或选项时就可以使用。
因此您的情况将是这样：
<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>
<!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>
或者用解决方案B，您完全不需要在html中定义<img/>标记，而可以完全从javascript创建它。
我建议阅读本文档以获取更多详细信息here
希望对您有帮助。
为此，如果您采用数据驱动的方法，那就更好了。如果您有一组可以查询的数据，则可以检索所需的任何内容，包括图像URL。这是您的用例的一个简单示例：
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"
}
}
};
我还在这里为此创建了一个Codepen：https://codepen.io/richjava/pen/poJmKBg
我希望它会有所帮助。