2014-10-09 2 views
0

현재 텍스트 기반 게임을하고 있습니다. 내가하고 싶은 것은 (Zork처럼) 프롬프트에 응답하는 데 사용할 수있는 텍스트 입력을 만드는 것입니다. 나는 프롬프트 대화 상자가 나타나기를 원하지 않는다. 왜냐하면 1) 사용자에게 짜증을 줄 수 있고 2) 응답이 올 때까지 웹 페이지를 정지시킨다. 개인적으로이 일을하는 방법에 대해 들어 본적이 없기 때문에, 밖에있는 누군가가 나를 도울 수 있다면, 그것은 놀랄 것입니다.대화 상자 대신 프롬프트에 응답하기 위해 텍스트 입력을 사용해야합니다.

<!DOCTYPE html> 
<head> 
<style> 
#game { 
    width:1100 
} 
body {background-color:black} 
p {color:white} 
</style> 
</head> 
<body> 
<div id="game"> 
<script type="text/javascript"> 
    window.onload = function() { 
     var seed = prompt("What kind of potato do you want to be? A RUSSET POTATO, RED POTATO, or SWEET POTATO?") 
     switch(seed) { 
      case 'RUSSET POTATO' : 
       var para = document.createElement("p"); 
       var node = document.createTextNode("Hot diggity! You became a Russet Potato!"); 
       para.appendChild(node); 

       var element = document.getElementById("game"); 
       element.appendChild(para); 
      break; 
      case 'RED POTATO' : 
       var para = document.createElement("p"); 
       var node = document.createTextNode("Greetings comrade! Welcome to the potatoes of Soviet Socialist Republics!"); 
       para.appendChild(node); 

       var element = document.getElementById("game"); 
       element.appendChild(para); 
      break; 
      case 'SWEET POTATO' : 
       var para = document.createElement("p"); 
       var node = document.createTextNode("Hey there sweet thing! You're such a Sweet Potato!"); 
       para.appendChild(node); 

       var element = document.getElementById("game"); 
       element.appendChild(para); 
      break; 
      default: 
       var para = document.createElement("p"); 
       var node = document.createTextNode("Make sure you are spelling your answers correctly and typing them in all caps!"); 
       para.appendChild(node); 

       var element = document.getElementById("game"); 
       element.appendChild(para); 
       //Revert to prompt 
     } 

     var soil = prompt("What type of soil will you be planted in? PODZOL, STUTTGART, RED, AKADAMA, or CLAY?"); 
     switch(soil) { 
      case 'PODZOL' : 
       var para = document.createElement("p"); 
       var node = document.createTextNode("There are many minerals, but the acid is ruining the shell of your seed! You die an agonizing and slow death."); 
       para.appendChild(node); 

       var element = document.getElementById("game"); 
       element.appendChild(para); 
       //link to lose page 
      break; 
      case 'STUTTGART' : 
       var para = document.createElement("p"); 
       var node = document.createTextNode("Your seed is nice and cozy in its new home. Happy growing!"); 
       para.appendChild(node); 

       var element = document.getElementById("game"); 
       element.appendChild(para); 
      break; 
      case 'RED' : 
       var para = document.createElement("p"); 
       var node = document.createTextNode("Good choice comrade, but communism isn't always the best choice. Getting water will be a bit difficult."); 
       para.appendChild(node); 

       var element = document.getElementById("game"); 
       element.appendChild(para); 
      break; 
      case 'AKADAMA' : 
       var para = document.createElement("p"); 
       var node = document.createTextNode("It will be a bit difficult to grown roots, but you are a tough little seed! Hope you can grow well!"); 
       para.appendChild(node); 

       var element = document.getElementById("game"); 
       element.appendChild(para); 
      break; 
      case 'CLAY' : 
       var para = document.createElement("p"); 
       var node = document.createTextNode("A hard rain comes in and your potato drowns."); 
       para.appendChild(node); 

       var element = document.getElementById("game"); 
       element.appendChild(para); 
       //link to lose page 
      break; 
      default: 
       var para = document.createElement("p"); 
       var node = document.createTextNode("Make sure you are spelling your answers correctly and typing them in all caps!"); 
       para.appendChild(node); 

       var element = document.getElementById("game"); 
       element.appendChild(para); 
       //Revert to prompt 
     } 

     var power = prompt("What do you wish to do now? SPROUT TUBERS, add DISEASE CONTROL, or THICKEN SKIN?"); 
     switch(power) { 
      case 'SPROUT TUBERS' : 
       var para = document.createElement("p"); 
       var node = document.createTextNode("You will surely grow happily with this decison!"); 
       para.appendChild(node); 

       var element = document.getElementById("game"); 
       element.appendChild(para); 
      break; 
      case 'DISEASE CONTROL' : 
       var para = document.createElement("p"); 
       var node = document.createTextNode("Your growth won't be as plentiful, but you won't face as much risk from disease now!"); 
       para.appendChild(node); 

       var element = document.getElementById("game"); 
       element.appendChild(para); 
      break; 
      case 'THICKEN SKIN' : 
       var para = document.createElement("p"); 
       var node = document.createTextNode("You are a very self-concious potato. You desire a thick skin to avoid being bullied by your fellow potatoes. Don't worry, you will be their supreme leader eventually! I assure you!"); 
       para.appendChild(node); 

       var element = document.getElementById("game"); 
       element.appendChild(para); 
      break; 
      default: 
       var para = document.createElement("p"); 
       var node = document.createTextNode("Make sure you are spelling your answers correctly and typing them in all caps!"); 
       para.appendChild(node); 

       var element = document.getElementById("game"); 
       element.appendChild(para); 
     } 

    } 
</script> 
</div> 
</body> 
</html> 

사전에 당신에게 모두 감사합니다

다음은 프롬프트의 3을 포함하여 게임의 작은 부분입니다! 이것은 코딩에 대한 나의 첫 번째 시도이며 상당히 단순 해 보이지만 꽤 경험적입니다.

답변

0

입력 요소가 여기에서 잘 작동합니다.

<input id="theInputBox" type="text> 

이렇게하면 입력 할 수있는 입력란이 화면에 나타납니다.

는, 입력 상자의 텍스트를 확인 코딩에서의 첫 번째 시도에서 document.getElementById('theInputBox').value

축하를 수행합니다! 게임을 만드는 것이 코드 작성법을 배울 수있는 좋은 방법이라고 생각합니다.

관련 문제