所以我正在制作這個(gè)文本冒險(xiǎn)游戲，基本上你可以在這張想象的地圖中輸入一組你想去的動(dòng)作。例如，在輸入框中輸入“north”，那么結(jié)果將是“你決定向北走，并遇到了一家超市”。我想知道的是，是否可以根據(jù)我選擇的目的地添加圖像？就像上面的例子一樣，我選擇了向北并最終到達(dá)了一家超市，因此結(jié)果將是一家超市的圖像。我已經(jīng)弄清楚了顯示文本的 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>
2 回答
哆啦的時(shí)光機(jī)
TA貢獻(xiàn)1779條經(jīng)驗(yàn) 獲得超6個(gè)贊
是的，可以，有兩種方法可以做到這一點(diǎn)。
解決方案 A - 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>
在這種方法中，您的 html 中有一個(gè)預(yù)定義的圖像標(biāo)簽，但它沒有 img src。您可以在您想要的時(shí)間在 JavaScript 中進(jìn)行設(shè)置 - 理想情況是當(dāng)他們選擇方向或選項(xiàng)時(shí)。
所以在你的情況下它會(huì)是這樣的：
<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>
方案B——純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>
或者使用解決方案 B，您根本不需要<img/>在 html 中定義標(biāo)簽，并且可以純粹從 javascript 創(chuàng)建它。
蝴蝶不菲
TA貢獻(xiàn)1810條經(jīng)驗(yàn) 獲得超4個(gè)贊
為此，如果采用數(shù)據(jù)驅(qū)動(dòng)的方法會(huì)更好。如果您有一組可以查詢的數(shù)據(jù)，則可以檢索所需的任何內(nèi)容，包括圖像 URL。這是您的用例的一個(gè)簡(jiǎn)單示例：
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"
}
}
};
我還在這里為其創(chuàng)建了一個(gè) Codepen：https ://codepen.io/richjava/pen/poJmKBg
我希望它有幫助。
- 2 回答
- 0 關(guān)注
- 141 瀏覽
添加回答
舉報(bào)
0/150
提交
取消