تعليق: في المقالة السابقة ، قدمت كيفية استخدام HTML5 لتنفيذ خزان صغير للهاتف المحمول. في هذه المقالة ، سأقودك إلى حرب الخزان. الأصدقاء الذين يحبون HTML5 يجب ألا يفوتهم.
<pre> tank.html </pre> <pre> <! doctype html>
<html>
<head>
<meta charset = "utf-8"/>
</head>
<body onkeydown = "getCommand () ؛">
<H1> HMTL5 Classic Tank War </h1>
<!-ساحة معركة حرب الدبابة->
<Canvas> </tanvas>
<span> البيانات </span>
<!-قدم tankgames.js لهذه الصفحة->
<script type = "text/javaScript" src = "tank.js"> </script>
<script type = "text/javaScript">
// الحصول على قماش
var canvas1 = document.getElementById ("tankmap") ؛
// احصل على سياق الرسم (يمكنك فهمه كفرشاة)
var cxt = canvas1.getContext ("2d") ؛
// بطل الدبابة الخاص بي
//اتجاه
var Hero = New Hero (140،140،0 ، Herocolor) ؛
// تحديد رصاصة فارغة
var herobullet = null ؛
// حدد خزان العدو (كم عدد خزانات العدو الموجودة؟ هل هو تعريف واحد أم يتم وضعه في صفيف؟)
var reemtanks = new array () ؛
// يموت أولاً ثم نعيش ، ثم حدد 3 ، وبعد ذلك سنقوم بتقديم متغيرات لعدد خزانات العدو.
// 0-> العلوي ، 1-> يمين ، 2-> أسفل 3-> اليسار
لـ (var i = 0 ؛ i <3 ؛ i ++) {
// إنشاء خزان
var reemtank = new reemytank ((i+1)*50،0،2 ، enmeycolor) ؛
// ضع هذا الخزان في صفيف
العدو [i] = العدو ؛
}
// نسميها مرة واحدة
flashtankmap () ؛
// كتابة وظيفة خاصة لتحديث منطقة القتال الخاصة بنا بانتظام وتضمين عناصر لتظهر في منطقة القتال (الدبابات الخاصة ، دبابات العدو ، الرصاص ، القنابل ،
//obstructions...)-> الفكر
وظيفة flashtankmap () {
// تنظيف قماش
cxt.clearrect (0،0،400،300) ؛
// خزانتي
Drawtank (Hero) ؛
// ارسم الرصاصة الخاصة بك
// كيف يظهر تأثير رحلة الرصاص؟ [الإجابة: أولاً وقبل كل شيء ، يجب أن نحقق منطقة القتال في كل وقت معين (setInterval). إذا تغيرت إحداثيات الرصاصة عند الانتعاش ، فإن إحداثيات الرصاصة تمنح الناس شعورًا بأن الرصاصة تطير!]
drawherobullet () ؛
// دبابة العدو
// ارسم جميع دبابات العدو
لـ (var i = 0 ؛ i <3 ؛ i ++) {
DrawTank (العدو [i]) ؛
}
}
// هذه وظيفة تقبل ضربات مفاتيح المستخدم
وظيفة getCommand () {
// كيف أعرف ما هو المفتاح الذي يضغط عليه اللاعب
// التعليمات: كائن الحدث -------> وظيفة معالج الأحداث ()
var code = event.keycode ؛ // ascii code for the letters-> دعنا نلقي نظرة على جدول الكود
التبديل (رمز) {
الحالة 87: // على
Hero.moveup () ؛
استراحة؛
الحالة 68:
Hero.Foveright () ؛
استراحة؛
الحالة 83:
Hero.movedown () ؛
استراحة؛
الحالة 65:
Hero.moveleft () ؛
استراحة؛
الحالة 74:
Hero.shotenemy () ؛
استراحة؛
}
// Trigger هذه الوظيفة flashtankmap () ؛
flashtankmap () ؛
// إعادة طلاء جميع دبابات العدو. يمكنك كتابة التعليمات البرمجية هنا (فكر ، دعنا فقط لدينا وظيفة مخصصة لتحديث قماشنا بانتظام [منطقة الحرب])
}
// قم بتحديث منطقة القتال كل 100 ميلي ثانية
Window.setInterval ("FlashTankMap ()" ، 100) ؛
</script>
</body>
</html> </pre>
tank.js
<pre> </pre>
<pre> <pre> // لراحة البرمجة ، نحدد صفيفتين ملونتين
var herocolor = new array ("#ba9658" ، "#fef26e") ؛
var enMeyColor = new Array ("#00a2b5" ، "#00fefe") ؛
// توسيع دبابات العدو الأخرى هنا جيد جدًا.
// الرصاص
وظيفة الرصاصة (x ، y ، مباشرة ، السرعة) {
this.x = x ؛
this.y = y ؛
this.direct = direct ؛
this.peed = السرعة ؛
this.timer = null ؛
this.islive = true ؛
this.run = وظيفة التشغيل () {
// عندما يتم عرض إحداثيات هذه الرصاصة ، نحدد أولاً ما إذا كانت الرصاصة قد وصلت إلى الحدود
if (this.x <= 0 || this.x> = 400 || this.y <= 0 || this.y> = 300) {
// الرصاص تحتاج إلى التوقف.
window.clearinterval (this.timer) ؛
// توفي الرصاصة
this.islive = false ؛
}آخر{
// يمكن استخدام هذا لتعديل الإحداثيات
التبديل (this.direct) {
الحالة 0:
this.y- = this.peed ؛
استراحة؛
الحالة 1:
this.x+= this.peed ؛
استراحة؛
الحالة 2:
this.y+= this.peed ؛
استراحة؛
الحالة 3:
this.x- = this.peed ؛
استراحة؛
}
}
document.getElementById ("aa"). innertext = "bullet x ="+this.x+"bullet y ="+this.y ؛
}
}
// هذا فئة دبابات
دالة الخزان (x ، y ، مباشرة ، اللون) {
this.x = x ؛
this.y = y ؛
this.peed = 1 ؛
this.direct = direct ؛
// يتطلب الخزان لونين.
this.color = اللون ؛
// تحرك
this.moveup = function () {
this.y- = this.peed ؛
this.direct = 0 ؛
}
//إلى اليمين
this.foveright = function () {
this.x+= this.peed ؛
this.direct = 1 ؛
}
// تحرك لأسفل
this.movedown = function () {
this.y+= this.peed ؛
this.direct = 2 ؛
}
//غادر
this.moveleft = function () {
this.x- = this.peed ؛
this.direct = 3 ؛
}
}
// تحديد فئة البطل
// X يمثل الإحداثي الأفقي للخزان ، يمثل Y الإحداثي العمودي ، والاتجاه المباشر
وظيفة البطل (x ، y ، مباشرة ، اللون) {
// الغرض من الجملتين التاليتين هو تحقيق تأثير الميراث من خلال انتحال شخصية الأشياء
this.tank = tank ؛
this.tank (x ، y ، direct ، color) ؛
// إضافة وظيفة لتصوير دبابات العدو.
this.shotenemy = function () {
// إنشاء رصاصة ، يجب أن يكون موقف الرصاصة مرتبطًا بالبطل واتجاه البطل ... !!!
//this.x هو الإحداثي الأفقي للبطل الحالي. هنا سنقوم ببساطة بمعالجة (صقل)
التبديل (this.direct) {
الحالة 0:
herobullet = رصاصة جديدة (this.x+9 ، this.y ، this.direct ، 1) ؛
استراحة؛
الحالة 1:
Herobullet = new bullet (this.x+30 ، this.y+9 ، this.direct ، 1) ؛
استراحة؛
الحالة 2:
Herobullet = new bullet (this.x+9 ، this.y+30 ، this.direct ، 1) ؛
استراحة؛
الحالة 3: // الحق
Herobullet = رصاصة جديدة (this.x ، this.y+9 ، this.direct ، 1) ؛
استراحة؛
}
// استدعاء Bullet Run ، 50 هو استنتاج تم الحصول عليه من خلال الاختبارات المتعددة للمعلم.
var timer = window.setInterval ("herobullet.run ()" ، 50) ؛
// تعيين هذا المؤقت لهذه الرصاصة (كائن JS هو مرجع مرجع!)
herobullet.timer = timer ؛
}
}
// تحديد فئة العدو
وظيفة العدو (x ، y ، مباشرة ، اللون) {
// ترث الخزان عن طريق انتحال شخصية كائن
this.tank = tank ؛
this.tank (x ، y ، direct ، color) ؛
}
// ارسم رصاصتك الخاصة وقل شيئًا آخر ، يمكنك أيضًا تغليف الوظيفة في فئة البطل
وظيفة drawherobullet () {
// هنا ، أضفنا جملة ، لكن عليك أن تعرف أن الإضافة هنا تتطلب منك التأكد من البرنامج بأكمله
if (herobullet! = null && herobullet.islive) {
cxt.fillStyle = "#fef26e" ؛
cxt.fillRect (herobullet.x ، herobullet.y ، 2،2) ؛
}
}
// ارسم الخزان
وظيفة DrawTank (Tank) {
// النظر في الاتجاه
التبديل (tank.direct) {
الحالة 0: // ON
الحالة 2: // لأسفل
// ارسم الخزان الخاص بك واستخدم تقنية الرسم السابقة
// اضبط اللون
cxt.fillStyle = tank.color [0] ؛
// يستخدم المعلم هان الموت أولاً --- ثم يعيش (من الأفضل للمبتدئين)
// ارسم المستطيل على اليسار أولاً
cxt.fillRect (tank.x ، tank.y ، 5،30) ؛
// ارسم المستطيل على اليمين (يرجى التفكير في الأمر في هذا الوقت -> تأكد من وجود نقطة مرجعية)
cxt.fillRect (tank.x+15 ، tank.y ، 5،30) ؛
// ارسم المستطيل الأوسط
cxt.fillRect (tank.x+6 ، tank.y+5،8،20) ؛
// ارسم غطاء الخزان
cxt.fillStyle = tank.color [1] ؛
cxt.arc (tank.x+10 ، tank.y+15،4،0،360 ، true) ؛
cxt.fill () ؛
// ارسم المدفع (خط مستقيم)
cxt.strokestyle = tank.color [1] ؛
// اضبط عرض الخط
cxt.linewidth = 1.5 ؛
cxt.beginpath () ؛
cxt.moveto (tank.x+10 ، tank.y+15) ؛
if (tank.direct == 0) {
cxt.lineto (tank.x+10 ، tank.y) ؛
} آخر إذا (tank.direct == 2) {
cxt.lineto (tank.x+10 ، tank.y+30) ؛
}
cxt.closepath () ؛
cxt.stroke () ؛
استراحة؛
الحالة 1: // اليمين واليسار
الحالة 3:
// ارسم الخزان الخاص بك واستخدم تقنية الرسم السابقة
// اضبط اللون
cxt.fillStyle = tank.color [0] ؛
// يستخدم المعلم هان الموت أولاً --- ثم يعيش (من الأفضل للمبتدئين)
// ارسم المستطيل على اليسار أولاً
cxt.fillRect (tank.x ، tank.y ، 30،5) ؛
// ارسم المستطيل على اليمين (يرجى التفكير في الأمر في هذا الوقت -> تأكد من وجود نقطة مرجعية)
cxt.fillRect (tank.x ، tank.y+15،30،5) ؛
// ارسم المستطيل الأوسط
cxt.fillRect (tank.x+5 ، tank.y+6،20،8) ؛
// ارسم غطاء الخزان
cxt.fillStyle = tank.color [1] ؛
cxt.arc (tank.x+15 ، tank.y+10،4،0،360 ، true) ؛
cxt.fill () ؛
// ارسم المدفع (خط مستقيم)
cxt.strokestyle = tank.color [1] ؛
// اضبط عرض الخط
cxt.linewidth = 1.5 ؛
cxt.beginpath () ؛
cxt.moveto (tank.x+15 ، tank.y+10) ؛
//إلى اليمين
if (tank.direct == 1) {
cxt.lineto (tank.x+30 ، tank.y+10) ؛
} آخر إذا (tank.direct == 3) {// إلى اليسار
cxt.lineto (tank.x ، tank.y+10) ؛
}
cxt.closepath () ؛
cxt.stroke () ؛
استراحة؛
}
}
</pre>
<pre> </pre>
</pre>