Javascript 文本游戏框架：使用DIV和LI
我正在使用CSS和Javascript为文本游戏创建框架 我正在尝试制作一个div或li，或者它可以是任何其他的东西，只要它尽可能理想，可以使文本出现在另一个div中。我也不确定是否要使用ID或类来完成一些事情 我知道这听起来很模糊！运行我的JSFIDLE查看我正试图做什么，您将立即看到我试图做什么。你会怎么做？-> 谢谢大家,Javascript 文本游戏框架：使用DIV和LI,javascript,css,Javascript,Css,我正在使用CSS和Javascript为文本游戏创建框架 我正在尝试制作一个div或li，或者它可以是任何其他的东西，只要它尽可能理想，可以使文本出现在另一个div中。我也不确定是否要使用ID或类来完成一些事情 我知道这听起来很模糊！运行我的JSFIDLE查看我正试图做什么，您将立即看到我试图做什么。你会怎么做？-> 谢谢大家, <body> <div id='everything'> <div id='rooms'> <ul i
<body>
<div id='everything'>
<div id='rooms'>
<ul id='house'>
<li id='living'>Living Room</li>
<li id='kitchen'>Kitchen</li>
<li id='bathroom'>Bathroom</li>
<li id='bedroom'>Bedroom</li>
<li id='extra'>Extra Room</li>
<li id='balcony'>Balcony
<br></br>Visit rooms, click on a room and the room description shows in the light blue div. HOW TO DO THIS?</li>
</ul>
</div>
<div id='big'>
<div id='story'>
<ul id='storylist'>
<li>
<br>Story Line (main game screen)</br>This is where the story is told.
<br>Messages like "you picked up a hammer"</br>"You try the door but it's locked", dialogue, etc.
<br>The story progresses here. No interactivity in this part.</br>My idea is to just add li's with javascript here.</li>
</ul>
</div>
<div id='descr'>When you enter a room, the description shows here. The description of the room is sometimes different, it depends on story progress. How to make room descriptions flexible for the same room? You can click on items here, making them unclickable the second time, and they'll go to the inventory.
<BR></BR>WHAT SYSTEM is best for items? Item=div, items are li, or...??
<ul id='dliving'>
<li id='living1'>You are in the living room 1</li>
<li id='living2'>Living room 2</li>
</ul>
<ul id='dkitchen'>
<li id=kitchen1>kitchen 1</li>
<li id=kitchen2>kitchen 2</li>
</ul>
</div>
<div id='choice'>
<ul>
<li>Go outside > here you click on choices > goes to the red story line ^</li>
<li>Stay inside > your choices affect the story outcome. Very easy once I know how to make stuff appear in the red div</li>
</li>
</ul>
</div>
<div id='inventory'>Inventory: if you're in the right room to use the item, the item disappears and what happens shows up in the main story line (red). If you can't use the item in that room, a general "nothing happens" message is shown in the red div
<div id='invmove'>
<div id=item1>Knife</div>
<div id=item2>Soap</div>
<div id=item3>Fork</div>
<div id=item4>Mouse Burger</div>
<div id=item5></div>
</div>
</div>
</div>
我会把你所有的状态都放到正文的属性栏中，然后你可以根据情况使用CSS来显示不同的内容。例如，你可以用blahdanger等等。然后，在css中，body[dataweak=true]room.weak{display:block；}body[dataweak=true]room span:not.weak{display:none；}使用document.body.dataset.weak=true；设置该状态，从而切换CSS。简而言之，这种css方法可以使许多独立或相互的条件在没有任何IFs、AND或ELSE的情况下生效……但是，css并不是真正的动态页面，不是吗？类似于添加/删除类。我该怎么做：点击这里让一些东西出现在这里如果你使用一点js来应用属性，那么繁重的工作是用css而不是js来完成的，js通常更容易理解、维护和定制。
#everything {
margin-top:1%;
margin-left:10%;
margin-right:10%;
margin-bottom:1%;
background-color:lightgreen;
font-size:1em;
padding:10px;
}
ul {
list-style:none;
}
#house {
background-color:pink;
}
#house li {
margin-right:40px;
display:inline;
}
#story {
height:200px;
overflow:scroll;
overflow-x:hidden;
background-color:red;
}
#descr {
height:130px;
background-color:lightblue;
}
/*hmmm... how?*/
#living1, #living2, #kitchen1, #kitchen2 {
display:none;
}
#choice {
height:80px;
background-color:yellow;
}
#inventory {
height:100px;
padding-top:20px;
padding-left:20px;
background-color:purple;
}
#inventory div div {
display:inline-block;
background-color:lightblue;
}
#invmove {
display:inline;
margin:auto;
}