1. لخص النقاط الرئيسية والمشاكل التي تمت مواجهتها
1. الميراث في JavaScript ، من الأفضل أن توفر فئة الوالدين مشاركة الأساليب فقط وتتم كتابة السمات إلى فئاتهم الفرعية لتجنب تشويش منشئي الفئة الأم والفئة الفرعية.
2. النموذج الأولي يحاكي الكود الموروثة ويجب كتابته قبل جميع تعريفات الطريقة.
نسخة الكود كما يلي:
Hero.prototype = دبابة جديدة (0 ، 0 ، 0) ؛
Hero.prototype.constructor = Hero ؛
Hero.prototype.addlife = function () {
this.lifetimes ++ ؛
document.queryselector ("#life"). innerhtml = hero.lifetimes ؛
}
3. عندما يرسم القماش ، باستثناء المستطيلات ، يجب إضافة كل شيء آخر مع CTX.BeginPath () ؛
4. يمكن أن تندمج وظيفة Concat ، أو إرجاع عنصر إلى صفيف جديد
5. سيتم تحميل الصورة بعد تعيين سمة SRC ، ولكن إذا لم يتم تحميل الصورة ، فسوف تسبب الفشل ، لذلك استخدم حدث ONLOAD للتعامل معه.
6. قم بتوسيع وظيفة الصفيف وحذف العنصر المحدد
نسخة الكود كما يلي:
// تمتد لحذف العنصر المحدد
Array.Prototype.DeleteElement = Function (OBJ) {
إذا (obj) {
لـ (var i = 0 ؛ i <this.length ؛ i ++) {
إذا (هذا [i] === OBJ) {
this.splice (i ، 1) ؛
}
}
}
}
7. إعدادات المؤقت ، يمكن أن تكون المعلمة الأولى من طريقة SetInterval ("المرح" ، 1000) سلسلة ، مثل "Hero.say () ، على غرار Eval ، تنفذ هذه السلسلة من الكود ، بحيث يمكنها إعطاء ملف وظيفة المعلمة العلوية وتحدد أيضًا سياق تشغيل هذه الوظيفة. ولكن إذا كان التمرير في مقبض للدالة ، فلا يمكن أن يستغرق الأمر معلمات ولا يمكن تحديد السياق.
نسخة الكود كما يلي:
// مؤقت ، ممارسة بنفسك
this.timer = setInterval ((الدالة (السياق) {
وظيفة الإرجاع () {
bullet.prototype.move.call (السياق)
}
}) (هذا) ، 30) ؛
لقد قمت بحفظ بيئة التنفيذ الحالية ودعت طريقة الاتصال لتنفيذها يدويًا.
8. يجب أن يتضمن التصميم الوظيفي للطريقة ، بالإضافة إلى الوظائف ، اكتشافًا مشروطًا لهذه الوظيفة ، مثل MOVE ، والتي يجب أن تتضمن في ظل الظروف التي يمكن نقلها وأينما لم تتمكن من التحرك. لا ينبغي وضع هذا الكشف خارجيًا.
9. عند كتابة التعليمات البرمجية ، يجب ألا تفكر في التصميم أو التحسين. كن واضحًا في التفكير ، لا تشوش ، وتركز على شيء واحد.
10. JavaScript ليس لديه وظيفة نوم ، يمكنك إنشاء متغير كمخزن مؤقت لتحقيق الغرض من تنفيذ الفاصل الزمني
2. تنفيذ الكود
1. ينقسم هذا البرنامج إلى bomb.js ، bullet.js ، draw.js ، tank.js ، index.html ، img ، music ،
2. التأثير النهائي
3. الكود
1.index.html
نسخة الكود كما يلي:
<! doctype html>
<html>
<head>
<title> </title>
<meta charset = "utf-8">
<type type = "text/css">
جسم {
الخط: 14px "Sans-Serif"
}
#map {
خلفية اللون: #000000 ؛
}
.يعرض {
تعويم: اليسار
}
#مرشد {
تعويم: اليسار.
العرض: 200 بكسل ؛
الارتفاع: 390 بكسل ؛
الهامش اليساري: 5px ؛
الخلفية: #CCCCCC ؛
الحشو: 5 بكسل ؛
}
</style>
<script type = "text/javaScript" src = "tank.js"> </script>
<script type = "text/javaScript" src = "bullet.js"> </script>
<script type = "text/javaScript" src = "bomb.js"> </script>
<script type = "text/javaScript" src = "draw.js"> </script>
<script type = "text/javaScript">
window.onload = function () {
// معلومات قماش
العرض = document.getElementById ('map'). العرض ؛
الارتفاع = document.getElementById ('map'). الارتفاع ؛
ctx = document.getElementById ('map'). getContext ('2d') ؛
// الصفحة الأولية
var starimg = new image () ؛
starimg.src = "img/star.jpg" ؛
starimg.onload = function () {
ctx.drawimage (starimg ، 0 ، 0 ، العرض ، الارتفاع) ؛
}
// مراقبة لوحة المفاتيح والعودة لبدء اللعبة
document.body.onkeydown = function () {
var keycode = event.keycode ؛
التبديل (keycode) {
الحالة 13:
// معلمات التهيئة
init ()
// تحديث الصفحة
setInterval (Draw ، 30) ؛
Document.OnKeydown = GameControl ؛
استراحة؛
}
}
}
وظيفة init () {
// اللاعبين وأجهزة الكمبيوتر
Hero = New Hero (100 ، 300 ، 0) ؛
emyys = [] ؛
لـ (var i = 0 ؛ i <3 ؛ i ++) {
emys.push (عدو جديد (100 + i * 50 ، 0 ، 2)) ؛
}
// دمج صفيف
alltank = eMeys.concat (Hero) ؛
//قنبلة
القنابل = [] ؛
im = new image () ؛
IM2 = صورة جديدة () ؛
im3 = صورة جديدة () ؛
im.src = "img/bomb_3.gif" ؛
im2.src = "img/bomb_2.gif" ؛
im3.src = "img/bomb_1.gif" ؛
}
وظيفة gamecontrol () {
var keycode = event.keycode ؛
التبديل (keycode) {
الحالة 65:
Hero.moveleft () ؛
كسر ؛ // اليسار
الحالة 83:
Hero.movedown () ؛
كسر ؛ // التالي
الحالة 87:
Hero.moveup () ؛
كسر ؛ // على
الحالة 68:
Hero.Foveright () ؛
كسر ؛ // الحق
الحالة 74:
Hero.shot () ؛
استراحة؛
الحالة 49:
Hero.addlife ()
استراحة؛
}
}
// تمتد لحذف العنصر المحدد
Array.Prototype.DeleteElement = Function (OBJ) {
إذا (obj) {
لـ (var i = 0 ؛ i <this.length ؛ i ++) {
إذا (هذا [i] === OBJ) {
this.splice (i ، 1) ؛
}
}
}
}
</script>
</head>
<body>
<viv>
<canvas id = "map">
</canvas>
<Audio id = "music" autoplay = "autoplay">
<source src = "music/111.wav">
</audio>
</div>
<div id = "guide">
<p> اضغط على Enter لبدء اللعبة </p>
<p> اضغط 1 مفتاح لزيادة الحياة ، الافتراضي هو 1 </p>
<p> عدد الحياة المتبقية: <label id = "life"> 1 </billy> </p>
<div id = "data">
</div>
</div>
</body>
</html>
2.draw.js
نسخة الكود كما يلي:
/**
* تم إنشاؤه بواسطة Alane في 14-3-18.
*/
وظيفة draw () {
// اكتشاف حياة وموت الرصاص والدبابات
checkDead () ؛
// مسح القماش
CTX.ClearRect (0،0،500،400) ؛
// ارسم اللاعب
if (! hero.isdead) {
Drawtank (Hero) ؛
}آخر{
Hero.cutlife () ؛
}
// ارسم دبابات العدو
لـ (var i = 0 ؛ i <eemys.length ؛ i ++) {
DrawTank (eyemys [i]) ؛
}
// ارسم رصاصة العدو
لـ (var j = 0 ؛ j <eemys.length ؛ j ++) {
var temp = elemys [j] .bulletslist ؛
لـ (var i = 0 ؛ i <temp.length ؛ i ++) {
drawbullet (temp [i]) ؛
}
}
// ارسم رصاصة اللاعب
var temp = hero.bulletslist ؛
لـ (var i = 0 ؛ i <temp.length ؛ i ++) {
drawbullet (temp [i]) ؛
}
// ارسم القنبلة
لـ (var i = 0 ؛ i <bombs.length ؛ i ++) {
drawbown (القنابل [i]) ؛
}
}
وظيفة DrawTank (Tank) {
var x = tank.x ؛
var y = tank.y ؛
ctx.fillstyle = tank.color ؛
if (tank.direct == 0 || tank.direct == 2) {
ctx.fillRect (x ، y ، 5،30) ؛
ctx.fillRect (x+15 ، y ، 5،30) ؛
ctx.fillRect (x+6 ، y+8 ، 8،15) ؛
ctx.strokestyle = tank.color ؛
ctx.linewidth = '1.5' ؛
if (tank.direct == 0) {
ctx.beginpath () ؛
ctx.moveto (x+10 ، y-2) ؛
ctx.lineto (x+10 ، y+8) ؛
ctx.closepath () ؛
}آخر{
ctx.beginpath () ؛
ctx.moveto (x+10 ، y+24) ؛
ctx.lineto (x+10 ، y+32) ؛
ctx.closepath () ؛
}
CTX.Stroke () ؛
}آخر{
ctx.fillRect (x ، y ، 30،5) ؛
ctx.fillRect (x ، y+15 ، 30،5) ؛
ctx.fillRect (x+8 ، y+6 ، 15،8) ؛
ctx.strokestyle = '#ff0000' ؛
ctx.linewidth = '1.5' ؛
if (tank.direct == 3) {
ctx.beginpath () ؛
ctx.moveto (x-2 ، y+10) ؛
ctx.lineto (x+8 ، y+10) ؛
ctx.closepath () ؛
}آخر{
ctx.beginpath () ؛
ctx.moveto (x+24 ، y+10) ؛
ctx.lineto (x+32 ، y+10) ؛
ctx.closepath () ؛
}
CTX.Stroke () ؛
}
}
وظيفة DrawBullet (رصاصة) {
ctx.fillstyle = bullet.color ؛
ctx.beginpath () ؛
CTX.ARC (bullet.x ، bullet.y ، 2،360 ، true) ؛
ctx.closepath () ؛
ctx.fill () ؛
}
وظيفة drawbown (obj) {
if (obj.life> 8) {
ctx.drawimage (im ، obj.x ، obj.y ، 50،50) ؛
} آخر إذا (obj.life> 4) {
CTX.DrawImage (IM2 ، OBJ.X ، OBJ.Y ، 50،50) ؛
}آخر{
CTX.DrawImage (IM3 ، OBJ.X ، OBJ.Y ، 50،50) ؛
}
obj.lifedown () ؛
if (obj.life <= 0) {
Bombs.DeleteElement (OBJ) ؛
}
}
وظيفة checkDead () {
// اكتشاف حياة وموت رصاصة العدو
لـ (var j = 0 ؛ j <eemys.length ؛ j ++) {
var temp = elemys [j] .bulletslist ؛
لـ (var i = 0 ؛ i <temp.length ؛ i ++) {
var o = temp [i] ؛
if (o.isdead) {
Temp.DeleteElement (O) ؛
}
}
}
// اكتشاف حياة الرصاص والموت
var temp = hero.bulletslist ؛
لـ (var i = 0 ؛ i <temp.length ؛ i ++) {
var o = temp [i] ؛
if (o.isdead) {
Temp.DeleteElement (O) ؛
}
}
// اكتشاف حياة وموت دبابة العدو
لـ (var i = 0 ؛ i <eemys.length ؛ i ++) {
var o = elemys [i] ؛
if (o.isdead) {
emys.deleteElement (O) ؛
}
}
}
قنبلة
نسخة الكود كما يلي:
/**
* تم إنشاؤه بواسطة Alane في 14-3-18.
*/
وظيفة قنبلة (x ، y) {
this.life = 12 ؛
this.x = x ؛
this.y = y ؛
}
bomb.prototype.lifedown = function () {
this.life-- ؛
}
tank.js
نسخة الكود كما يلي:
/**
* تم إنشاؤه بواسطة Alane في 14-3-7.
*/
/**
* مباشرة 0 على
* 1 الحق
* 2
* 3 اليسار
* param x
* param y
* Param Direct
* constructor
*/
// ************************************************ ****************************************************** ****************************************************** ****************************************************** ****************************************************** ****************************************************** ****************************************************** *************************** *************************** ************************/
// دبابة فئة الوالدين
دالة الخزان (x ، y ، مباشرة) {
this.peed = 2 ؛
}
tank.prototype.moveup = function () {
// اكتشاف الحدود
if (this.y <0) {
// تغيير الاتجاه
this.Changedirect () ؛
يعود؛
}
this.y -= this.peed ؛
this.direct = 0 ؛
}
tank.prototype.movedown = function () {
إذا (this.y> الارتفاع - 30) {
this.Changedirect () ؛
يعود؛
}
this.y += this.peed ؛
this.direct = 2 ؛
}
tank.prototype.moveleft = function () {
if (this.x <0) {
this.Changedirect () ؛
يعود؛
}
this.x -= this.peed ؛
this.direct = 3 ؛
}
tank.prototype.foveright = function () {
if (this.x> width - 30) {
this.Changedirect () ؛
يعود؛
}
this.x += this.peed ؛
this.direct = 1 ؛
}
// تغيير الاتجاه
tank.prototype.Changedirect = function () {
بينما (صحيح) {
var temp = Math.Round (Math.Random () * 3) ؛
إذا (this.direct! = temp) {
this.direct = temp ؛
استراحة؛
}
}
//alert("x="+ this.x+ "y ="+this.y+"direct ="+this.direct)
}
// الرصاص الرصاصة
tank.prototype.shot = function () {
if (this.isdead) {
يعود؛
}
if (this.bulletslist.length <this.maxbulletsize) {
// إنشاء رصاصة جديدة
VAR BULLET = NULL ؛
التبديل (this.direct) {
الحالة 0:
رصاصة = رصاصة جديدة (this.x + 10 ، this.y - 2 ، 0 ، this.color) ؛
استراحة؛
الحالة 1:
رصاصة = رصاصة جديدة (this.x + 32 ، this.y + 10 ، 1 ، this.color) ؛
استراحة؛
الحالة 2:
رصاصة = رصاصة جديدة (this.x + 10 ، this.y + 32 ، 2 ، this.color) ؛
استراحة؛
الحالة 3:
رصاصة = رصاصة جديدة (this.x - 2 ، this.y + 10 ، 3 ، this.color) ؛
استراحة؛
}
// وضعت في المجلة
this.bulletslist.push (bullet) ؛
}
}
// ************************************************ ****************************************************** ****************************************************** ****************************************************** ****************************************************** ****************************************************** ****************************************************** *************************** *************************** ************************/
// لاعب
وظيفة Hero (x ، y ، direct) {
this.lifetimes = 5 ؛
this.isdead = false ؛
this.color = '#ff0000' ؛
this.x = x ؛
this.y = y ؛
this.direct = direct ؛
this.bulletslist = [] ؛
this.maxbulletsize = 10 ؛
this.newlife = null ؛
}
Hero.prototype = دبابة جديدة (0 ، 0 ، 0) ؛
Hero.prototype.constructor = Hero ؛
Hero.prototype.addlife = function () {
this.lifetimes ++ ؛
document.queryselector ("#life"). innerhtml = hero.lifetimes ؛
}
Hero.prototype.cutlife = function () {
if (this.lifetimes> = 1 &&! this.newlife) {
this.lifetimes-- ؛
this.newLife = setTimeout ("Hero.newLife ()" ، 2000) ؛
}
}
Hero.prototype.newlife = function () {
this.isdead = false ؛
ClearTimeout (Hero.newLife) ؛
Hero.NewLife = null ؛
document.queryselector ("#life"). innerhtml = hero.lifetimes ؛
}
// ************************************************ ****************************************************** ****************************************************** ****************************************************** ****************************************************** ****************************************************** ****************************************************** *************************** *************************** ************************/
// دبابة العدو
وظيفة العدو (x ، y ، مباشرة) {
this.isdead = false ؛
this.color = 'Blue' ؛
this.x = x ؛
this.y = y ؛
this.direct = direct ؛
this.bulletslist = [] ؛
this.maxbulletsize = 1 ؛
// مؤقت ، الحركة التلقائية
this.timer1 = setInterval ((الدالة (السياق) {
وظيفة الإرجاع () {
//يتحرك
reemy.prototype.move.call (السياق) ؛
}
}) (هذا) ، 30) ؛
// مؤقت ، إطلاق النار
this.timer2 = setInterval ((الدالة (السياق) {
وظيفة الإرجاع () {
//إطلاق نار
tank.prototype.shot.call (السياق) ؛
}
}) (هذا) ، 2000) ؛
// مؤقت ، تغيير الاتجاه
this.timer3 = setInterval ((الدالة (السياق) {
وظيفة الإرجاع () {
//إطلاق نار
tank.prototype.Changedirect.Call (السياق) ؛
}
}) (هذا) ، 3000) ؛
}
العدو. النموذج = دبابة جديدة (0 ، 0 ، 0) ؛
reemy.prototype.constructor = العدو ؛
reemy.prototype.move = function () {
التبديل (this.direct) {
الحالة 0:
this.moveup () ؛
استراحة؛
الحالة 1:
هذا.
استراحة؛
الحالة 2:
this.movedown () ؛
استراحة؛
الحالة 3:
this.moveleft () ؛
استراحة؛
}
}
Bullet.JS
نسخة الكود كما يلي:
/**
* تم إنشاؤه بواسطة Alane في 14-3-11.
*/
وظيفة Bullet (x ، y ، direct ، color) {
this.isdead = false ؛
this.x = x ؛
this.y = y ؛
this.direct = direct ؛
this.peed = 4 ؛
this.color = اللون ؛
// مؤقت ، ممارسة بنفسك
this.timer = setInterval ((الدالة (السياق) {
وظيفة الإرجاع () {
bullet.prototype.move.call (السياق)
}
}) (هذا) ، 30) ؛
}
bullet.prototype.move = function () {
التبديل (this.direct) {
الحالة 0:
this.y -= this.peed ؛
استراحة؛
الحالة 1:
this.x += this.peed ؛
استراحة؛
الحالة 2:
this.y += this.peed ؛
استراحة؛
الحالة 3:
this.x -= this.peed ؛
استراحة؛
}
// اكتشاف الحدود
if (this.y <0 || this.x> width || this.y> height || this.x <0) {
ClearInterval (this.timer) ؛
this.isdead = true ؛
}
// اكتشاف الاصطدام يكتشف دبابات العدو
لـ (var i = 0 ؛ i <alltank.length ؛ i ++) {
var temp = alltank [i] ؛
if (temp.isdead) {
يكمل؛
}
التبديل (temp.direct) {
الحالة 0:
الحالة 2: if (this.x> temp.x && this.x <temp.x+20 && this.y> temp.y && this.y <temp.y+30) {
if (this.color == temp.color) {
استراحة؛
}
bombs.push (قنبلة جديدة (temp.x-10 ، temp.y-10)) ؛
ClearInterval (this.timer) ؛
this.isdead = true ؛
temp.isdead = صحيح ؛
}استراحة
الحالة 1:
الحالة 3: if (this.x> temp.x && this.x <temp.x+30 && this.y> temp.y && this.y <temp.y+20) {
if (this.color == temp.color) {
استراحة؛
}
bombs.push (قنبلة جديدة (temp.x-10 ، temp.y-10)) ؛
ClearInterval (this.timer) ؛
this.isdead = true ؛
temp.isdead = صحيح ؛
}استراحة؛
}
}
}
تنزيل رمز المصدر