2017-02-07 2 views
0

Мне нужна ваша помощь, чтобы игра из камня, бумаги и ножниц работала для школьного задания. Мне нужны ваши предложения, чтобы помочь мне сделать это приложение для игры JS правильно.Как я могу сделать свою игру JS для работы на камне, бумаге и ножницах?

Чем больше входных данных для этого приложения работает, тем лучше!

Назначение требует три основных вещей, как так: * функция getchoices работает, чтобы получить ввод от пользователя * условный оператор ниже переменных computer_choice и player_choice, который проверяет наличие случайных значений компьютера генерирует и делает сравнение, а затем выводит правильное значение * игра работает правильно

Спасибо за все помощь заранее!

Шон

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

"* Чем больше вход от других [...] лучше !! *" это отношение, необходимое для проекта мерзавца или что-то , Вопросы здесь предназначены для решения конкретных проблем, которые у вас есть. Вы не указали никаких подробностей о том, что сломано, поэтому вряд ли вы найдете ответ, который заставит его «работать правильно». – Wolfie

+0

Хорошая точка. Спасибо за совет :-) Обязательно прислушайтесь к нему, если у меня появятся вопросы, которые нужно отправить позже в stackoverflow! –

+0

Уважаемый @SeanV, Вы все еще не определили/поставили вопрос, как решили. Есть ли ответ, который понравился вашему вопросу? –

ответ

0

Ваше форматирование делает код своего рода трудно читать, но некоторые вещи, которые я могу SPOT:

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); 
} 

Другой очевидной ошибкой будет то, что вторая часть вашей функции сравнения(). Форматирование делает это своего рода трудно обнаружить:

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 ==„Paper“)» должно быть иначе, если на уровне выше, где:

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

Не стесняйтесь отмечать один из ответов правильно, если считаете, что они решили вашу проблему. – taracus

+0

На мой вопрос был дан ответ всеми участниками. Благодаря! –

1

Game versus battle

JSFiddle

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

Если вы хотите, я могу сделать статистику игр ниже выигрышной фразы :) –