Kongsi permainan pencahayaan ringkas yang dibuat dengan JQuery_jquery

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

Salin kod Kod adalah seperti berikut:

badan
{
font-family: 'Segoe UI', sans-serif;
}

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:

Salin kod Kod adalah seperti berikut:

Hidupkan semua mentol jika boleh!

Hello

           Mendatar:
           
           Menegak:
          
           Mulakan permainan

Anda telah mengalihkan 0

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.

Salin kod Kod adalah seperti berikut:

$(dokumen).sedia(fungsi () {
$(startButton).klik(fungsi () {
           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) {
                 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:

Salin kod Kod adalah seperti berikut:

$(".DakButton").buang();
$(".lightButton").remove();
$(".return").remove();

Kemudian sekumpulan butang dijana. Ini sangat biasa dan tidak memerlukan penjelasan:

Salin kod Kod adalah seperti berikut:

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

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:

Salin kod Kod adalah seperti berikut:

$(".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);
}

Perhatikan bahawa ini ditakrifkan dalam JQuery. Bukan mudah untuk mendapatkan ini tanpa JQuery. Satu perkara yang perlu diingatkan ialah sekeping kod berikut:

Salin kod Kod adalah seperti berikut:

var newX = 1 parseInt(x);
jika (x 1 <= maxX) {
​ changeButton('bt' newX y);
}

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.

Salin kod Kod adalah seperti berikut:

           $(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;

var step = 0;

fungsi startGame() {

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

fungsi makeGrid(x, y) {

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

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

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);
            }

            $(".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

           Mendatar:
           
           Menegak:
          
           Mulakan permainan

Anda telah mengalihkan 0

Jika anda ingin menjalankan kod, anda hanya perlu menyimpan helaian gaya awal sebagai app.css, kemudian simpan kod lengkap ini sebagai default.htm, kemudian letakkannya dalam folder yang sama dan buka fail htm dengan penyemak imbas Itu sahaja (IE perlu mendayakan ActiveX).

Perlu diingat bahawa perkara ini mempunyai banyak kaitan dengan keserasian penyemak imbas, jadi ia tidak dijamin untuk berjalan secara normal pada semua penyemak imbas (dan mana-mana versi). . .

By the way, izinkan saya katakan sedikit lagi di penghujungnya. Anda boleh menggunakan Visual Studio 2012 untuk mengedit html dan JavaScript, ia akan mempunyai Intellisense, dan anda boleh terus menambah titik putus untuk penyahpepijatan, yang sangat mudah.