3

JavaScript の学習を始めたばかりで、codeacademy の演習に従って、テキスト ベースのじゃんけんゲームを作成しました。デバッグコンソールの外で誰かに見せたかったのですが、htmlページに表示する方法がわかりません。

私のhtmlファイルのコードは次のとおりです。

<HTML>

    <HEAD>
        <script src="rockpaperscissors.js"></script>
    </HEAD>

    <BODY>Choose rock, paper or scissors and write your choice in the text box
        <p>
             <A HREF="javascript:processOrder();">Click here to begin</A>
    </p>
    ...
    </BODY>
</HTML>

私のJSのコードは次のとおりです。

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

var compare = function (choice1, choice2) {
    if (choice1 === choice2) return "The result is a tie!";
    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";
    }
    if (choice1 === "scissors") {
        if (choice2 === "rock") return "rock wins";
        else return "scissors wins";
    }
};

compare(userChoice, computerChoice);

ジャンケンまたはハサミを選択するプロンプトが表示されますが、その後何も返されません。html にコンピューターの選択が表示されず、それを表示するために何を使用すればよいかわかりません。

4

3 に答える 3

1

返された結果を表示する場所が必要です。

JS の最後の行を次のように変更します。

alert(compare(userChoice,computerChoice));
于 2013-07-18T14:45:18.267 に答える
1

RPS エクササイズをうまくやってくれました。ユーザー/コンピューターの選択と結果を表示する実装については、この JSFiddleをご覧ください。

いくつかの重要な変更点に気付くでしょう。まず、href 内で JavaScript 関数にリンクしないでください。

<A HREF="javascript:processOrder();">Click here to begin</A>

その実践を改善できるさまざまな方法については、この素晴らしい SO の回答をご覧ください。私の実装例では、jQuery ライブラリを使用して、Click here to begin次のようにプロンプ​​トでクリック イベント ハンドラーを作成しています。

$('#begin').click(function() {playRPS(); return false;});

playRPS次に、新しい機能に気付くでしょう。これにより、ユーザーはいつゲームをプレイするかを決定し、複数回プレイすることができます。

上記の元のコードでは、Javascript コードが読み込まれると、ブラウザーはすぐにいくつかの処理を実行し、その後は実行しません。

  • ユーザーが値を入力するためのプロンプトを起動します。ユーザーが選択肢を入力するとすぐに:
    • computerChoice のランダムな値を選択し、適切なじゃんけんの文字列値に変換します。
    • これは、compare() 関数を実行します。

Click here to beginユーザーがリンクをクリックするのを待つことさえありません! 代わりに、次のような関数を見てください。

var playRPS = function() {
    var userChoice = prompt("Do you choose rock, paper or scissors?");
    var compChoice = computerChoice();
    var result = compare(userChoice,compChoice);
    $('body').append('<p>You chose ' + userChoice + '</p>')
               .append('<p>The computer chose ' + compChoice + '</p>')
               .append('<p>' + result + '</p>');
};

短くて甘い。呼び出されると (jQuery で設定されているように、リンクがクリックされるたびに呼び出されることを忘れないで<a id="begin">ください)、RPS のラウンドに必要なすべてのことを行います。

  • ユーザーに何を選択したいか尋ねます。
  • 関数を実行してcomputerChoice、新しい乱数を生成し、その数値を文字列に変換します。
  • それはあなたのcompare機能を実行します
  • ユーザーの選択、コンピューターの選択、およびcompare関数によって返された結果を、要素<p>の末尾の直前にタグで追加します。<body>

現在、これをさらに改善する方法はいくつもあります。結果をよりきれいに表示することができます。おそらく、ユーザーの入力が有効な回答かどうかを確認する必要があります (たとえば、ボックスに「fire」または「Paper」と入力するとどうなりますか?)。

于 2013-07-18T15:29:21.240 に答える