2. تحسين الخريطة
تحتوي خريطةنا على عقبات مثل المساحة المفتوحة والجدران والصلب والعشب والمياه والمقر ، وما إلى ذلك. يمكننا تصميم كل هذه الأشياء ككائنات.
2.1 إنشاء مجموعة من كائنات العقبة
مجموعة الكائنات تنقذ الكائنات على خرائط مختلفة. نحن نستخدم خصائص الكائن لتحديد ما إذا كان يمكن تمرير الكائن أو الهجوم.
Barrier.JS:
نسخة الكود كما يلي:
// كائن فئة قاعدة العقبات ، الموروثة من TankObject
Barrier = function () {
this.defenval = 1 ؛ // الدفاع
this.canbeattacked = true ؛ // هل من الممكن أن تتعرض للهجوم
}
barrier.prototype = جديد TankObject () ؛
// حائط
wallb = function () {}
Wallb.Prototype = New Barrier () ؛
// أرض فارغة
فارغة = function () {
this.canacross = صحيح ؛ // يمكن عبورها
}
فارغة
// نهر
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 = صحيح ؛
}
Todb.Prototype = New Barrier () ؛
// المقر
podiumb = function () {
this.defenval = 5 ؛
}
podiumb.prototype = New Barrier () ؛
2.2 كتابة البيانات على الخريطة.
أضف الكود التالي في المشترك. js:
نسخة الكود كما يلي:
// تعداد أنواع عناصر الخريطة
/*
0: أرض فارغة
1: الجدار
2: الصلب
3: بساتين
4: النهر
5: المقر الرئيسي
*/
var enummapcelltype = {
فارغة: "0"
، الجدار: "1"
، الصلب: "2"
، تود: "3"
، نهر: "4"
، المنصة: "5"
} ؛
// اسم النمط المقابل لكل تضاريس
var arraycss = ['fmare' ، 'Wall' ، 'Steel' ، 'Tod' ، 'River' ، 'Podium'] ؛
// خريطة المستوى
/*مستوى*/
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' ؛
// خرائط مستوى التخزين 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 = [] ؛ // تخزين مجموعة ثنائية الأبعاد من كائنات الخريطة
}
// طريقة تحميل خريطة
تحميل: function () {
// تهيئة الخريطة وفقًا للمستوى
var map = top_maplevel [this._level - 1] .Split ("،") ؛
var mapborder = usilyclass.createe ("div" ، "" ، "mapborder" ، this._mapcontainer) ؛
// السفر عبر كل خلية في جدول الخريطة
لـ (var i = 0 ؛ i <this._rowcount ؛ i ++) {
// إنشاء div ، ويتم حفظ خريطة كل صف في هذا div
var diprow = usilyclass.createe ("div" ، "" ، "" ، mapborder) ؛
// إنشاء صفيف آخر في صفيف أحادي البعد
this._battlefield [i] = [] ؛
لـ (var j = 0 ؛ j <this._colcount ؛ j ++) {
// قراءة بيانات الخريطة ، القيمة الافتراضية: 0
var v = (map [i] && map [i] .charat (j)) || 0 ؛
// أدخل عنصر Span ، عنصر Span هو وحدة خريطة
var spancol = usilyclass.createe ("span" ، "" ، "" ، diprow) ؛
spancol.className = arraycss [v] ؛
// ضع كائنات الخريطة في صفيف ثنائي الأبعاد لاكتشاف التصادم الأسهل.
var to = null ؛
التبديل (V) {
حالة enummapcelltype.empty:
إلى = جديد فارغة () ؛
استراحة؛
حالة enummapcelltype.wall:
إلى = جديد wallb () ؛
استراحة؛
حالة enummapcelltype.steel:
إلى = New SteelB () ؛
استراحة؛
حالة enummapcelltype.tod:
إلى = New Todb () ؛
استراحة؛
حالة enummapcelltype.river:
إلى = New Riverb () ؛
استراحة؛
حالة enummapcelltype.podium:
إلى = new podiumb () ؛
استراحة؛
تقصير:
رمي خطأ جديد ("أرقام الخريطة تعبر الحدود!") ؛
استراحة؛
}
to.ui = spancol ؛
// j هنا x ، لأن الحلقة الداخلية أفقية و x هي المحور الأفقي.
to.xposition = j ؛
to.yposition = i ؛
// احفظ كائن الخريطة الحالي في صفيف ثنائي الأبعاد OBJ ككائن عقبة ، ومحتل ككائن احتلال
this._battlefield [i] [j] = {obj: to ، sevent: null ، lock: false} ؛
} // نهاية ل
} // end for
// وضعت في المتغيرات العالمية للنافذة
window.battlefield = this._battlefield ؛
}
حسنًا ، خريطتنا تتم هنا. التعليقات هنا بالفعل مفصلة للغاية. إذا كنت لا تزال لا تفهم ، فقم بتنزيل رمز المصدر وتصحيحه بنفسك. سيكون من السهل الفهم.
هنا نقوم بشكل رئيسي بتحميل بيانات الخريطة وإدخال كل خريطة كعنصر تمتد في مستند HTML. وتخزين كائنات الخريطة في صفيف ثنائي الأبعاد. في المستقبل ، عندما نقوم بالكشف عن التصادم ، يمكننا استرداد كائن الصفيف المقابل مباشرة من خلال إحداثيات الكائن ، وهو مريح للغاية.
رمز المصدر المرفق: http://xiazai.vevb.com/201411/yuanma/jstankedazhan(vevb.com).rar