Question

我试图创建一个带对话的游戏，我希望我的文字会随着玩家点击next图片来改变故事。

例如：

Page loads - "Hi, I'm Joe."

Clicks sliced Image once - "Nice to meet you."

Clicks 2nd time - "How are you?"

我已经尝试了onClick，但这只允许我更改一次，我也尝试过使用var计数器但无效，它会覆盖我以前的命令，这部分是我做的这里错了吗？

＆＃13;

var clicks = 0;

function changeText() {
  {
    clicks = 1;
    document.getElementById('text').innerHTML = "Ughh... my head... What     
    happened...?";
  }
}

function changeText() {
  {
    clicks = 2;
    document.getElementById('text').innerHTML = "Testing 1 2 3";
  }
}

function play() {
  var audio = document.getElementById("audio");
  audio.play();
}

＆＃13;

<img onClick="changeText(); audio.play()" value=Change Text src="images/awaken/images/awaken_03.jpg" alt="" width="164" height="77" id="clicks" />
<p id="text">Where... am I...?</p>

＆＃13;

Answer 1

代码中的问题

changeText()
{}

changeText()

您没有更新clicks。
在您的html中，您编写了audo.play()但没有audio对象可用。它应该是play()。我在play()函数中调用了changeText()函数。这样可以保持HTML清洁。

以下是更新的代码：

var clicks = 0;

function changeText() {
    var text = "" 
    clicks++;
    switch(clicks){
        case 1: text = "Ughh... my head... What happened...?";
          break;
        case 2: text = "Testing 1 2 3";
          break;
    }
    
    document.getElementById('text').innerHTML = text;
  
  play();
}

function play() {
  var audio = document.getElementById("audio");
  audio.play();
}

<img onClick="changeText()" value=Change Text src="images/awaken/images/awaken_03.jpg" alt="" width="164" height="77" id="clicks" />
<p id="text">Where... am I...?</p>

Answer 2

首先关闭 - 你的changeText（）系统存在缺陷 - 你同时多次覆盖同一个函数，所以唯一一个将被调用的函数是你声明的最后一个。 JavaScript不会等到函数被调用以继续该程序 audio.play（）也不会工作 - 但我认为这是一项正在进行的工作。我更改了您的代码，以便不是将count设置为特定值，而是每次调用函数时它都会递增，并且它会将文本更新为数组中的正确值。这是更新后的changeText函数：

var count = 0; var text = [ "Where... am I...?", /* note that this will never get called, it's simply here for filling up the array*/ "This is the first text!", "And this is the second!" ] var changeText = function() { count++; document.getElementById('text').innerHTML = text[count]; }

将来，您可能还想检查if(text[count] != 'undefined')，如果是的话，请写一些类似＆＃34;再见！＆＃34;代替。

点击图片后如何改变对话？

2 个答案:

代码中的问题