【发布时间】：2021-06-23 02:40:42
【问题描述】：
我目前正在尝试编写一个小文本冒险。 我的问题是，虽然应该启动游戏的按钮在某种程度上可以工作，但不会触发启动功能 (start())。 代码分为索引站点 (index.html)、脚本站点 (script.js) 和库 (qalib.js)。应该在 qalib.js 上触发的 start 函数是在 script.js 上定义的，我认为它可能与此有关。我试图用我在某个网站上找到的包含功能连接这两个网站，但这没有用。你知道为什么游戏没有运行以及我可以做些什么来改变它吗？提前感谢您的帮助！
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>A Text Adventure</title>
<link href="bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="main" class="container-fluid">
<div id="inout" hidden>
<div id="output"></div>
<div id="input">
<div class="navbar navbar-default">
<div class="navbar-form navbar-right" role="search">
<div class="form-group">
<label id="questiontext" for="answer">Antwort:</label>
<input id="answertext" name="answer" type="text" class="form-control">
</div>
<button id="answerbtn" type="submit" class="btn btn-outline-secondary">Antworten</button>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="qalib.js"></script>
<script src="script.js"></script>
</body>
</html>
script.js:
$(function() {
zeigeStartBild("Herzlich Willkommen! <br> Es folgt ein kleines Text-Adventure.","Starte das Spiel!");
});
function start() {
output("Hallo");
input("Wie heißt du?", antwortName);
}
var name;
function antwortName(antwort) {
name = antwort;
if (antwort == "Herr Schiller") {
output("Na dann wissen sie meine Arbeit hoffentlich zu schätzen!");
hsnachricht()
}
else {
output("Herzlich Willkommen " + name + "!");
frage2();
}
}
function frage2() {
output("Jedenfalls " + name + ", schön das du hier vorbei schaust! Sag mal, hast du Lust auf ein Rätsel? Falls du richtig rätst gibt es auch eine Überraschung!");
input("'Ja.' oder 'Nein.'?", antwortJaNein);
}
function antwortJaNein(antwort) {
if (antwort == "Ja.") {
output("Sehr gut! Das freut mich!");
frage3();
}
else if (antwort == "Nein.") {
output("Na gut, dann eben nicht!");
badend()
}
else {
output("Das nehme ich als ein Ja!");
frage3();
}
}
function frage3() {
output("Also" + name + ", dann mach dich mal bereit.. Hier das Rästel:");
input("Welches Wort im Wörterbuch aus dem Jahr 2019 wird falsch geschrieben?", antwortRaetsel);
}
function antwortRaestel(antwort) {
if (antwort == "Das Wort 'falsch'.") {
output("Richtig! Gut gemacht!");
goodend()
}
else if (antwort == "falsch") {
output("Genau richtig! Tolle Arbeit!");
goodend()
}
else {
output("Nope, aber das war ein netter Versuch.");
badend()
}
}
function badend() {
output("Aber sag nicht, ich hätte dich nicht gefragt, hehe! Bye!");
end()
}
function hsnachricht() {
output("Der Code basiert auf dem von diesem Video: ' https://www.youtube.com/watch?v=40poeMYP0n8 '." <br>
"Haben Sie Spaß mit den Spiel!");
frage2()
}
function goodend() {
output("Du bist ja ziemlich gut im Rätseln! Das sollten wir öfters machen!"<br>
"Hier ist erstmal deine Überraschung!" <br>
"Auf dieser Website kannst du mein Erlebnis an diesem Projekt zu arbeiten nacherleben: ' https://www.hackertyper.com/ '."<br>
"See you later alligator!");
end2()
function end() {
alert("Du hast das Spiel 'See You Later Alligator' abgeschlossen.");
}
function end2() {
alert("Du hast das Spiel 'See You Later Alligator' erfolgreich abgeschlossen.");
}
qalib.js：
function zeigeStartBild(msgtext, btntext) {
$("#main").append(
"<div id=\"startbild\" class=\"jumbotron\">\
<h1>Hallo!</h1>\
<p>" + msgtext +"</p>\
<p><button class=\"btn btn-outline-secondary btn-lg\" id=\"start_btn\">" + btntext + "</button></p>\
</div>");
$("#start_btn").click(function() {
$("#startbild").hide();
$("#inout").show();
start();
});
}
function clear() {
$("#output").empty();
}
function output(msg) {
$("#output").append("<div class=\"alert alert-info\">" + msg + "</div>");
}
function answeroutput(msg) {
$("#output").append("<div class=\"alert alert-success text-right\">" + msg + "</div>");
}
var currentanswer = "";
var answered = false;
$("#answerbtn").click(function() {
currentanswer = $("#answertext").val();
$("#input").hide();
$("#answertext").val("");
answered = true;
answeroutput(currentanswer);
});
var answercallback = undefined;
function input(question, callback) {
$("#questiontext").text(question);
$("#input").show();
answered = false;
answercallback = callback;
waitForInput()
}
function waitForInput(callback) {
if (!answered) {
setTimeout(waitForInput, 500);
}
else {
answercallback(currentanswer)
}
}
【问题讨论】：
标签： javascript html jquery twitter-bootstrap