我对这个社区很陌生，如果我说错话，请原谅我，但是！我目前正在开发一款文本冒险游戏，我想知道是否可以在特定的选项中添加图片。
我附上下面的代码，希望有人能给我一个例子，告诉我如何将入口图像附加到第一个id。如果需要，将提供更多的代码。
const textElement = document.getElementById('text')
const optionButtonsElement = document.getElementById('adventure')
const backgroundMusic = new Audio('audio/1066AD.mp3')
var img = new Image();
img.src="./bonezone/entry.jpg"
img.src="./bonezone/encounter.jpg"
img.src="./bonezone/enterflee.jpg"
img.src="./bonezone/chill.jpg"
img.src="./bonezone/betray.jpg"
img.src="./bonezone/betray2.jpg"
let state = {}
function startGame() {
state = {}
showTextNode(1)
}
function showTextNode(textDex) {
const textNode = textNodes.find(textNode => textNode.id === textDex)
textElement.innerText = textNode.text
while (optionButtonsElement.firstChild) {
optionButtonsElement.removeChild(optionButtonsElement.firstChild)
}
textNode.options.forEach(option => {
if (showOption(option)) {
const button = document.createElement('button')
button.innerText = option.text
button.classList.add('action')
button.addEventListener('click', () => selectOption(option))
backgroundMusic.play()
backgroundMusic.volume = 0.5
backgroundMusic.loop = true
optionButtonsElement.appendChild(button)
}
})
}
function showOption(option) {
return option.requiredState == null || option.requiredState(state)
}
function selectOption(option) {
const nextTextNodeId = option.nextText
if (nextTextNodeId <= 0) {
return startGame()
}
state = Object.assign(state, option.setState)
showTextNode(nextTextNodeId)
}
// var img = new Image();
// img.onload = function () {
// }
// img.src = "./bonezone/entry.jpg";
const textNodes = [
{
id: 1,
text: 'You have entered the House of 1000 Mysteries. What will you do?',
options: [
{
text: 'Stay',
nextText: 2
},
{
text: 'Leave',
nextText: 10
}
]
},
{
id: 10,
text: 'You win I guess?',
options: [
{
text: 'Restart',
nextText: -1
}
]
},
{
id: 2,
text: 'You encounter a skeleTon, what do?',
options: [
{
text: 'Hang out with skeleTon',
nextText: 11
},
{
text: 'Flee',
nextText: 3
},
{
text: 'Beat its boney ass',
nextText: 13
}
]
},
]
startGame()body {
background-image: url('https://ctl.s6img.com/society6/img/XwPVT5-2iWMchyOwGguQwyGpjyc/w_1500/coffee-mugs/swatch/~artwork,fw_4600,fh_2000,fy_-152,iw_4600,ih_2304/s6-original-art-uploads/society6/uploads/misc/cfcb876ea05e469aa8336908a988ade2/~~/dungeon-wall-twilight-mugs.jpg') ;
background-size: cover;
}
img {
height: 350px;
}
body {
padding: 0;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
font-size: 25px;
font-family: 'Yatra One', cursive;
}
.container {
width: 650px;
max-width: 80%;
background-color: gray;
padding: 10px;
border-radius: 5px;
box-shadow: 0 0 10px 2px;
}
.choice {
display: grid;
grid-template-columns: repeat(2, auto);
gap: 10px;
margin-top: 20px;
}
.action {
background-color: blue;
border: 3px solid black;
border-radius: 5px;
padding: 5px 10px;
color: white;
outline: none;
}
.action:hover {
border-color: black;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>House of 1000 Mysteries</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./css/style.css">
<script defer src='./js/app.js'></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Yatra+One&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<div id="text"></div>
<img id="journey"
src="./bonezone/entry.jpg">
<div id="adventure" class="choice">
<button class="action">choice 1</button>
<button class="action">choice 2</button>
<button class="action">choice 3</button>
<button class="action">choice 4</button>
</div>
</body>
</html>
1条答案
按热度按时间h79rfbju1#
您可以做的是添加一个
image:字段，然后使用journey.src = textNode.image: