2017-05-23 16 views
-3

にこのゲームをJS得ることができますが、HTML上で示したが、私はどのようにどのように私はハイテク私はJavaScriptでこの「岩、紙とはさみ」のゲームを作っていると私はそれを取得したいHTML

var userChoice = prompt("Do you choose rock, paper or scissors?"); 
var computerChoice = Math.random(); 
if (computerChoice < 0.34) { 
    computerChoice = "rock"; 
} else if(computerChoice <= 0.67) { 
    computerChoice = "paper"; 
} else { 
    computerChoice = "scissors"; 
} console.log("Computer: " + computerChoice); 
var compare = function(choice1, choice2) { 
if(choice1 === choice2) { 
     return 'The result is a tie!'; 
} 

else if(choice1 === "rock") 

    {if (choice2 === "scissors") { 
     return 'rock wins'; 
    } 
    else{ 
     return 'paper wins' 
    } 
} 
    else if (choice1 === "paper") 
    {if (choice2 === "rock") 
    {return 'paper wins'} 
    else{return 'scissors win'} 
    } 

    else if (choice1 === "scissors") 
    {if (choice2 === "paper") 
    {return 'scissors win'} 
    else {return 'rock win'} 
    } 
}; 
compare(userChoice, computerChoice) 
を把握することはできません

これはかなり初心者に聞こえるかもしれません。しかしplzzの回答

+1

は' 'でそれをラップ:http://www.howtocreate.co.uk/tutorials/javascript/incorporate – mplungjan

+0

何かもっとグラフィックを表示するか、ページを開いてスクリプトの実行を確認することを意味しますか?それが後であれば、^ – Lixus

+0

私はコンソールログを表示するためにコンソールのログを表示したい – ismager78

答えて

0

コード間にタグを追加して、コードをhtmlファイルとして保存してみることができます。

1

<form>タグ、<input type="text">タグ、送信ボタンが必要です。その後、コンピュータ選択値とその結果を受け取るには、<span>タグも必要になります。

ここで、いくつかの修正がJSコードにあります(スニペットの詳細)。

ここは少しの例です。

注:

  • 私はあなたが
  • 、誰かが数または任意の他の事が、紙/ロック/ハサミを入力した場合には、いくつかの検証が必要になります
  • 、それをシンプルに保つためにjQueryライブラリを使用しました
  • ユーザが「ヘルプ」やゲームルールを印刷することができる他のものを入力すれば?

// lets fire our function when the form is submited 
 
$('#lets_rock_paper_scissors').submit(function(event) { 
 
    event.preventDefault(); // prevent the page reload 
 
    
 
    var userChoice = $('#user_choice').val(); // get the value of the input by ID 
 
    var computerChoice = Math.random(); 
 
    
 
    if (computerChoice < 0.34) { 
 
    computerChoice = "rock"; 
 
    } else if(computerChoice <= 0.67) { 
 
    computerChoice = "paper"; 
 
    } else { 
 
    computerChoice = "scissors"; 
 
    } 
 
    
 
    // populate the span tag with the computer choice 
 
    $('#computer_choice').html("Computer: " + computerChoice); 
 

 
    // populate the span tag with the compare() function result 
 
    $('#result').html(compare(userChoice, computerChoice)); 
 
}); 
 

 
function compare(choice1, choice2) { 
 
    if(choice1 === choice2) { 
 
    return 'The result is a tie!'; 
 
    } else if(choice1 === "rock") { 
 
    if (choice2 === "scissors") { 
 
     return 'rock wins'; 
 
    } else { 
 
     return 'paper wins'; 
 
    } 
 
    } else if (choice1 === "paper") { 
 
    if (choice2 === "rock") { 
 
     return 'paper wins'; 
 
    } else { 
 
     return 'scissors win'; 
 
    } 
 
    } else if (choice1 === "scissors") { 
 
    if (choice2 === "paper") { 
 
     return 'scissors win'; 
 
    } else { 
 
     return 'rock win'; 
 
    } 
 
    } 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<h3>Do you choose rock, paper or scissors?</h3> 
 

 
<form id="lets_rock_paper_scissors"> 
 
    <input type="text" id="user_choice" /> 
 
    <input type="submit" /> 
 
</form> 
 

 
<p><span id="computer_choice"></span></p> 
 

 
<p><span id="result"></span></p>

それがお役に立てば幸いです。楽しむ。 ; )

0

これはあまり意味がなく、改善が必要です(間違った単語を入力して勝者/敗者を獲得できないことを意味します)。しかしそれはあなたのためです。ただ、コードをコピーし、メモ帳やメモ帳++からテキストドキュメントに入れて、ここでwhatevernameyouwant.html

<!DOCTYPE html> 
<html> 
<head> 
<style> 
</style> 
</head> 
<body> 
</body> 
<script> 

var userChoice = prompt("Do you choose rock, paper or scissors?"); 
var computerChoice = Math.random(); 

computerChoice = computerChoice < 0.34 ? "rock" : computerChoice < 0.67 ? "paper" : "scissors"; 

var compare = function(choice1, choice2) { 
    if(choice1 === choice2) { 
     return 'The result is a tie!'; 
    }else if(choice1 === "rock"){ 
     if (choice2 === "scissors") { 
      return 'You win with rock'; 
     }else{ 
      return 'Computer wins with scissors'; 
     } 
    }else if (choice1 === "paper"){ 
     if (choice2 === "rock"){ 
      return 'You win with paper'; 
     }else{ 
      return 'Computer wins with rock'} 
    }else if(choice1 === "scissors"){ 
     if (choice2 === "paper"){ 
      return 'You win with scissors'; 
     }else{ 
      return 'Computer wins with paper'; 
     } 
    } 
}; 

