5

私は奇妙な問題を抱えていますが、私は JavaScript の初心者なので驚くことではありません。基本的に私は単純なハイロー カード ゲームを作成しています。(2 枚のカードを引き、最も高いカードが勝ちます)。とにかく、コードは以下です。

プログラムの基本的な流れは非常に単純です。2 つの乱数 (1 ～ 52) を選択します。これらの番号は、対応するカードにマップされます。(つまり、番号 1 はスペードのエース、番号 37 はクラブのジャックなど)。とにかく、カードを引いた後、対応するカードを表示し、勝者を決定するプログラムです。このすべての終わりに、アラートが表示され、抽選の勝者に通知し、ユーザーがもう一度プレイするかどうかを尋ねます。

私が抱えている問題は次のとおりです。プログラムはすでにカードの画像を表示し、結果をテキスト領域に出力しているはずですが、実際に発生する前に警告ボックスが表示され、カードや結果が表示されません。何か案は？これまでのすべてのコードを投稿しています。助けていただければ幸いです。前もって感謝します。

function drawCards() {
    var oppCard = randNumber();
    var customerCard = randNumber();

    while (oppCard == customerCard) {
        customerCard = randNumber();
    }
    var oppCardName = displayCard(oppCard, "oppImage");
    var customerCardName = displayCard(customerCard, "custImage");

    var result2 = "Your card was: " + customerCardName;
    var result1 = "The opponent's card was: " + oppCardName;

    var result3 = determineWinner(oppCard, customerCard);
    var result4 = result3 + '\n' + result1 + '\n' + result2;
    $("#textareaRes").text(result4);

    playAgain(result3);
}

function determineWinner(oppsCard, customersCard) {
    var oppValue = oppsCard % 13;
    var customerValue = oppsCard % 13;

    var winnerString = "";
    if (oppValue == 0) {
        oppValue = 13;
    }
    if (customerValue == 0) {
        customerValue = 13;
    }
    if (oppValue == customerValue) {
        winnerString = "You Tied.";
    }
    else if (oppValue > customerValue) {
        winnerString = "You Lose.";
    }
    else if (oppValue < customerValue) {
        winnerString = "You Win!!";
    }
    return winnerString;
}

function randNumber() {
    var min = 1;
    var max = 52;
    var random = Math.floor(Math.random() * (max - min + 1)) + min;
    return random;
}

function playAgain(resultString) {
    if (resultString == "You Lose." || resultString == "You Win!!") {
        alert(resultString);
        var conf = confirm("Play Again?");
        if (conf == true) {
            $("#textareaRes").text("");
            document.getElementById("custImage").src="./cardImages/default.png";
            document.getElementById("oppImage").src="./cardImages/default.png";
        }
        else {
            window.location = "#mainMenuPage";
        }
    }
    else {
        alert(resultString);
        alert("Try Again.");
        $("#textareaRes").text("");
        document.getElementById("custImage").src="./cardImages/default.png";
        document.getElementById("oppImage").src="./cardImages/default.png";
    }
}

したがって、テスト用に非常に長いという理由だけで、ディスプレイ カード機能のコードをここに配置しませんでした。これは、52 個の乱数すべての巨大なスイッチ ケースです。完成品は実際には XML ファイルから取得されますが、これはテスト目的でのみ使用しました。(なんらかの理由で、ディスプレイ カード関数を表示する必要がある場合は、お知らせください。投稿できます。) とにかく、要約すると、drawCards() 関数で行われる最後の呼び出しは playAgain 関数です。このコードを実行すると、結果もカード画像も表示されません。playAgain 関数によって呼び出されたアラートに直接ジャンプするだけです。これはおそらくかなり初歩的な質問ですが、私は少し困惑しています。ですから、皆さんが提供できるどんな助けも大歓迎です。ありがとう。

編集:実際には、コンピューターのブラウザーで正しく実行されます。ただし、問題は電話やタブレットなどのモバイル デバイスで発生します。したがって、これはおそらく私がここで間違っていることです。どんな助けでも大歓迎です。

4

3 に答える 3

5

Javascript コードが実行されている限り、ブラウザの変更は表示されません。

ブラウザーはイベント ドリブンであるため、DOM 内の要素を変更しても変更はすぐには表示されず、代わりにイベントがトリガーされて要素が再描画されます。関数の実行が完了すると、ブラウザーは保留中のイベントを処理し、変更を表示します。

したがって、アプリケーションを作成するときは、ブラウザーが変更を表示できるように、同じアプローチを使用する必要があります。

于 2013-04-18T12:11:11.223 に答える
-1

"./cardImages/default.png"

よくわかりません...しかし、「../cardImages/default.png」を試してください...私は常に2つのドットを使用して、より高いレベルに到達します

于 2013-04-18T12:22:05.660 に答える