Mencipta rekod penuh pertempuran kereta kebal dengan kemahiran javascript (2)_javascript

2. Perbaik peta

Peta kami mempunyai halangan seperti kawasan lapang, dinding, keluli, rumput, air dan ibu pejabat. Kita boleh mereka semua ini sebagai objek.

2.1 Cipta kumpulan objek halangan

Kumpulan objek menyimpan objek pada pelbagai peta Kami menggunakan sifat objek untuk menentukan sama ada objek boleh dilalui atau diserang.

Barrier.js:

Salin kod Kod adalah seperti berikut:

// Objek kelas asas halangan, diwarisi daripada TankObject
Penghalang = fungsi () {
Ini.DefenVal = 1; // Kuasa pertahanan
This.CanBeAttacked = true; // Sama ada ia boleh diserang
}
Barrier.prototype = TankObject baharu();
// Dinding
WallB = fungsi () { }
WallB.prototype = Penghalang baharu();
// Ruang terbuka
EmptyB = fungsi () {
This.CanAcross = benar; // Boleh dilalui
}
EmptyB.prototype = Penghalang baharu();
// Sungai
RiverB = fungsi () {
This.DefenVal = 0;
This.CanBeAttacked = false; // Ahli objek diambil dahulu, dan mereka yang diwarisi daripada kelas induk akan ditimpa.
}
RiverB.prototype = Penghalang baharu();
// Keluli
SteelB = fungsi () {
Ini.DefenVal = 3;
}
SteelB.prototype = Penghalang baharu();
// Objek rumput
TodB = fungsi () {
This.CanBeAttacked = palsu;
This.DefenVal = 0;
This.CanAcross = benar;
}
TodB.prototype = Penghalang baharu();
//Ibu Pejabat
PodiumB = fungsi () {
Ini.DefenVal = 5;
}
PodiumB.prototype = Penghalang baharu();

2.2 Data ditulis pada peta.

Tambahkan kod berikut dalam Common.js:

Salin kod Kod adalah seperti berikut:

//Penghitungan jenis elemen peta
/*
0: Ruang terbuka
1: Dinding
2: Keluli
3: Semak
4：Sungai
5: Ibu Pejabat
*/
var EnumMapCellType = {
Kosong: "0"
, Dinding: "1"
, Keluli: "2"
, Tod: "3"
, Sungai: "4"
, Podium: "5"
};
//Nama gaya yang sepadan dengan setiap rupa bumi
var ArrayCss = ['kosong', 'dinding', 'keluli', 'tod', 'sungai', 'podium'];
// Peta aras
/*Tahap*/
var str = '0000000000000';
str = ',0011100111010';
str = ',1000010000200';
str = ',1200333310101';
str = ',0000444400001';
str = ',3313300001011';
str = ',3011331022011';
str = ',3311031011011';
str = ',0101011102010';
str = ',0101011010010';
str = ',0100000000110';
str = ',0100012101101';
str = ',0010015100000';
//Peta tahap storan 0,1,2,3... masing-masing adalah 1-n...Tahap
var Top_MapLevel = [str];

2.3 Lukis peta

Setelah persiapan selesai, mari kita mula menghidangkan hidangan dan melukis peta. Seperti yang dinyatakan sebelum ini, peta kami ialah jadual 13 * 13. Oleh itu, kami menambah atribut baris dan lajur pada objek pemuatan permainan, dan menambah kaedah peta permulaan.

Frame.js:

Salin kod Kod adalah seperti berikut:

// Objek pemuatan permainan Objek teras keseluruhan permainan
GameLoader = fungsi () {
This._mapContainer = document.getElementById("divMap"); // Div
yang menyimpan peta permainan This._selfTank = null; // tangki pemain
This._gameListener = null; // id pemasa gelung utama permainan
/*Atribut baharu ditambah dalam v2.0*/
Tahap_ini = 1;
This._rowCount = 13;
This._colCount = 13;
This._battleField = []; // Simpan tatasusunan dua dimensi objek peta
}
//Muatkan kaedah peta
Beban: fungsi () {
// Mulakan peta mengikut tahap
        var map = Top_MapLevel[this._level - 1].split(",");
        var mapBorder = UtilityClass.CreateE("div", "", "mapBorder", this._mapContainer);
// Lintas setiap sel dalam jadual peta
untuk (var i = 0; i < this._rowCount; i ) {
                                    // Buat div, dan peta setiap baris disimpan dalam div ini
            var divRow = UtilityClass.CreateE("div", "", "", mapBorder);
//Buat tatasusunan lain dalam tatasusunan satu dimensi
This._battlefield[i] = [];
untuk (var j = 0; j < this._colCount; j ) {
// Baca data peta, nilai lalai: 0
              var v = (peta[i] && peta[i].charAt(j)) || 0;
// Masukkan elemen span, elemen span ialah unit peta
              var spanCol = UtilityClass.CreateE("span", "", "", divRow);
                     spanCol.className = ArrayCss[v];
                         // Letakkan objek peta ke dalam tatasusunan dua dimensi untuk memudahkan pengesanan perlanggaran seterusnya.
              var to = null;
suis (v) {
kes EnumMapCellType.Empty:
                                 kepada = EmptyB( baharu);
rehat;
kes EnumMapCellType.Wall:
                                 kepada = WallB baharu();
rehat;
kes EnumMapCellType.Steel:
                                  kepada = SteelB baharu();
rehat;
kes EnumMapCellType.Tod:
                                 kepada = TodB baharu();
rehat;
kes EnumMapCellType.River:
                              kepada = RiverB baharu();
rehat;
kes EnumMapCellType.Podium:
                              kepada = PodiumB baharu();
rehat;
                                                                                                                                                                                                                                  ... buang Ralat baharu("Nombor peta di luar sempadan!");
rehat;
                 }
                     kepada.UI = spanCol;
                         // j di sini ialah X, kerana gelung dalam adalah mendatar, x ialah absis
                          kepada.XPosition = j;
                        kepada.YPosition = i;
                                           // Simpan objek peta semasa ke dalam tatasusunan dua dimensi, obj ialah objek halangan dan penghuni ialah objek yang menduduki
This._battleField[i][j] = { obj: to, occupier: null, lock: false };
                                           //tamat untuk
                                     // tamat untuk
                                                                                                                                                                                                                                     // Masukkan ke dalam pembolehubah global tetingkap
            tetingkap.BattleField = ini._battleField;
}

ok, peta kami selesai di sini. Komen di sini sangat terperinci Jika anda masih tidak memahami sesuatu, muat turun kod sumber dan nyahpepijatnya sendiri.

Di sini kami terutamanya memuatkan data peta dan memasukkan setiap peta ke dalam dokumen html sebagai elemen span. Dan simpan objek peta dalam tatasusunan dua dimensi. Pada masa hadapan, apabila kita melakukan pengesanan perlanggaran, kita boleh terus mendapatkan objek tatasusunan yang sepadan melalui koordinat objek, yang sangat mudah.

Dilampirkan kod sumber:

http://xiazai.jb51.net/201411/yuanma/jstankedazhan(jb51.net).rar