JQuery_jquery で作成したシンプルな照明ゲームを共有する

最近、diaosi は TypeScript を学ぶことを強制されているので (学ばないと退学になります、5555)、これは良い機会です。Web 関連のすべてのことを理解する必要があります。 、そうしないとBOSSを騙すことができません。

今日はJavaScriptを少し勉強しましたが、スキルを練習するために簡単なライトアップゲームを作りました。 JQuery が使用されます。そうでない場合、イベント バインディングは面倒になります。

JavaScriptのHello Worldとしては以下のようなものです。ここでは実装方法を簡単に紹介します。

レンダリング:

最初にスタイル シートを定義します。カスタム要素の前にドットを追加することを忘れないでください。そうしないと無効になります (初心者はこれによって何度も被害を受けています)。
app.css

コードをコピーします コードは次のとおりです:

本体
{
フォントファミリー: 'Segoe UI'、サンセリフ;
}

スパン {
フォントスタイル: イタリック
}

.darkButton {
幅:70px;
高さ:70px;
背景色:緑;
}

.lightButton {
幅:70px;
高さ:70px;
背景色:水色;
}

.return {
フォントサイズ:小;
}

次に、body タグに含まれる全体的なレイアウトを実装しましょう。これは非常に簡単で、多くを言う必要はありません。

コードをコピーします コードは次のとおりです:

できればすべての電球をつけてください!

こんにちは

水平:

縦:

ゲーム開始

0 ステップを移動しました。

次に、まず開始ボタンをクリックした後、ユーザー入力が数字であるかどうか、およびそれが 4 ～ 9 の範囲内であるかどうかを判断する非常に簡単な検証を実装します。

コードをコピーします コードは次のとおりです:

$(document).ready(function () {
$(startButton).click(function () {
If (ステップ > 0) {
If (confirm('ゲームを再起動してもよろしいですか?') === false)
return;
}

if (isNaN($(X).val()) || isNaN($(Y).val())) {
alert('横方向と縦方向のセルに数字を入力できます。');
return;
}
else if ($(X).val() = 10 || $(Y).val( ) >= 10) {
alert('水平線と垂直線の数は 4 つ未満にすることはできません。また 9 つを超えることはできません。');
return;
}

startGame();
});
});

$() は、使用される JQuery ライブラリです。基本的に、ここで使用されるセレクターには主に次のものが含まれます: $("#xxx") ID xxx の最初の要素 $(".xxx") スタイル xxx のすべての要素。

step は私が定義した変数で、ユーザーがそれを押した回数を記録します。

ユーザーがスタート ボタンを押すたびに、最初に描画されたボタン (存在する場合) をクリアします。 JQuery を使用すると簡単に実装でき、一致するスタイルを使用するだけです。

コードをコピーします コードは次のとおりです:

$(".darkButton").remove();
$(".lightButton").remove();
$(".return").remove();

その後、多数のボタンが生成されます。これは非常に一般的なので説明の必要はありません:

コードをコピーします コードは次のとおりです:

var Grid = document.getElementById('content');

for (var i = 1; i for (var j = 1; j var button = createButton('bt' i j);

グリッド.appendChild(ボタン);
}

var ret = document.createElement('br');
ret.className = "戻り";

グリッド.appendChild(ret);
}

createButton は、HTML 要素を生成および設定するために使用されるメソッドです。ここでのボタンの ID 命名は bt 行番号列番号であるため、今後どのボタンが押されたかを簡単に知ることができます。期間をわかりやすくするために、行番号と列番号は 10 未満でなければならないと規定しました (とても怠惰です)。そのため、座標値を知るには最後から 1 文字目か 2 文字目を取得するだけで済みます。

プログラムの最も重要なロジック: ボタンを押して、それ自体と隣接するボタンのステータスを変更します。座標を取り出して、上下左右のボタンの状態を変更するだけです (範囲外の状況の判定に注意してください)。 ここに判定を書きます:

