Fatal编程技术网
  • javascript/
  • Javascript 如何在互动故事中隐藏/显示图片

Javascript 如何在互动故事中隐藏/显示图片

javascript html jquery css

Javascript 如何在互动故事中隐藏/显示图片,javascript,html,jquery,css,Javascript,Html,Jquery,Css,我必须使用jQuery、HTML和CSS制作一个交互式故事。我想让角色图片出现在游戏中。当法师角色说话时，我希望他的照片出现。当你点击他三次，他就死了，图片就会隐藏起来。这都是基于#speech if语句的推进。魔法师死后，他会扔下一本书，你必须把它捡起来，然后再翻到下一页 $(document).ready(function() { // do not delete this line var progress = 0; var txt; function eventHandle

我必须使用jQuery、HTML和CSS制作一个交互式故事。我想让角色图片出现在游戏中。当法师角色说话时，我希望他的照片出现。当你点击他三次，他就死了，图片就会隐藏起来。这都是基于#speech if语句的推进。魔法师死后，他会扔下一本书，你必须把它捡起来，然后再翻到下一页

$(document).ready(function() { // do not delete this line
  var progress = 0;
  var txt;

  function eventHandler() {
    if (progress == 0) {
      txt = "MAGE: Ah you must be after this book.";
      //$('#speech').prepend('<img id="img" src="mage.png" />')       //old  code to make image appear
      //$('#speech').css('background-image', 'url("mage.png")')       // new code but makes image appear in speech box (want it appear behind)

      $('#mage').show
    }

    if (progress == 1) {
      txt = "PLAYER: give it back and i might spare you!";
    }

    if (progress == 2) {
      txt = "MAGE: Nah i think i will hold onto it for a while, you will have to take it from my cold dead hands!";
    }

    if (progress == 3) {
      txt = "PLAYER: That can be arranged.";
      //$('#mage').on('click', function(){
      //$('#mage').hide(4000, function(){
      //alert('toggled');
      //}});
    }

    if (progress == 4) {
      txt = "MAGE: Ah damn just take it leave me be!";
      $('#speech').css('background-image', '')
    }

    if (progress == 5) {
      txt = "PLAYER: I'll take that.";
    }

    if (progress == 6) {
      txt = "PLAYER: I should report back to the king at once.";
    }

    progress++;
    $('#speech').html(txt);
    //$('#text').html(txt)
  }

  $('#speech').click(eventHandler);
}); // do not delete this line
#stage1 {
  width: 900px;
  height: 505px;
  margin: auto;
  position: relative;
  background: no-repeat;
  background-image: url(home.jpg);
}

#speech {
  position: absolute;
  width: 500px;
  height: auto;
  padding: 10px;
  color: white;
  border-right: 1px solid white;
  border-bottom: 1px solid white;
  border-left: 1px solid white;
  border-top: 1px solid white;
  cursor: pointer;
  margin-top: 50px;
}

#btn {
  position: relative;
  display: show;
  margin-left: 600px;
  margin-top: 350px;
}

#stage2 {
  width: 900px;
  height: 505px;
  margin: auto;
  position: relative;
  background: no-repeat;
  background-image: url(castle.jpg);
}

#stage3 {
  width: 900px;
  height: 505px;
  margin: auto;
  position: relative;
  background: no-repeat;
  background-image: url(dungeon.jpg);
}

#stage4 {
  width: 900px;
  height: 505px;
  margin: auto;
  position: relative;
  background: no-repeat;
  background-image: url(entrance.jpg);
}

#stage5 {
  width: 900px;
  height: 505px;
  margin: auto;
  position: relative;
  background: no-repeat;
  background-image: url(path.jpeg)
}

#stage6 {
  width: 900px;
  height: 505px;
  margin: auto;
  position: relative;
  background: no-repeat;
  background-image: url(forest.jpg)
}

#mage {
  display: none;
}

#book {
  display: none;
}

#stage7 {
  width: 900px;
  height: 505px;
  margin: auto;
  position: relative;
  background: no-repeat;
  background-image: url(castle.jpg);
}

#stage8 {
  width: 900px;
  height: 505px;
  margin: auto;
  position: relative;
  background: no-repeat;
  background-image: url(entrance.jpg);
}
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>MMCC3045</title>
  <link href="style.css" rel="stylesheet" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

<body>
  <div id="stage6">
    <a href="page7.html"><button id="btn">to castle</button>    </a>
    <!--<div id="speech"><span id="text" style="z-index: 1">PLAYER: Ok so in the forest. seem quiet best look around for him.</span></div> new code making img appear in speech not behind -->
    <div id="speech">PLAYER: Ok so in the forest. seem quiet best look around for him.</div>
  </div>
  <div>
    <img src="mage.png" id="mage" alt="mage" width="500" height="500">
    <img src="book.png" id="book" alt="book" width="500" height="500">
  </div>
</body>

</html>

$（document）.ready（function（）{//请勿删除此行
var进程=0；
var-txt；
函数eventHandler（）{
如果（进度==0）{
txt=“法师：啊，你们一定在找这本书。”；
//$（'#speech'）.prepend（''）//显示图像的旧代码
//$（“#speech'）.css（'background-image'，'url（“mage.png”））//新代码，但使图像显示在语音框中（希望它显示在后面）
$（'#mage'）。显示
}
如果（进度==1）{
txt=“玩家：把它还给我，我可能会饶了你！”；
}
如果（进度==2）{
txt=“法师：不，我想我会抓住它一段时间，你必须从我冰冷的死手手中接过它！”；
}
如果（进度==3）{
txt=“玩家：可以安排。”；
//$（'#mage'）。在（'单击'，函数（）上）{
//$（'#mage'）.hide（4000，函数（）{
//警报（“切换”）；
//}});
}
如果（进度==4）{
txt=“法师：啊，该死的，拿着它，离开我！”；
$（'语音'）.css（'背景图像'，''）
}
如果（进度==5）{
txt=“玩家：我要那个。”；
}
如果（进度==6）{
txt=“玩家：我应该立即向国王汇报。”；
}
进步++；
$（'#speech'）.html（txt）；
//$（'#text'）.html（txt）
}
$（'#speech'）。单击（eventHandler）；
})；//不要删除这一行
#第一阶段{
宽度：900px；
高度：505px；
保证金：自动；
位置：相对位置；
背景：无重复；
背景图片：url（home.jpg）；
}
#讲话{
位置：绝对位置；
宽度：500px；
高度：自动；
填充：10px；
颜色：白色；
右边框：1px纯白；
边框底部：1px纯白；
左边框：1px纯白；
边框顶部：1px纯白；
光标：指针；
边缘顶部：50px；
}
#btn{
位置：相对位置；
显示：显示；
左边距：600px；
利润上限：350px；
}
#阶段2{
宽度：900px；
高度：505px；
保证金：自动；
位置：相对位置；
背景：无重复；
背景图片：url（castle.jpg）；
}
#阶段3{
宽度：900px；
高度：505px；
保证金：自动；
位置：相对位置；
背景：无重复；
背景图片：url（dungeon.jpg）；
}
#阶段4{
宽度：900px；
高度：505px；
保证金：自动；
位置：相对位置；
背景：无重复；
背景图片：url（entry.jpg）；
}
#阶段5{
宽度：900px；
高度：505px；
保证金：自动；
位置：相对位置；
背景：无重复；
背景图像：url（path.jpeg）
}
#阶段6{
宽度：900px；
高度：505px；
保证金：自动；
位置：相对位置；
背景：无重复；
背景图片：url（forest.jpg）
}
#法师{
显示：无；
}
#书{
显示：无；
}
#阶段7{
宽度：900px；
高度：505px；
保证金：自动；
位置：相对位置；
背景：无重复；
背景图片：url（castle.jpg）；
}
#阶段8{
宽度：900px；
高度：505px；
保证金：自动；
位置：相对位置；
背景：无重复；
背景图片：url（entry.jpg）；
}
MMCC3045
玩家：好的，在森林里。看起来很安静。最好四处看看他。
hi谢谢你的建议。我在if（progress==3）中添加了$（'#mage'）.hide（）在语句的结尾，它打破了语音树。我希望法师出现在玩家的第一个对话框之后，当点击3次时，法师的img被隐藏。然后会出现一本书，玩家需要拿起它才能进入下一阶段（如果没有拿起书
$（“#mage”），下一个场景的按钮将被隐藏.show
…看起来你已经知道如何显示/隐藏。你的问题是什么？当我在if语句中使用该语句时，代码会中断。“。我希望法师出现在玩家的第一个对话框之后，单击3次后，法师img会隐藏。然后会出现一本书，玩家需要拿起该书才能进入下一阶段（如果未拾取书本，则下一个场景的按钮将被隐藏）