alert(compare(userChoice, computerChoice)); 


</script> 
</body> 
</html> 
0

として保存するだけで、最小限のHTMLであなたのコードが追加されます。他の人が触れたように、あなたは入力検証をしていないので、このプログラムは与えられた文字列を受け入れます。ここで

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"/> 
    <title>Rock, Paper, Scissors</title> 
</head> 
<body> 

    <script type="text/javascript"> 
     var playAgain = false; 
     var comp_Win = 0; 
     var user_Win = 0; 
     do{ 

      var userChoice = prompt("Do you choose rock, paper or scissors?\n"); 

      var maximum = 3; 
      var minimum = 1; 
      var computerChoice = Math.floor(Math.random() * (maximum - minimum + 1)) + minimum; 

      if (computerChoice == 1) { 
       computerChoice = "rock"; 
      } else if(computerChoice == 2) { 
       computerChoice = "paper"; 
      } else if (computerChoice == 3){ 
       computerChoice = "scissors"; 
      } 


      function compare(userChoice, choice2) { 
       if(userChoice === choice2) { 
        return 'The result is a tie!'; 
       } else if(userChoice === "rock"){ 
        if (choice2 === "scissors") { 
         user_Win++; 
         return 'You win!' 

        } 
        else{ 
         comp_Win++; 
         return 'Computer Wins.' 
        } 
       } 
       else if (userChoice === "paper"){ 
        if (choice2 === "rock"){ 
         user_Win++; 
         return 'You Win!' 
        } 
        else{ 
         comp_Win++; 
         return 'Computer Wins.' 
        } 
       } 

       else if (userChoice === "scissors"){ 
        if (choice2 === "paper"){ 
         user_Win++; 
         return 'You win!' 
        } 
        else { 
         comp_Win++; 
         return 'Computer Wins.' 
        } 
       } 
      }; 
      alert(compare(userChoice, computerChoice)+"\n"); 


      if (confirm('Play again?')) { 
       playAgain=true; 
      } else { 
       playAgain=false; 
      } 


     }while(playAgain); 

     alert("User: "+user_Win+"\nComputer: "+comp_Win+"\n"); 
    </script> 

</body> 
</html> 

ただ走る "というバージョンです:

var playAgain = false; 
 
\t \t var comp_Win = 0; 
 
\t \t var user_Win = 0; 
 
\t \t do{ 
 

 
\t \t \t var userChoice = prompt("Do you choose rock, paper or scissors?\n"); 
 

 
\t \t \t var maximum = 3; 
 
\t \t \t var minimum = 1; 
 
\t \t \t var computerChoice = Math.floor(Math.random() * (maximum - minimum + 1)) + minimum; 
 

 
\t \t \t if (computerChoice == 1) { 
 
\t \t \t \t computerChoice = "rock"; 
 
\t \t \t } else if(computerChoice == 2) { 
 
\t \t \t \t computerChoice = "paper"; 
 
\t \t \t } else if (computerChoice == 3){ 
 
\t \t \t \t computerChoice = "scissors"; 
 
\t \t \t } 
 

 

 
\t \t \t function compare(userChoice, choice2) { 
 
\t \t \t \t if(userChoice === choice2) { 
 
\t \t \t \t \t return 'The result is a tie!'; 
 
\t \t \t \t } else if(userChoice === "rock"){ 
 
\t \t \t \t \t if (choice2 === "scissors") { 
 
\t \t \t \t \t \t user_Win++; 
 
\t \t \t \t \t \t return 'You win!' 
 

 
\t \t \t \t \t } 
 
\t \t \t \t \t else{ 
 
\t \t \t \t \t \t comp_Win++; 
 
\t \t \t \t \t \t return 'Computer Wins.' 
 
\t \t \t \t \t } 
 
\t \t \t \t } 
 
\t \t \t \t else if (userChoice === "paper"){ 
 
\t \t \t \t \t if (choice2 === "rock"){ 
 
\t \t \t \t \t \t user_Win++; 
 
\t \t \t \t \t \t return 'You Win!' 
 
\t \t \t \t \t } 
 
\t \t \t \t \t else{ 
 
\t \t \t \t \t \t comp_Win++; 
 
\t \t \t \t \t \t return 'Computer Wins.' 
 
\t \t \t \t \t } 
 
\t \t \t \t } 
 

 
\t \t \t \t else if (userChoice === "scissors"){ 
 
\t \t \t \t \t if (choice2 === "paper"){ 
 
\t \t \t \t \t \t user_Win++; 
 
\t \t \t \t \t \t return 'You win!' 
 
\t \t \t \t \t } 
 
\t \t \t \t \t else { 
 
\t \t \t \t \t \t comp_Win++; 
 
\t \t \t \t \t \t return 'Computer Wins.' 
 
\t \t \t \t \t } 
 
\t \t \t \t } 
 
\t \t \t }; 
 
\t \t \t alert(compare(userChoice, computerChoice)+"\n"); 
 

 

 
\t \t \t if (confirm('Play again?')) { 
 
\t \t \t \t playAgain=true; 
 
\t \t \t } else { 
 
\t \t \t \t playAgain=false; 
 
\t \t \t } 
 

 

 
\t \t }while(playAgain); 
 

 
\t \t alert("User: "+user_Win+"\nComputer: "+comp_Win+"\n");

関連する問題