js を使用して数字推測ゲームを実装する

先週、先生が私に数字当てゲームをするちょっとした宿題を出しました。とても面白いと思ったので、適当に書いてみました。ところどころ論理があまり合理的ではありません（初心者の方は批判しないでください）。主な内容は、0から100までの正の整数をランダムに生成することです。6回推測し、そのたびに推測値が高すぎたか低すぎたかを推測します。間違えるとハートが黒くなります。結果が完了すると、続行するかどうかを尋ねるプロンプトボックスが表示されます。続行する場合は、ページを更新してください（原理と内容は非常に簡単です。記念に）。

サンプル図とコードを添付します（正解はコンソールにあらかじめ印刷されています）

原理や内容は非常にシンプルなので、詳細は割愛します（画像はiconfontからダウンロードしたもので、自分でダウンロードすることもできます）

コード：

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
</head>
<スタイル>
    * {
        マージン: 0;
        パディング: 0;
    }
    .ran {
        マージン: 100px 自動;
        左パディング: 40%;
    }
    ul {
        リストスタイル: なし;
    }
    ul画像{
        幅: 20px;
        高さ: 20px;
        フロート: 左;

    }
</スタイル>
<本文>
    <div class="ran">
        <h1>数字を当てよう</h1>
        <h3>0 から 100 までの正の整数を入力してください</h3>
        <input type="text" onchange="handlenum()">
        <button class="but" click="li()">OK</button>
        <ul>
            <li><img src="./x1.png" alt=""></li>
            <li><img src="./x1.png" alt=""></li>
            <li><img src="./x1.png" alt=""></li>
            <li><img src="./x1.png" alt=""></li>
            <li><img src="./x1.png" alt=""></li>
            <li><img src="./x1.png" alt=""></li>
        </ul>
    </div>
    <スクリプト>
        // but = document.querySelector('but') とします
        inp = document.querySelector('input') とします。
        img = document.querySelectorAll('img') とします。
        num = Math.round(Math.random()*100) とします。
        i = 0とする
        console.log(数値);
        関数 handlenum() {}
        関数li(){
            私は++
            もし (i<6) {
                guess = parseInt(inp.value) とします。
                0<推測<100? 推測:alert('0から100までの正の整数を入力してください')

                if (推測 === 数値) {
                    if (confirm('おめでとうございます、正解です。ゲームを続けますか')) {
                            ウィンドウの位置を再読み込みします。
                        }
                    } それ以外 {
                        推測>数値? alert("大きい"):alert('小さい')
                        画像[6-i].src = './x2.png'
                    }
            } それ以外 {
                if (confirm('回数が使い果たされました。再起動しますか')) {
                    ウィンドウの位置を再読み込みします。
                } 
            }
        }
    </スクリプト>
</本文>
</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: