2. ปรับปรุงแผนที่
แผนที่ของเรามีอุปสรรคเช่นพื้นที่เปิดโล่งผนังเหล็กหญ้าน้ำสำนักงานใหญ่ ฯลฯ เราสามารถออกแบบสิ่งเหล่านี้ทั้งหมดเป็นวัตถุ
2.1 การสร้างกลุ่มวัตถุสิ่งกีดขวาง
กลุ่มวัตถุบันทึกวัตถุบนแผนที่ต่างๆ เราใช้คุณสมบัติของวัตถุเพื่อตรวจสอบว่าวัตถุสามารถส่งผ่านหรือโจมตีได้หรือไม่
Barrier.js:
การคัดลอกรหัสมีดังนี้:
// วัตถุคลาสฐานสิ่งกีดขวางที่สืบทอดมาจาก tankobject
barrier = function () {
this.defenval = 1; // การป้องกัน
this.canbeattacked = true; // เป็นไปได้ไหมที่จะถูกโจมตี
-
barrier.prototype = new tankobject ();
// กำแพง
wallb = function () {}
Wallb.prototype = new Barrier ();
// ที่ดินว่างเปล่า
emptyb = function () {
this.canacross = true; // สามารถข้ามได้
-
emportb.prototype = new Barrier ();
// แม่น้ำ
Riverb = function () {
this.defenval = 0;
this.canbeattacked = false; // สมาชิกของวัตถุเป็นที่ต้องการและผู้ที่สืบทอดมาจากชั้นพาเรนต์จะถูกเขียนทับ
-
Riverb.prototype = new Barrier ();
// เหล็ก
Steelb = function () {
this.defenval = 3;
-
Steelb.prototype = new Barrier ();
// วัตถุหญ้า
todb = function () {
this.canbeattacked = false;
this.defenval = 0;
this.canacross = true;
-
todb.prototype = new Barrier ();
// สำนักงานใหญ่
podiumb = function () {
this.defenval = 5;
-
Podiumb.prototype = new Barrier ();
2.2 เขียนข้อมูลไปยังแผนที่
เพิ่มรหัสต่อไปนี้ใน Common.js:
การคัดลอกรหัสมีดังนี้:
// การแจงนับประเภทองค์ประกอบแผนที่
-
0: ที่ดินว่างเปล่า
1: กำแพง
2: เหล็ก
3: โกรฟส์
4: แม่น้ำ
5: สำนักงานใหญ่
-
var enummapCellType = {
ว่าง: "0"
, กำแพง: "1"
, เหล็ก: "2"
, TOD: "3"
, แม่น้ำ: "4"
, โพเดียม: "5"
-
// ชื่อสไตล์ที่สอดคล้องกันของแต่ละภูมิประเทศ
var arraycss = ['ว่าง', 'กำแพง', 'เหล็ก', 'tod', 'แม่น้ำ', 'โพเดียม'];
// แผนที่ระดับ
/*ระดับ*/
var str = '0000000000000';
str += ', 0011100111010';
str += ', 1000010000200';
str += ', 1200333310101';
str += ', 00004444400001';
str += ', 33133300001011';
str += ', 3011331022011';
str += ', 3311031011011';
str += ', 0101011102010';
str += ', 0101011010010';
str += ', 010000000110';
str += ', 0100012101101';
str += ', 0010015100000';
// แผนที่ระดับการจัดเก็บ 0, 1, 2, 3 ... เป็น 1-N ตามลำดับ ...
var top_maplevel = [str];
2.3 วาดแผนที่
หลังจากการเตรียมงานเสร็จสิ้นเราจะเริ่มเสิร์ฟอาหารและวาดแผนที่ แผนที่ของเรากล่าวถึงข้างต้นคือ 13 * 13 ตาราง ดังนั้นเราจึงเพิ่มแอตทริบิวต์สองแอตทริบิวต์ลงในวัตถุที่กำลังโหลดเกมและเพิ่มวิธีการเริ่มต้นแผนที่
frame.js:
การคัดลอกรหัสมีดังนี้:
// เกมโหลดวัตถุของวัตถุหลักของเกมทั้งหมด
gameLoader = function () {
this._MapContainer = document.getElementById ("divmap"); // div ที่เก็บแผนที่เกม
this._selftank = null; // เครื่องเล่นถัง
this._gamelistener = null; // รหัสตัวจับเวลาลูปหลักของเกม
/*v2.0 คุณสมบัติที่เพิ่มใหม่*//
this._level = 1;
this._rowCount = 13;
this._ColCount = 13;
this._battlefield = []; // เก็บอาร์เรย์สองมิติของวัตถุแผนที่
-
// วิธีการโหลดแผนที่
โหลด: ฟังก์ชัน () {
// เริ่มต้นแผนที่ตามระดับ
var map = top_maplevel [this._level - 1] .split (",");
var mapBorder = utilityclass.createTe ("div", "", "mapBorder", this._mapcontainer);
// เดินทางผ่านแต่ละเซลล์ในตารางแผนที่
สำหรับ (var i = 0; i <this._rowcount; i ++) {
// สร้าง div และแผนที่ของแต่ละแถวจะถูกบันทึกไว้ใน div นี้
var divrow = utilityclass.createe ("div", "", "", mapBorder);
// สร้างอาร์เรย์อื่นในอาร์เรย์หนึ่งมิติ
this._battlefield [i] = [];
สำหรับ (var j = 0; j <this._colcount; j ++) {
// อ่านข้อมูลแผนที่ค่าเริ่มต้น: 0
var v = (แผนที่ [i] && แผนที่ [i] .charat (j)) || 0;
// แทรกองค์ประกอบ span องค์ประกอบ span เป็นหน่วยแผนที่
var spancol = utilityclass.createe ("Span", "", "", Divrow);
spancol.className = arraycss [v];
// ใส่วัตถุแผนที่ลงในอาร์เรย์สองมิติเพื่อการตรวจจับการชนที่ง่ายขึ้น
var to = null;
สวิตช์ (v) {
case enummapcelltype.empty:
ถึง = new EmptyB ();
หยุดพัก;
case enummapcelltype.wall:
ถึง = new Wallb ();
หยุดพัก;
case enummapcelltype.steel:
ถึง = ใหม่ SteelB ();
หยุดพัก;
case enummapcelltype.tod:
ถึง = ใหม่ todb ();
หยุดพัก;
case enummapcelltype.river:
ถึง = New Riverb ();
หยุดพัก;
case enummapcelltype.podium:
ถึง = ใหม่แท่น ();
หยุดพัก;
ค่าเริ่มต้น:
โยนข้อผิดพลาดใหม่ ("หมายเลขแผนที่ข้ามขอบเขต!");
หยุดพัก;
-
to.ui = Spancol;
// j นี่คือ x เนื่องจากลูปภายในเป็นแนวนอนและ x เป็นแกนแนวนอน
to.xposition = j;
to.yposition = i;
// บันทึกวัตถุแผนที่ปัจจุบันลงในอาร์เรย์สองมิติ OBJ เป็นวัตถุอุปสรรคและผู้ครอบครองเป็นวัตถุอาชีพ
this._battlefield [i] [j] = {obj: to, asser: null, lock: false};
} // สิ้นสุดสำหรับ
} // สิ้นสุดสำหรับ
// ใส่ในตัวแปรโกลบอลหน้าต่าง
window.battlefield = this._battlefield;
-
ตกลงแผนที่ของเราทำที่นี่ ความคิดเห็นที่นี่มีรายละเอียดมากอยู่แล้ว หากคุณยังไม่เข้าใจให้ดาวน์โหลดซอร์สโค้ดและแก้ไขข้อบกพร่องด้วยตัวคุณเอง มันจะเข้าใจง่าย
ที่นี่เราโหลดข้อมูลแผนที่เป็นหลักและแทรกแต่ละแผนที่เป็นองค์ประกอบ SPAN ลงในเอกสาร HTML และเก็บวัตถุแผนที่ไว้ในอาร์เรย์สองมิติ ในอนาคตเมื่อเราตรวจจับการชนกันเราสามารถดึงข้อมูลอาร์เรย์ที่เกี่ยวข้องโดยตรงผ่านพิกัดของวัตถุซึ่งสะดวกมาก
ซอร์สโค้ดที่แนบมา: http://xiazai.vevb.com/201411/yuanma/jstankedazhan(vevb.com).rar