コードをコピーします コードは次のとおりです:

$(".darkButton").click(function () {
ChangeButton(this.id);

var x = this.id.charAt(2);
var y = this.id.charAt(3);

if (x - 1 > 0) {
changeButton('bt' (x - 1) y);
}

これは JQuery で定義されていることに注意してください。 JQuery なしでこれを取得するのは簡単ではありません。次のコード部分に注意してください:

コードをコピー コードは次のとおりです:

var newX = 1 parseInt(x);
if (x 1 changeButton('bt' newX y);
}

parseInt を行わない場合、JavaScript は 1 を文字列として扱い、次の x と連結するため、ID が間違ってしまいます。そのため、x を int に変換して加算するだけです (実行する必要はありません)これは上記の減算の場合です) )。これは型なし言語の欠点の 1 つであり、それが TypeScript の登場理由です (Diaosi が最近学習していること)。

重要な部分が完了したので、htm ファイルのすべてのコードを以下に貼り付けます。

コードをコピー コードは次のとおりです:

<頭>




<スクリプト>
$(document).ready(function () {
$(startButton).click(function () {
if (ステップ > 0) {
If (confirm('ゲームを再起動してもよろしいですか?') === false)
return;
}

if (isNaN($(X).val()) || isNaN($(Y).val())) {
alert('横方向と縦方向のセルに数字を入力できます。');
return;
}
else if ($(X).val() = 10 || $(Y).val( ) >= 10) {
alert('水平線と垂直線の数は 4 未満にすることはできず、9 を超えることはできません。');
return;
}

startGame();
}); });

var maxX, maxY;

変数ステップ = 0;

関数 startGame() {

maxX = $(X).val();
maxY = $(Y).val();
makeGrid(maxX, maxY);
ステップ = 0;
document.getElementById("step").innerHTML = step;
}

関数 makeGrid(x, y) {

$(".darkButton").remove();
$(".lightButton").remove();
$(".return").remove();

var Grid = document.getElementById('content');

for (var i = 1; i for (var j = 1; j var button = createButton('bt' i j);
グリッド.appendChild(ボタン);

}

var ret = document.createElement('br');
                ret.className = "戻り";

Grid.appendChild(ret);
            }

$(".darkButton").click(function () {
                changeButton(this.id);

var x = this.id.charAt(2);
                var y = this.id.charAt(3);

if (x - 1 > 0) {
                    changeButton('bt' (x - 1) y);
                }
                if (y - 1 > 0) {
                    changeButton('bt' x (y - 1));
                }

var newX = 1 parseInt(x);
                if (x 1                     changeButton('bt' newX y);
                }
                var newY = 1 parseInt(y);
                if (y 1                     changeButton('bt' x newY);
                }

ステップ ;

document.getElementById("step").innerHTML = step;
            });
        }

function changeButton(id) {
            var button = document.getElementById(id);

if (button.className === "darkButton") {
                button.className = "ライトボタン";
            }
            他 {
                button.className = "darkButton";
            }
        }

function createButton(id) {
            var button = document.createElement('button');
            button.id = id;
            button.className = "darkButton";
            戻るボタン;
        }
   

できればすべての電球をつけてください!

こんにちは

水平:

縦:

ゲーム開始

0 ステップを移動しました。

コードを実行する場合は、最初のスタイル シートを app.css として保存し、次にこの完全なコードをdefault.htm として保存し、同じフォルダーに配置してブラウザで htm ファイルを開くだけです。以上です (IE で ActiveX を有効にする必要があります)。

これはブラウザの互換性と大きく関係しているため、すべてのブラウザ (およびすべてのバージョン) で正常に実行されるという保証はないことに注意してください。 。 。

ところで、最後にもう少しだけ言わせてください。 Visual Studio 2012 を使用すると、HTML と JavaScript を編集でき、Intellisense が搭載され、デバッグ用のブレークポイントを直接追加できるため、非常に便利です。