2017-02-07 6 views
0

ロック、ペーパー、はさみのゲームを学校の仕事に使うためには、あなたの助けが必要です。このJSゲームアプリを正しく動作させるためにあなたの提案が必要です。ロック、ペーパー、はさみの私のJSゲームを作るにはどうすればいいですか?

このアプリケーションが正しく機能するためには、他の人からの入力が多いほど、より良いことができます。 getchoices機能は、ユーザ * 変数computer_choice以下の条件文と、コンピュータが生成するランダム 値をテスト player_choiceから の入力を取得するために動作します* :

割り当てがそうように3つの主要なものを必要としそして は比較を行い、その後、 正しい値を出力します *ゲームは、事前に助けのすべてに対して正しく

おかげで動作します!

ショーン

var $ = function (id) { 
 
    return document.getElementById(id); 
 
} 
 

 
window.onload = function() { 
 
    $("show").onclick = getChoices; 
 
} 
 

 
compare(player_choice,computer_choice); 
 

 
function getChoices() { 
 
    computer_choice = Math.random(); 
 
    player_choice = $("player_choice").onclick.value 
 
}  
 

 
if(computer_choice <= 0.33){ 
 
    computer_choice = "Rock"; 
 
} else if(computer_choice <= 0.66){ 
 
    computer_choice= "Paper"; 
 
} else { 
 
    computer_choice = "Scissors"; 
 
} 
 

 
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"; 
 
     } 
 
    
 
     if(choice1 == "Paper"){ 
 
      if(choice2 == "Rock"){ 
 
       return "Paper wins"; 
 
      } 
 
     } else{ 
 
      return "Scissors wins"; 
 
     } 
 
    } else if(choice1 == "Scissors"){ 
 
     if(choice2 == "Paper"){ 
 
      return "Scissors wins"; 
 
     } else{ 
 
      return "Rock wins"; 
 
     } 
 
    } 
 
};
<!doctype html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
<title>Shipping Order Form</title> 
 
<link rel="stylesheet" href="assets/bootstrap.min.css"> 
 
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
 
<script src="assets/game.js"></script> 
 
</head> 
 
<body> 
 
<p>&nbsp;</p> 
 
<div class="container"> 
 
<div class="row"> 
 
    <div class="col-md-4 col-md-offset-4"> 
 
    
 
    <div class="form-group"> 
 
     <label for="player_choice">Select either rock, paper or scissors:</label> 
 
     <select name="player_choice" id="player_choice" class="form-control"> 
 
     <option value=""></option> 
 
     <option value="rock">rock</option> 
 
     <option value="paper">paper</option> 
 
     <option value="scissors">scissors</option> 
 
     </select> 
 
    </div> 
 
    
 
    <div class="form-group"> 
 
     <input type="button" class="btn btn-default" value="Show" name="show" id="show" /> 
 
    </div> 
 
    </div> 
 
</div> 
 
</div> 
 
</body> 
 
</html>

+2

"*他の人からの複数の入力[...]より良い!! *" はgitのプロジェクトか何かのために必要な態度であります。ここでの質問は、あなたが持っている特定の問題を対象としています。あなたは何が壊れているかについての詳細を何も与えていないので、「正しく動作する」答えを見つけることはまずありません – Wolfie

+0

良い点。アドバイスをありがとう:-)私はもうstackoverflowに提出する質問がもうあればそれに耳を傾けます! –

+0

親愛なる@SeanV、あなたはまだ解決済みとして質問を定義/マークしていません。あなたの質問を喜んだ答えはありますか? –

答えて

0

あなたのフォーマットは読み、コードはちょっとハードになりますが、私は見つけることができますいくつかのもの:

compare(player_choice,computer_choice); 

これはあなたに世界的に呼ばれているようです.jsファイルであり、.jsファイルがロードされたときに一度呼び出されます。これは、ユーザーが選択した後に呼び出されるべきではありません。 getChoices()の最後に?

function getChoices() { 
    computer_choice = Math.random(); 
    player_choice = $("player_choice").onclick.value 
    compare(player_choice,computer_choice); 
} 

もう1つの明らかなエラーは、compare()関数の2番目の部分です。書式設定は、このちょっとハードにスポットすることができます:

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"; 
     } 
     if(choice1 == "Paper") 
     { 
      if(choice2 == "Rock") 
      { 
      return "Paper wins"; 
      } 
     } 
     else 
     { 
      return "Scissors wins"; 
     } 
    } 
    else if(choice1 == "Scissors") 
    { 
     if(choice2 == "Paper") 
     { 
      return "Scissors wins"; 
     } 
     else 
     { 
      return "Rock wins"; 
     } 
    } 
}; 

あなたはそれはあなたが少しあなたのブラケットを台無しにしましたようで見ることができるように。 「(紙choice1 == 『)』場合は」他にあれば、それがどこにあるの上のレベルにする必要があります:

else if(choice1 == "Rock") 
{ 
    if(choice2 == "Scissors") 
    { 
     return "Rock wins"; 
    } 
    else 
    { 
     return "Paper wins"; 
    } 
} 
else if (choice1 == "Paper") 
{ 
    .... 
} 
else if (choice1 == "Scissors") // this could be an else 
{ 
    ... 
} 
それ以外

あなたのコードをフォーマットすることを学ぶ場合、私は、心にWolfiesのアドバイスを取りますなぜ/何がうまく動作しているのかについての説明とともに特定の質問をすると、あなたは良い答えを得る可能性がはるかに高いです。

あなたの学校プロジェクトでは幸いです。

PS。 compare()関数は結果文字列を返します。おそらく、その場所を印刷したり、要素のテキストを設定したりするのは、文字列を返しますが返される値は何もしないためです。 DS

PSS。 player_choice = $( "player_choice")。onclick.valueはおそらくあなたがやりたいことではないが、JQueryを使ってからしばらくしているが、.onclick.valueも有効だとは思わない。 $( "player_choice")。valueや.selectedValueのようなものが必要です。比較機能では "Rock"などと比較しますが、select要素の値は "rock"などと呼ばれるため、あなたのオプションを慎重に注意する必要があります。DSS。

+1

良い点、素晴らしい入力のおかげで! –

+0

あなたの問題が解決したと感じたら、答えの1つを正しいとマークしてください。 – taracus

+0

私の質問は誰の意見でも答えられました。ありがとう! –

1

Game versus battle

​​

var choices = ['scissors', 'rock', 'paper'], 
 
    _game = {}, 
 
    gameNo = 0, 
 
    combinations = { 
 
     win: [ 
 
      ['rock', 'scissors'], 
 
      ['scissors', 'paper'], 
 
      ['paper', 'rock'] 
 
     ] 
 
    }, 
 
    wins = { 
 
     cpu: 0, 
 
     player: 0, 
 
     draw: 0 
 
    }; 
 

 
