Baru-baru ini, diaosi terpaksa belajar TypeScript (jika anda tidak mempelajarinya, anda akan dibuang, 5555), jadi anda perlu belajar JavaScript dahulu. Anda mesti memahami semua perkara yang berkaitan dengan web , jika tidak, anda tidak akan dapat menipu BOSS.
Saya belajar JavaScript untuk seketika hari ini Di sini saya membuat permainan ringan yang mudah untuk melatih kemahiran saya. JQuery digunakan, jika tidak, pengikatan peristiwa akan menyusahkan.
Sebagai Hello World of JavaScript, perkara ini ialah perkara berikut. Berikut adalah pengenalan ringkas kepada kaedah pelaksanaan.
Rendering:
Tentukan dahulu helaian gaya Jangan lupa untuk menambah titik sebelum elemen tersuai, jika tidak, ia akan menjadi tidak sah (pemula telah dicederakan oleh perkara ini berkali-kali):
app.css
jarak {
gaya fon: condong
}
.Button gelap {
Lebar:70px;
Tinggi:70px;
warna latar:hijau;
}
.Butang cahaya {
Lebar:70px;
Tinggi:70px;
warna latar belakang:biru muda;
}
.kembali {
saiz fon:kecil;
}
Seterusnya, mari kita laksanakan reka letak keseluruhan, iaitu apa yang terdapat dalam teg badan Ini adalah sangat mudah, tidak banyak untuk dikatakan:
Kemudian, mula-mula laksanakan pengesahan yang sangat mudah Selepas mengklik butang mula, tentukan sama ada input pengguna ialah nombor dan sama ada ia berada dalam julat 4-9.
jika (isNaN($(X).val()) || isNaN($(Y).val())) {
alert('Anda boleh memasukkan nombor dalam sel mendatar dan menegak.');
kembali;
}
lain jika ($(X).val() < 4 || $(Y).val() < 4 || $(X).val() >= 10 || $(Y).val( ) >= 10) {
makluman('Bilangan garisan mendatar dan menegak tidak boleh kurang daripada 4 dan tidak boleh lebih daripada 9.');
kembali;
}
startGame();
});
});
$() ialah perpustakaan JQuery yang digunakan. Pada asasnya, pemilih yang digunakan di sini terutamanya termasuk: $("#xxx") elemen pertama dengan id xxx; $(".xxx") semua elemen dengan gaya xxx.
langkah ialah pembolehubah yang saya takrifkan dan pengguna merekodkan berapa kali pengguna menekannya.
Setiap kali pengguna menekan butang mula, kosongkan butang yang dilukis asal (jika ada). Ia mudah untuk dilaksanakan dengan JQuery, hanya gunakan gaya untuk dipadankan:
Kemudian sekumpulan butang dijana. Ini sangat biasa dan tidak memerlukan penjelasan:
untuk (var i = 1; i <= x; i ) {
untuk (var j = 1; j <= y; j ) {
butang var = createButton('bt' i j);
grid.appendChild(butang);
}
var ret = document.createElement('br');
ret.className = "kembali";
grid.appendChild(ret);
}
createButton ialah kaedah yang digunakan untuk menjana dan menetapkan elemen html. Penamaan id butang di sini ialah nombor lajur nombor baris bt, supaya mudah untuk mengetahui butang mana yang ditekan pada masa hadapan. Untuk memudahkan tempoh, saya menetapkan bahawa nombor baris dan nombor lajur mestilah kurang daripada 10 (sangat malas), jadi anda boleh mendapatkan aksara pertama atau kedua dari yang terakhir untuk mengetahui nilai koordinat.
Logik program yang paling penting: tekan butang untuk menukar status dirinya dan butang bersebelahan. Kami hanya perlu mengeluarkan koordinat, dan kemudian menukar status butang atas, bawah, kiri dan kanan (perhatikan pertimbangan situasi di luar sempadan), tulis penghakiman di sini:
var x = this.id.charAt(2);
var y = this.id.charAt(3);
jika (x - 1 > 0) {
changeButton('bt' (x - 1) y);
}
Perhatikan bahawa ini ditakrifkan dalam JQuery. Bukan mudah untuk mendapatkan ini tanpa JQuery. Satu perkara yang perlu diingatkan ialah sekeping kod berikut:
Jika anda tidak menghuraikanInt, JavaScript akan menganggap 1 sebagai rentetan dan menggabungkannya dengan x berikut, jadi id akan menjadi salah, jadi hanya tukar x kepada int dan tambahkannya (anda tidak perlu melakukannya ini dalam kes penolakan di atas) ). Ini adalah salah satu kelemahan bahasa yang tidak ditaip, itulah sebabnya TypeScript muncul (apa yang dipelajari oleh Diaosi baru-baru ini).
Sekarang bahagian penting telah selesai, semua kod fail htm ditampal di bawah.
$(dokumen). sedia(fungsi () {
$(StartButton).klik(function () {
Jika (langkah > 0) {
If (confirm('Adakah anda pasti mahu memulakan semula permainan?') === false)
kembali;
}
jika (isNaN($(X).val()) || isNaN($(Y).val())) {
alert('Anda boleh memasukkan nombor dalam sel mendatar dan menegak.');
kembali;
}
lain jika ($(X).val() < 4 || $(Y).val() < 4 || $(X).val() >= 10 || $(Y).val( ) >= 10) {
alert('Bilangan garisan mendatar dan menegak tidak boleh kurang daripada 4 dan tidak boleh lebih daripada 9.');
kembali;
}
startGame();
});
});
var maxX, maxY;
fungsi startGame() {
maxX = $(X).val();
maxY = $(Y).val();
makeGrid(maxX, maxY);
langkah = 0;
document.getElementById("step").innerHTML = step;
}
$(.darkButton").buang();
$(".lightButton").remove();
$(".return").remove();
untuk (var i = 1; i <= x; i ) {
untuk (var j = 1; j <= y; j ) {
butang var = createButton('bt' i j);
}
var ret = document.createElement('br');
ret.className = "kembali";
grid.appendChild(ret);
}
$(".Button gelap").klik(fungsi () {
changeButton(this.id);
var x = this.id.charAt(2);
var y = this.id.charAt(3);
jika (x - 1 > 0) {
changeButton('bt' (x - 1) y);
}
jika (y - 1 > 0) {
changeButton('bt' x (y - 1));
}
var newX = 1 parseInt(x);
jika (x 1 <= maxX) {
changeButton('bt' newX y);
}
var newY = 1 parseInt(y);
jika (y 1 <= maxY) {
changeButton('bt' x newY);
}
langkah ;
document.getElementById("step").innerHTML = step;
});
}
fungsi changeButton(id) {
butang var = document.getElementById(id);
jika (button.className === "DakButton") {
button.className = "lightButton";
}
lain {
button.className = "darkButton";
}
}
fungsi createButton(id) {
butang var = document.createElement('butang');
button.id = id;
button.className = "darkButton";
butang kembali;
}
Hidupkan semua mentol jika boleh!
Hello
Anda telah mengalihkan