最近、diaosi は TypeScript を学ぶことを強制されているので (学ばないと退学になります、5555)、これは良い機会です。Web 関連のすべてのことを理解する必要があります。 、そうしないとBOSSを騙すことができません。
今日はJavaScriptを少し勉強しましたが、スキルを練習するために簡単なライトアップゲームを作りました。 JQuery が使用されます。そうでない場合、イベント バインディングは面倒になります。
JavaScriptのHello Worldとしては以下のようなものです。ここでは実装方法を簡単に紹介します。
レンダリング:
最初にスタイル シートを定義します。カスタム要素の前にドットを追加することを忘れないでください。そうしないと無効になります (初心者はこれによって何度も被害を受けています)。
app.css
スパン {
フォントスタイル: イタリック
}
.darkButton {
幅:70px;
高さ:70px;
背景色:緑;
}
.lightButton {
幅:70px;
高さ:70px;
背景色:水色;
}
.return {
フォントサイズ:小;
}
次に、body タグに含まれる全体的なレイアウトを実装しましょう。これは非常に簡単で、多くを言う必要はありません。
次に、まず開始ボタンをクリックした後、ユーザー入力が数字であるかどうか、およびそれが 4 ～ 9 の範囲内であるかどうかを判断する非常に簡単な検証を実装します。
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 を使用すると簡単に実装でき、一致するスタイルを使用するだけです。
その後、多数のボタンが生成されます。これは非常に一般的なので説明の必要はありません:
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 文字目を取得するだけで済みます。
プログラムの最も重要なロジック: ボタンを押して、それ自体と隣接するボタンのステータスを変更します。座標を取り出して、上下左右のボタンの状態を変更するだけです (範囲外の状況の判定に注意してください)。 ここに判定を書きます:
var x = this.id.charAt(2);
var y = this.id.charAt(3);
if (x - 1 > 0) {
changeButton('bt' (x - 1) y);
}
これは JQuery で定義されていることに注意してください。 JQuery なしでこれを取得するのは簡単ではありません。次のコード部分に注意してください:
parseInt を行わない場合、JavaScript は 1 を文字列として扱い、次の x と連結するため、ID が間違ってしまいます。そのため、x を int に変換して加算するだけです (実行する必要はありません)これは上記の減算の場合です) )。これは型なし言語の欠点の 1 つであり、それが TypeScript の登場理由です (Diaosi が最近学習していること)。
重要な部分が完了したので、htm ファイルのすべてのコードを以下に貼り付けます。
<頭>
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;
関数 startGame() {
maxX = $(X).val();
maxY = $(Y).val();
makeGrid(maxX, maxY);
ステップ = 0;
document.getElementById("step").innerHTML = step;
}
$(".darkButton").remove();
$(".lightButton").remove();
$(".return").remove();
for (var i = 1; i for (var j = 1; j var button = createButton('bt' i j);
}
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";
戻るボタン;
}
