0
基本的に、私はテキストゲームを作っています。問題は、ボタンをクリックするたびに新しいページになります。私は、テキストのアプリのように、古いものの下に新しいシーンを挿入したい。私が何をしても、私はそれを理解できません、私はJavascriptを壊し続けます。次のシーンを新しいページを作成する代わりに下に挿入する方法
//these variables connect our code with the 'id' on the html
//we can then manipulate the variables and it will manipulate the html
var images = document.getElementById("images");
var text = document.getElementById("text");
var buttonBox = document.getElementById('buttonBox');
var input = document.getElementById('input');
//this is the variable for the name of the character
var hero;
//this is how after we type in the character name and hit enter
//we will add the name to the variable, remove the input box and start our first scenario
input.onkeypress = function(event) {
console.log(input.value);
if (event.key == "Enter" || event.keyCode == 13) {
hero = input.value;
input.parentNode.removeChild(input)
advanceTo(scenario.two)
}
};
//this changes the text and puts in your characters name
var changeText = function(words) {
text.innerHTML = words.replace("Your dog", hero);
};
//this takes the image link and puts it in the proper format, sending it to the html
var changeImage = function(img) {
images.style.backgroundImage = "url(" + img + ")";
};
//this looks at the number of options we have set and creates enough buttons
var changeButtons = function(buttonList) {
buttonBox.innerHTML = "";
for (var i = 0; i < buttonList.length; i++) {
buttonBox.innerHTML += "<button onClick="+buttonList[i][1]+">" + buttonList[i][0] + "</button>";
};
};
//this is what moves the game along
var advanceTo = function(s) {
changeImage(s.image)
changeText(s.text)
changeButtons(s.buttons)
};
//this is the object that holds each scenario, the more you add the more options there are
//scenario = {}
var scenario = {
one: {
image: "http://s9.postimg.org/eceo9mp73/5860028206_d66810105f_b.jpg", //dog
text: "H-hello? Yes! Yes! It's working! Is anyone there? Hello? If you're there, what's your name?",
},
two: {
image: "http://s9.postimg.org/9p8m7v1u7/6899639786_d517c4cce3_z.jpg", //house
text: "Your dog yanks at the leash. You hear dogs barking and see an old abandoned house. Strangely, the door is wide open. What do you want to do?",
buttons: [["Turn and run", "advanceTo(scenario.three)"],["Enter The House", "advanceTo(scenario.four)"]]
},
three: {
image: "http://1.bp.blogspot.com/-83pWE4JxQxM/ViiOd_7nGTI/AAAAAAAADUg/yCJ8iAB-gMY/s1600/postapoc5.jpg",//"http://s4.postimg.org/t1g20apst/261819008_d4316c1bdf_o.jpg",
text: "A wild gang of rabid dogs are gaining on you. Against your better judgement you enter the creepy house for saftey. Your dog is whincing and may be injured.",
buttons: [["continue", "advanceTo(scenario.four)"]]
},
four: {
image: "http://s6.postimg.org/kz5m1cnkh/2919478782_c343d14be6_b.jpg",
text: "Your dog has run, barking loudly, into the basement. You wonder what's down there. The door jammed when you slammed it behind you. You are going to need something to pry it back open",
buttons: [["Follow your Dog Downstairs", "advanceTo(scenario.five)"],["Search the Kitchen for a knife", "advanceTo(scenario.five)"]]
},
five: {
image: "http://s6.postimg.org/kz5m1cnkh/2919478782_c343d14be6_b.jpg",
text: "TO BE CONTINUED...",
},
};
//this is the code that starts the game
advanceTo(scenario.one);
HTML：代わりに、完全に別のページに変更するので、それはそう、それは再びメッセージのように、以下にそれを挿入するだろう何
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>The Help</title>
<link rel="stylesheet" href="css/style.css">
<meta http-equiv="Content-Security-Policy" content="default-src 'unsafe-inline' 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
</head>
<body>
<html>
<body>
<div id="images">
</div>
<div id="text">
</div>
<input id="input" onkeydown='submitDogName(this)' placeholder='What is your name?'>
<div id="buttonBox">
</div>
</body>
</html>
<script src="js/index.js"></script>
</body>
</html>
？
Plzをも 'HTML'コードを提供します。 – Anson
Added :) @Anson – Owen