Switch最初无法正常工作,但只需点击几下,就会出现案例7。我使用警报来确保speechNum ++工作,并且确实如此。我还使用带有===的if语句来确保speechNum保持为数字,并且它也是这样做的。这是在我添加了保存和作弊功能后开始的(虽然我没有看到如何)。只有Javascript可能会有问题。我有一个理论,我错放了一个},但是,如果是这样,我找不到它。我知道图像没有出现,但没关系。提前谢谢!
var gameContainer = document.getElementById("game-container");
var gender;
var name = "";
var speechBox = document.createElement("DIV");
speechBox.id = "speech-box";
var speechP = document.createElement("P");
speechP.id = "speech-p"
var speech = document.createTextNode("");
var speechNum = 0;
var text = true;
function mainMenu() {
gameContainer.removeChild(document.getElementById("start-button")); //button disappears
document.body.removeChild(document.getElementById('warning')); //warning disappears
var mainMenuBox = document.createElement("DIV");
mainMenuBox.id = "main-menu-box";
var mainMenuBoxNew = document.createElement("P");
mainMenuBoxNew.className = "main-menu-box-p";
mainMenuBoxNew.innerHTML = "New Game";
var mainMenuBoxNewPic = document.createElement("IMG");
mainMenuBoxNewPic.className = "main-menu-box-pic";
mainMenuBoxNewPic.src = "index/src/img/menu/red.gif"
mainMenuBoxNew.appendChild(mainMenuBoxNewPic);
mainMenuBoxNew.onmouseenter = function(){mainMenuBoxNewPic.src = "index/src/img/menu/redAnimated.gif";}
mainMenuBoxNew.onmouseleave = function(){mainMenuBoxNewPic.src = "index/src/img/menu/red.gif";}
mainMenuBoxNew.onclick = function(){gameContainer.removeChild(mainMenuBox);
preProfessorOpen();
return;
}
var mainMenuBoxSave = document.createElement("P");
mainMenuBoxSave.className = "main-menu-box-p";
mainMenuBoxSave.innerHTML = "Save Code";
var mainMenuBoxSavePic = document.createElement("IMG");
mainMenuBoxSavePic.className = "main-menu-box-pic";
mainMenuBoxSavePic.src = "index/src/img/menu/binary.jpg";
mainMenuBoxSave.appendChild(mainMenuBoxSavePic);
mainMenuBoxSave.onmouseenter = function(){mainMenuBoxSavePic.src = "index/src/img/menu/binaryAnimated.gif";}
mainMenuBoxSave.onmouseleave = function(){mainMenuBoxSavePic.src = "index/src/img/menu/binary.jpg";}
mainMenuBoxSave.onclick = function(){gameContainer.removeChild(mainMenuBox);
inputSaveCode();
return;
}
var mainMenuBoxCheat = document.createElement("P");
mainMenuBoxCheat.className = "main-menu-box-p";
mainMenuBoxCheat.innerHTML = "Cheat Code";
var mainMenuBoxCheatPic = document.createElement("IMG");
mainMenuBoxCheatPic.className = "main-menu-box-pic";
mainMenuBoxCheatPic.src = "index/src/img/menu/cheatCode.jpg";
mainMenuBoxCheat.appendChild(mainMenuBoxCheatPic);
mainMenuBoxCheat.onmouseenter = function(){mainMenuBoxCheatPic.src = "index/src/img/menu/cheatCodeAnimated.gif";}
mainMenuBoxCheat.onmouseleave = function(){mainMenuBoxCheatPic.src = "index/src/img/menu/cheatCode.jpg";}
mainMenuBoxCheat.onclick = function(){gameContainer.removeChild(mainMenuBox);
inputCheatCode();
return;
}
gameContainer.appendChild(mainMenuBox);
mainMenuBox.appendChild(mainMenuBoxNew);
mainMenuBox.appendChild(mainMenuBoxSave);
mainMenuBox.appendChild(mainMenuBoxCheat);
}
function preProfessorOpen() {
document.body.style.backgroundImage = "url(index/src/img/yellowDiamond/professor.png)";
gameContainer.appendChild(speechBox);
speechBox.appendChild(speechP);
speechP.innerHTML = "Welcome to the world of Pokémon, clod!";
speechBox.onclick = function(){professorOpen();}
function professorOpen() {
speechNum++;
switch(speechNum) {
case 1:
speech = "I am Yellow Diamond – reduced to introducing Pokémon Spin-Offs.";
break;
case 2:
speech = "This world of clods is widely inhabited by creatures known as Pokémon.";
break;
case 3:
speech = "These mysterious creature can be found in every corner of this world...";
break;
case 4:
speech = "Some run across the plains, others fly through the skies, and others yet swim deep in the oceans...";
break;
case 5:
speech = "Clods live together with these Pokémon, lending their little strength to one another to live and prosper.";
break;
case 6:
speech = "Let's get started with some quick questions...<br>Are you a boy? Or are you a girl?<br>(Probably a boy if Alex shared this with you.)";
break;
case 7:
speechBox.onclick = function(){}
speechBox.style.cursor = 'default';
speechBox.innerHTML = '<p id="male" class="pointer">Boy</p> \
<p id="female" class="pointer">Girl</p>'
document.getElementById("male").onclick = function(){gender = "boy"; professorOpen(); return;}
document.getElementById("female").onclick = function(){gender = "girl"; professorOpen(); return;}
break;
case 8:
speechBox.innerHTML = "<p id='gender-confirm'>So, you're a " + gender + "?</p> \
<span id='yes-gender-p' class='pointer'>Yep!</span> \
<br> \
<span id='no-gender-p' class='pointer'>No, obviously.</span>";
document.getElementById("yes-gender-p").onclick = function(){professorOpen(); return;}
document.getElementById("no-gender-p").onclick = function(){speechNum = 6; professorOpen(); return;}
break;
case 9:
speechBox.onclick = function(){professorOpen();}
speechBox.innerHTML = "";
speechBox.appendChild(speechP);
speechBox.style.cursor = 'pointer';
speech = "Also, what is your name?";
break;
case 10:
speechBox.onclick = function(){};
speechBox.innerHTML = '<label for="name" id="name-lbl">Name</label> \
<input type="text" id="name" placeholder="Name"> \
<input type="submit" id="name-submit" class="pointer" value="Submit">';
document.getElementById("name-submit").onclick = function(){name=document.getElementById('name').value; professorOpen(); return;}
break;
case 11:
speechBox.innerHTML = "<p id='name-confirm'>So, you're name is " + name + "?</p> \
<span id='yes-name-p' class='pointer'>Yep!</span> \
<br> \
<span id='no-name-p' class='pointer'>No, obviously.</span>";
document.getElementById("yes-name-p").onclick = function(){professorOpen(); return;}
document.getElementById("no-name-p").onclick = function(){speechNum = 9; professorOpen(); return;}
break;
case 12:
speechBox.onclick = function(){professorOpen();}
speechBox.innerHTML = "";
speechBox.appendChild(speechP);
speechBox.style.cursor = 'pointer';
speech = name + ' Trés bien!<br>What a fantastic name!';
break;
case 13:
speech = name + '! Your adventure begins now!<br>You are about to scale the beautiful Malachite mountain!';
break;
case 14:
speech = 'Go and meet many Pokémon, and fill your life with rich experiences!';
break;
case 15:
speech = "Now let's go visit the world of Pokémon!";
break;
case 16:
speech = 'But before you go, remember that on this island. You cannot catch new Pokémon unless you already have room in your party! Good luck!';
speechBox.onclick = function(){enterIsland();}
speechP.innerHTML = speech;
}
} //professOpen Func End
} //preProfessOpen Func End
function inputSaveCode(){
}
function inputCheatCode(){
}
function enterIsland(){
}
body {
background-color:black;
background-repeat:no-repeat; background-size:300px 700px; background-position:center top;
}
#game-container{
width:800px; height:700px;
border:1px solid white;
margin:0 auto;
overflow:hidden;
padding:0;
}
#warning{
color:white;
margin:0;
text-align:center;
}
#start-button{
width:100px; height:40px;
position:relative; top:330px; left:350px;
background-color:red;
border:1px solid white; border-bottom-width:2px; border-top-width:0px;
font-size:125%;
cursor:pointer;
}
#start-button:hover{
color:white;
}
#logo{
width:100%; height:300px;
position:relative;
z-index:3;
}
#sub-logo{
text-shadow: 1px 0 5px white, -1px 0 5px white, 0 1px 5px white, 0 -1px 5px white;
color:#FEFF00;
text-align:center;
font-size:50px;
position:relative; bottom:70px; left:15px;
z-index:2;
}
#sub-logo-img{
width:550px; height:405px;
margin:auto;
position:relative; left:140px; bottom:170px;
z-index:1;
}
#main-menu-box{
width:200px;
margin:0 auto;
border:1px solid #444; border-radius:4px;
position:relative; top:300px;
cursor:pointer;
}
.main-menu-box-p{
border-radius:4px;
background-color:#EEE;
border:1px solid #666;
padding-left:20px; padding-top:3px;
margin:0; margin-bottom:1px;
}
#speech-box{
width:60%; height:100px;
background-color:white;
color:black;
font-size:125%;
border:1px solid #999; border-radius:20px;
margin:0 auto;
padding:0 10px;
opacity:.8;
position:relative; bottom:10px; top:600px;
cursor:pointer;
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
}
.main-menu-box-pic{
width:20px; height:20px;
float:right;
position:relative; bottom:3px;
}
.pointer{cursor:pointer;}
#male{color:#00F; margin-bottom:0;}
#female{color:#F06; margin-top:10px;}
#gender-confirm{
margin-bottom:5px;
}
#yes-gender-p{
color:green;
margin-top:0;
}
#no-gender-p{
color:red;
}
#name-confirm{
margin-bottom:5px;
}
#yes-name-p{
color:green;
margin-top:0;
}
#no-name-p{
color:red;
}
#red-on-boat{
width:10px; height:20px;
}
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<title>Game</title>
<meta name="robots" content="noindex, nofollow">
<meta name="author" content="Some Nerd.">
<link rel="icon" href="index/src/img/favicon.ico">
<link rel="stylesheet" href="index/src/style.css">
</head>
<body>
<div id="game-container">
<button id="start-button" onclick="mainMenu()">Start</button>
</div>
<p id="warning">Warning: Game cannot be played without Javascript enabled and a browser that supports <span title="Safari 6, Chrome, IE8+, Firefox, Opera 12">HTML5</span>.</p>
<script src="index/src/src.js"></script>
</body>
</html>
答案 0 :(得分:1)
那是因为在选项1-6中你没有做任何事情,除了将一些文本分配给变量speech
。从选项7开始,您还可以更改speechBox.innerHTML
的值。
答案 1 :(得分:0)
您正在为变量语音分配文本但不对其执行任何操作。
https://jsfiddle.net/7xzfhm5v/2/
switch (speechNum) {
case 1:
speechP.innerHTML = "I am Yellow Diamond – reduced to introducing Pokémon Spin-Offs.";
break;
case 2:
speechP.innerHTML = "This world of clods is widely inhabited by creatures known as Pokémon.";
break;