2. Tingkatkan peta
Peta kami memiliki hambatan seperti ruang terbuka, dinding, baja, rumput, air, markas, dll. Kami dapat merancang semua ini sebagai objek.
2.1 Membuat sekelompok objek rintangan
Grup objek menyimpan objek pada berbagai peta. Kami menggunakan sifat objek untuk menentukan apakah objek dapat dilewati atau diserang.
Barrier.js:
Salinan kode adalah sebagai berikut:
// Objek kelas dasar rintangan, diwarisi dari TankObject
Barrier = function () {
this.defenval = 1; // Pertahanan
this.canbeattacked = true; // Apakah mungkin diserang
}
Barrier.prototype = new tankObject ();
// Dinding
Wallb = function () {}
Wallb.prototype = Barrier baru ();
// tanah kosong
Emplemtb = function () {
this.canacross = true; // bisa dilintasi
}
EmplemeB.prototype = Barrier baru ();
// Sungai
Riverb = function () {
this.defenval = 0;
this.canbeattacked = false; // Anggota objek lebih disukai, dan yang diwarisi dari kelas induk akan ditimpa.
}
Riverb.prototype = Barrier baru ();
// Baja
Steelb = function () {
this.defenval = 3;
}
SteelB.prototype = Barrier baru ();
// objek rumput
Todb = function () {
this.canbeattacked = false;
this.defenval = 0;
this.canacross = true;
}
Todb.prototype = Barrier baru ();
// Markas Besar
PodiumB = function () {
this.defenval = 5;
}
Podiumb.prototype = barrier baru ();
2.2 Tulis data ke peta.
Tambahkan kode berikut secara umum.js:
Salinan kode adalah sebagai berikut:
// Pencacahan jenis elemen peta
/*
0: Tanah Kosong
1: Dinding
2: Baja
3: Groves
4: Sungai
5: Markas Besar
*/
var enummapcellType = {
Kosong: "0"
, Dinding: "1"
, Baja: "2"
, Tod: "3"
, Sungai: "4"
, Podium: "5"
};
// Nama gaya yang sesuai dari setiap medan
var arraycss = ['kosong', 'dinding', 'baja', 'tod', 'sungai', 'podium'];
// peta level
/*Tingkat*/
var str = '0000000000000';
str += ', 0011100111010';
str += ', 1000010000200';
str += ', 1200333310101';
str += ', 0000444400001';
str += ', 3313300001011';
str += ', 3011331022011';
str += ', 3311031011011';
str += ', 0101011102010';
str += ', 0101011010010';
str += ', 010000000110';
str += ', 0100012101101';
str += ', 0010015100000';
// peta tingkat penyimpanan 0, 1, 2, 3 ... masing-masing adalah 1-n ...
var top_maplevel = [str];
2.3 Gambar peta
Setelah pekerjaan persiapan selesai, kami akan mulai menyajikan hidangan dan menggambar peta. Di atas disebutkan peta kami adalah 13 * 13 tabel. Jadi kami menambahkan dua atribut ke objek pemuatan game, dan menambahkan metode peta awal.
Frame.js:
Salinan kode adalah sebagai berikut:
// Game memuat objek dari seluruh objek inti game
Gameloader = function () {
this._mapcontainer = document.geteLementById ("divMap"); // Div yang menyimpan peta game
this._selftank = null; // Tank Player
this._gamelistener = null; // ID Timer Loop Utama Game
/*v2.0 properti yang baru ditambahkan*/
this._level = 1;
this._rowcount = 13;
this._colcount = 13;
this._battlefield = []; // Simpan array dua dimensi objek peta
}
// Metode memuat peta
Load: function () {
// Inisialisasi peta sesuai dengan level
var map = top_maplevel [this._level - 1] .split (",");
var mapBorder = utilityclass.createe ("div", "", "mapBorder", this._mapcontainer);
// bepergian melalui setiap sel di tabel peta
untuk (var i = 0; i <this._rowcount; i ++) {
// Buat div, dan peta setiap baris disimpan di div ini
var divrow = utilityclass.createe ("div", "", "", mapborder);
// Buat array lain dalam array satu dimensi
this._battlefield [i] = [];
untuk (var j = 0; j <this._colcount; j ++) {
// Baca data peta, nilai default: 0
var v = (peta [i] && peta [i] .charat (j)) || 0;
// Masukkan elemen rentang, elemen rentang adalah unit peta
var spancol = utilityclass.createe ("span", "", "", divrow);
spancol.classname = arraycss [v];
// Masukkan objek peta ke dalam array dua dimensi untuk deteksi tabrakan yang lebih mudah.
var to = null;
switch (v) {
case enummapcellType.empty:
to = new emptileB ();
merusak;
case enummapcellType.wall:
to = new wallb ();
merusak;
case enummapcellType.steel:
ke = baja baru ();
merusak;
case enummapcellType.tod:
to = new todb ();
merusak;
case enummapcellType.river:
TO = New Riverb ();
merusak;
case enummapcellType.podium:
ke = podiumB baru ();
merusak;
bawaan:
Lempar kesalahan baru ("Nomor peta melintasi batas!");
merusak;
}
to.ui = spancol;
// J di sini adalah x, karena loop internal horizontal dan x adalah sumbu horizontal.
to.xposition = j;
to.yposition = i;
// Simpan objek peta saat ini ke dalam array dua dimensi OBJ sebagai objek hambatan, dan penjajah sebagai objek pendudukan
this._battlefield [i] [j] = {obj: to, resceer: null, lock: false};
} // akhiri untuk
} // akhiri untuk
// Masukkan variabel global jendela
window.battlefield = this._battlefield;
}
Oke, peta kami selesai di sini. Komentar di sini sudah sangat rinci. Jika Anda masih tidak mengerti, unduh kode sumber dan debug sendiri. Itu akan mudah dimengerti.
Di sini kami terutama memuat data peta dan memasukkan setiap peta sebagai elemen rentang ke dalam dokumen HTML. Dan simpan objek peta dalam array dua dimensi. Di masa depan, ketika kita melakukan deteksi tabrakan, kita dapat secara langsung mengambil objek array yang sesuai melalui koordinat objek, yang sangat nyaman.
Kode sumber terlampir: http://xiazai.vevb.com/201411/yuanma/jstankedazhan(vevb.com).rar