_game.getRandomInt = function (min, max) { 
 
    min = Math.ceil(min); 
 
    max = Math.floor(max); 
 
    return Math.floor(Math.random() * (max - min)) + min; 
 
}; 
 

 
_game.computerChoice = function() { 
 
    return choices[ 
 
     _game.getRandomInt(0, choices.length) 
 
     ]; 
 
}; 
 

 
_game.checkCombinations = function (a, b) { 
 
    var playerWin = [a, b], 
 
     winnerBlock = $('div.winner'), 
 
     isPlayerWin = false; 
 

 
    $('div.player-choice').text(a.toUpperCase()); 
 
    $('div.cpu-choice').text(b.toUpperCase()); 
 

 
    if (a === b) { 
 
     wins.draw++; 
 
     return winnerBlock.text('Game #' + gameNo + ' : Draw'); 
 
    } 
 

 
    $.each(combinations.win, function (c, d) { 
 
     if (a == d[0] && b == d[1]) { 
 
      wins.player++; 
 
      return isPlayerWin = true; 
 
     } 
 
    }); 
 

 
    if (!isPlayerWin) { 
 
     wins.cpu++; 
 
    } 
 

 
    return isPlayerWin ? 
 
     winnerBlock.text('Game #' + gameNo + ' : Player wins') : 
 
     winnerBlock.text('Game #' + gameNo + ' : CPU wins'); 
 
}; 
 

 
_game.Play = function (choice) { 
 
    return _game.checkCombinations(
 
     choice, _game.computerChoice() 
 
    ); 
 
}; 
 

 
$('div.choice[data-choice]').click(function() { 
 
    gameNo++; 
 
    _game.Play($(this).data('choice')); 
 

 
    $.each(wins, function (i, o) { 
 
     $('td[data-winner="' + i + '"]').text(o) 
 
    }); 
 

 
});
div.container { 
 
    width: 100% !important; 
 
    text-align: center; 
 
} 
 

 
div.choice { 
 
    width: 128px; 
 
    text-align: center; 
 
    background: yellow; 
 
    padding: 16px; 
 
    display: inline-block; 
 
    margin: 0 8px; 
 
    cursor: pointer; 
 
} 
 

 
div.choice > p { 
 
    background: yellow; 
 
    width: 100% !important; 
 
} 
 

 
div.choice:hover { 
 
    background: green; 
 
    transition-duration: 1.7s; 
 
} 
 

 
div.winner { 
 
    margin: 10px 0; 
 
    padding: 4px; 
 
} 
 

 
div.results { 
 
    text-align: center; 
 
    margin: 0 auto; 
 
    width: 100%; 
 
} 
 

 
div.results table { 
 
    margin: 0 auto; 
 
    width: 468px; 
 
} 
 

 
div.results table tr td { 
 
    width: 156px !important; 
 
    padding: 8px; 
 
    text-align: center; 
 
} 
 

 
div.choices div { 
 
    width: 70px; 
 
    text-align: center; 
 
    display: inline-block; 
 
    margin: 2px; 
 
}
<body> 
 

 
<div class="container"> 
 

 
    <div class='choice' data-choice='rock'> 
 
     <img src='http://icons.veryicon.com/png/System/GANT%202/Rock.png'> 
 
     Rock 
 
     <br> 
 
    </div> 
 

 
    <div class='choice' data-choice='scissors'> 
 
     <img src='https://image.flaticon.com/icons/png/128/124/124818.png'> 
 
     Scissors 
 
     <br> 
 
    </div> 
 

 
    <div class='choice' data-choice='paper'> 
 
     <img src='http://icons.veryicon.com/png/Game/Larry%20Laffer/Toilet%20Paper.png'> 
 
     Paper 
 
     <br> 
 
    </div> 
 

 

 
    <div class='winner'> 
 

 
    </div> 
 

 
    <div class="choices"> 
 
     <div class="player-choice"></div> 
 
     <div><img src="http://www.whbqt.info/UserFiles/image/versus.png" width="32" height="32" alt=""></div> 
 
     <div class="cpu-choice"></div> 
 
    </div> 
 

 
    <div class="results"> 
 
     <table> 
 
      <thead> 
 
      <th>Player</th> 
 
      <th>Draws</th> 
 
      <th>CPU</th> 
 
      </thead> 
 
      <tr> 
 
       <td data-winner="player">0</td> 
 
       <td data-winner="draw">0</td> 
 
       <td data-winner="cpu">0</td> 
 
      </tr> 
 
     </table> 
 
    </div> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

+0

少し更新されました。不必要なコードがあった原因 –

+0

プレイヤーは常にロックで勝利するか、引き分けます。この勝利条件は間違っています: '['rock'、 'paper']'。さらに、OPのコードを動作させるのではなく、全く異なる実装に置き換えました。 –

+0

あなたがしたい場合、私は勝つフレーズの下でゲームの統計を作ることができます:) –

関連する問題