كتيب flixel

Fuad Prince العربي )مسودة الكتاب( Flixelمشروع كتاب

1

Flixelالقسم األول: مقدمة عن مكتبة

:Flixelما هو

Flixel ألعاب الـ عبارة عن مكتبة برمجية مفتوحة المصدر لصناعةFlash وهي مجانية تمامًا لإلستخدام ,

ومصممة لتستخدم مع أدوات تطوير البرمجيات ActionScript 3الشخصي أو التجاري, مكتوبة بالكامل بلغة

ة التعلم والتوسع والتطوير.المجانية. وهي سهل


2

:Flixelفلسفة

الالزمة لتطوير األلعاب ويوجد ثالث صفوف جوهريه (as)ملفات عبارة عن عدد من الصفوف Flixelمكتبة

FlxGame ,FlxG ,FlxU: وهي ضمنها

FlxGame:

ور األساسية. وهو , وهو يحوي مجموعة من الحلقات التكرارية واألمFlixelهذا الصف هو قلب جميع ألعاب

ملف كبير وواسع ويفضل أن ال تشغل بالك كثيرًا به! مهمته الرئيسية هي انشاء أغراض لعبتك, وبعدها

يحويان جميع األمور التي ستحتاجها فعاًل. FlxStateو FlxGالصفين

FlxG, FlxU:

والمدخالت والمعلومات األساسية هذان الصفان يعتبران الجزء المساعد الشامل الغني بالدوال المفيدة لألصوات

ونظام الكاميرا ضمن األغراض األخرى, كما يحوي أدوات خاصة للدوال الرياضية واأللوان, واألمور الموجودة مقسمة

من أجل تخصيص أماكن الدوال فقط. FlxUو FlxGإلى صفين

حيث أن كل حالة ضمن FlxStateهو الذي يبدأ بتشغيل اللعبة اعتمادًا على الحاالت FlxGameإن الصف

اللعبة تعتبر كمرحلة من مراحل اللعب, مثاًل يمكننا جعل الحالة األولى القائمة الرئيسية للعبة, والحالة الثانية

المرحلة األولى في اللعب, والحالة الثالثة شاشة نهاية اللعبة.


3

من شخصية بطل اللعبة إلى األعداء... وهي العناصر المتحركة FlxSpriteإن ملفات الحالة غالبًا تحوي ملفات

.Flixelتلك كانت لمحة بسيطة عن المكونات األساسية لمكتبة

وهذه الدالة موجودة Updateولكن ومثل جميع محركات األلعاب, الدالة األهم هي دالة حلقة اللعبة التكرارية

.نطق اللعبةلة هي التي ستحوي كل موهذه الدا FlxStateو FlxSpriteضمن الصفين


4

:Flixelاألدوات الالزمة إلنشاء ألعاب

مثل برنامج ActionScript3خاص بلغة IDEأنت بحاجة لبرنامج Flixelللتعامل مع مكتبة

FlashDevelop كما تحتاج إلى بيئةFlex SDK منAdobe ة تحوي المكتبات القياسية ئوهذه البي

.ActionScript3التي يحتاجها البرنامج لترجمة أوامر

الرئيسية: البرامج واألدواتكيفية تحميل وتثبيت

)بما أن األدوات التي سنقوم بتحميلها مفتوحة المصدر فيفضل دائمًا اختيار آخر اصدار(

:FlashDevelopأواًل تحميل

FlashDevelopعن Googleابدأ البحث في

:لتفتح لك الصفحة التالية جثم اختر النتيجة األولى حيث أنها الموقع الرسمي للبرنام


5

األخضر وهذا الزر قد ينقلك إلى المنتدى الرسمي الخاص Downloadوبعدها انقر على زر التحميل

:باصدارات البرنامج

ابحث عن رابط التحميل, وهو عادة يكون في نهاية الصفحة, ثم ابدأ عملية التحميل.


6

:Adobe Flex SDKتحميل ثانيًا

: Flex SDKعن Googleفي ابدأ البحث

:وهو عادة يكون في أول النتائج Adobeثم اختر الرابط الذي يشير إلى الموقع الرسمي لـ


7

األصفر لتنتقل إلى صفحة التحميل: Fx Download Nowثم اضغط على زر

ثم سيبدأ التحميل تلقائيًا

(Thank Youرة الموجود ضمن فق download it)وإن لم يفعل انقر على رابط


8

:Flixelثالثًا تحميل مكتبة

: Flixelعن Googleابدأ بحث

Flixel.org اختر النتيجة التي تشير إلى موقع


9

كي تنتقل إلى صفحة تحميل المكتبة Downloadثم اضغط على زر

لي فقد اخترت نسخة ستجد عدة نسخ من المكتبة الفرق بين هذه النسخ عادة يكون بسيطًا جدًا, بالنسبة

Master الختيار النسخة التي تعجبك اضغط على زرDownload Now الموافق لها, ثم ابدأ عملية

التحميل.


10

:Flixelالستخدام FlashDevelopبرنامج تهيئة

وبرنامج Adobe Flex SDKوبيئة Flixelوبعد تحميل مكتبة Flixelللبدء بتطوير ألعاب

FlashDevelop برنامج وأنشئ مشروع افتح الAS3 جديد من قائمةProject > new Project :

ومكان حفظ ملفات المشروع في خانة Nameفي خانة Hello Worldوحدد اسم المشروع وليكن

Location.

في البرنامج Project)يمكنك مالحظة ذلك من قائمة Lib,Bin,srcهذه العملية ستنشئ ثالث مجلدات

حيث أن هذا srcفي المكان الذي حفظت المشروع فيه( وما يهمنا هو مجلد windowsتصفح أو من خالل م

المجلد الذي سيحوي كافة ملفات الرماز المصدري الخاص باللعبة من صفوف وصور وأصوات, وبعد ترجمة المشروع

المكتبات البرمجية هو المجلد الذي يحوي كافة Libومجلد binفي مجلد swfسينشئ الملف التنفيذي من نوع

الالزمة للمشروع.


11

ثم تأكد من إعدادات البرنامج كمايلي:

تأكد من ضبط اعدادات بيئةFlex SDK من قائمةProject>Propereties>SDK

التي حملتها وقمت بفك ضغطها: Adobe Flexاختر نسخة

وإن لم تكن موجودة قم باضافتها من خالل النقر على زرManage ر واختياAS3Context

والضغط على زر


12

فيه: Flex SDKثم اختر المسار الذي قمت بفك ضغط بيئة

.Flex SDKوبهذا تكون قد جهزت البرنامج الستخدام بيئة

إلى الموجود ضمنها orgمكتبة وفك ضغطها انسخ مجلد تلك وبعد تحميل Flixelبعدها الستخدام مكتبة

مشروع الذي عملنا عليه:الخاص بال srcالمجلد

جاهزة لالستخدام. Flixelوبهذا تكون مكتبة


13

على الشاشة. Hello Worldالذي سيطبع جملة Hello Worldولنبدأ ببرنامج

يتعامل مع اللعبة كمراحل أو حاالت والحالة هي مرحلة لعبة كاملة حيث أن تغيير المرحلة ممكن Flixelإن

أحدهما هو الحالة asيجب أن يكون على األقل ملفين Flixelحالية ولبدء مشروع ال Flixelبمجرد تغيير حالة

, فلننشأ أواًل ملف الحالة وليكن mainالتي ستبدأ والثانية هي الملف الرئيسي الذي سيبدأ المشروع به

State1 من قائمة ملفات المشروع بالزر اليمين للمؤشر اخترAdd > new Class:

:State1اسم ثم قم باعطائة


14

:ى الملفجديد( ثم سيعرض لك البرنامج محتو as, وهذا سينشئ لك صف جديد )ملف OKثم

:Flixel State تب السطر التالي الستيراد مكتبةثم اك

import org.flixel.FlxState;

كما يلي: FlxStateكي يكون امتداد للصف State1وعدل الصف

public class State1 extends FlxState

وبالتالي تصبح الشيفرة المصدرية للملف كما يلي:


15

بانشاء كائن من هذا الصف وذلك Flixelالمضمن بمكتبة FlxTextولطباعة نص يمكن استخدام الصف

كما يلي: State1وشحنه بقيمة النص الذي نريد عرضه ومكانه وحجمه ويمكن ذلك في دالة الباني للصف

public function State1()

{

var Txt:FlxText = new FlxText(0, 0, 50);

Txt.text = "Hello World";

add(Txt);

}

في مكان استيراد المكتبات: FlxTextوال تنسى استيراد مكتبة

import org.flixel.FlxState;

import org.flixel.FlxText;

في برنامج من خالل الملف الرئيسي للمشروع, ستدعي هذا الملفوبقي علينا أن ن وبهذا يكون ملف الحالة جاهز

FlashDevelop اختر الملفMain.as )وهذا سيفتح لك الملف وكافة التعليمات )بنقرة مزدوجة

الموجودة ضمنه كي تتمكن من كتابة ما تريد:

FlxGameة قم بحذف التعلميات االفتراضية حيث أننا ال نحتاجها حاليًا, واستورد فقط مكتب


16

FlxGameكي يكون امتداد للصف Mainالصف لوعد

وفي دالة الباني تحدد الحالة التي يبدأ بها المشروع كما يلي:

public function Main():void

{

super(400, 200, State1, 1);

}

والقيم كما يلي: FlxGameالذي هو Flixelتقوم بتمرير القيم إلى الصف األب في superإن الدالة

الرقم األول هو قياس عرض اللعبة .1

الرقم الثاني هو قياس طول اللعبة .2

القيمة الثالثة هي الحالة التي ستبدأ بها اللعبة )في المستقبل والدروس المتقدمة ستكون الحالة األولى .3

هي القائمة الرئيسية للعبة(

.Zoom Levelاللعبة تقريب صورةالقيمة الرابعة هي مقدار .4

الزر قم بتشغيل اللعبة من الموجود أعلى البرنامج, لتحصل على النتيجة التالية:


17

Flixelالكتابة بالعربية في القسم الثاني:

منذ بدء عصر الحاسوب واللغة العربية تواجه الكثير من المشاكل التي تعيق استمرارها في هذا العالم

الرقمي ولكن لحسن الحظ الكثير من المطورين العرب لم يقفوا مكتوفي األيدي وانما كانوا دائمًا وما زالوا

يسعون إلبقاء لغتنا الجميلة.

البرمجة الغربية ال تدعم اللغة العربية اطالقًا مكتباتليست استثناًء فهي كالكثير من Flixel ومكتبة

ولكن ذلك لن يدوم بعد القيام ببعض التعديالت البسيطة.

تكمن في أمرين أولهما الخط المستخدم في Flixelالمشكلة في عدم ظهور الكلمات العربية في

Flixel خط فهوnokiafc22 حوي أحرف عربية ولحل هذه المشكلة يجب أن نأخذ وهذا الخط الي

العربية وما أكثر الخطوط التي تدعم اللغة العربية في عالم الويب, األمر الثاني هو األحرفنوع خط يدعم

ولحل هذه المشكلة يجب تعديل هذا الصف ببعض utf-8مع أحرف FlxTextكيفية تعامل الصف

صف جاهز لإلستخدام مبرمج من قبل أحمد عباس يمكنك تضمينه التعليمات البرمجية ولحسن الحظ يوجد

يحوي نفس FlxArTextوليكن اسمه FlxTextبديل عن صف ضمن المشروع وكتابة صف جديد

ولكن بتعديالت بسيطة من أجل تطبيق األحرف العربية. FlxTextتعليمات الصف

اآلن للتطبيق العملي:

وفي الملف Flixelملف خط يدعم العربية ومن ثم في منصة لتغيير نوع الخط عليك أواًل احضار

FlxGame :تضيف السطر البرمجي التالي

[Embed(source = "data/Al Abdali 8 Regular.otf", fontFamily = "ArSystem", embedAsCFF = "false")]

protected var junk1:String;

وذلك في المكان الذي يتم فيه ارفاق الملفات

واستدعاؤه في الصف الخاص ArabicStringUtils.asوبعدها يجب عليك تصمين الملف

بالنصوص

مهمته كتابة األحرف العربية ويمكنك نسخ FlxArTextويمكنك بعدها انشاء صف جديد يدعى

بـ FlxTextوالتنسى تغيير جميع الكلمات التي تحوي كلمة FlxTextنفس التعليمات من ملف

FlxArText ب أن تستورد الصف ويجArabicStringUtils وذلك في مكان استيراد الملفات

كما يلي:


18

import org.Arabic.ArabicStringUtils;

والتنسى انشاء كائن من هذا الصف في مكان التصريح عن المتغيرات:

private var Ar:ArabicStringUtils = new ArabicStringUtils();

:كما يلي )األسطر المعدلة موضحة بالتظليل(ف يجب أن تعدل األسطر وفي دالة الباني لهذا الص

public function FlxArText(X:Number, Y:Number, Width:uint, Text:String=null, EmbeddedFont:Boolean=true) { super(X,Y); makeGraphic(Width,1,0); if(Text == null) Text = ""; _textField = new TextField(); _textField.width = Width; _textField.embedFonts = EmbeddedFont; _textField.selectable = false; _textField.sharpness = 100; _textField.multiline = true; _textField.wordWrap = true; _textField.text = Ar.GetCorrectArabic(Text); var format:TextFormat; format = new TextFormat("ArSystem", 8, 0xffffff); format.align = "right"; _textField.defaultTextFormat = format; _textField.setTextFormat(format); if(Text.length <= 0) _textField.height = 1; else _textField.height = 10; _regen = true; _shadow = 0; allowCollisions = NONE; calcFrame(); }

كما يلي: FlxArTextللصف Textوال ننسى تطبيق تلك العملية في خاصية

public function set text(Text:String):void { var ot:String = _textField.text;


19

_textField.text = Ar.GetCorrectArabic(Text); if(_textField.text != ot) { _regen = true; calcFrame(); } }

وبهذا تكون البنية التحتية لمنصة فلكس جاهزة لدعم اللغة العربية وما عليك اآلن إال تطبيق ما تشاء

للغة العربية

وذلك في ملف الحالة الخاص بلعبتك يمكنك تنفيذ المثال التالي:

private var score:FlxArText;

score = new FlxArText(100, 0, 200);

score.text = "النتيجة: " + FlxG.score.toString()+" 061: " + )السرعة - snakeSpeed);

add(score);

بالمرفقات يوجد مثال كامل عن كل هذه العملية كما في الصورة:


20

: تحليل وبرمجة لعبة األفعىلثالثاالقسم

تحليل لعبة األفعى:

سنياريو اللعب: أنت تتحكم باألفعى وهي عبارة عن رأس وجسم مكون من عدد من القطع وعليك أخذ

لمس رأس األفعى أي قطعة من قطع جسمها, وعند أخذ يلعبة بمجرد أن الطعام لجمع النقاط وتنتهي ال

الطعام يتم زيادة طول األفعة باالضافة إلى زيادة سرعتها.

لنتخيل األفعة عبارة عن مصفوفة من األجزاء, الجزء األول هو الرأس وعندما يتحرك الرأس تتحرك باقي

إضافة جزء جديد لألفعى. وفي كل مرة تحصل على قطعة طعام يتم األجزاء خلفه

:Flixelالتطبيق في

أنصح AS3 Projectجديد من نوع فلكس ننشئ مشروع Flash Developبواسطة برنامج

.Flixelبقرائة مقالة انشاء مشروع

وما يهمنا هو مجلد (bin,lib,srcهذه العملية ستقوم بإنشاء مشروع جديد يحوي ثالث مجلدات )

src الرئيسي الذي سنضع فيه مصادر لعبتنا, ويحوي هذا المجلد ملف اسمه حيث أنه المجلد

Main.as ـ وهو الملف الذي يتم بدء التشغيل منه بالنسبة لFlixel


21

وليكن اسمه asمستند أجزاء اللعبة يجب أن نضعها في ملفات أخرى جديدة لذلك أنشئ

FlxSnake.as

:حليل السابق()حسب الت التالي واكتب فيه القالب البرمجي

package

{

import org.flixel.*;

import flash.utils.getTimer;

public class FlxSnake extends FlxState

{

public function FlxSnake()

{ }

override public function create():void

{ }

}

}

رسم رأس األفعى وجسم مبدئي مؤلف من ثالث قطع وللقيام بذلك يجب أن نقوم في البداية نريد

المتغيرات التالية:بتعريف

1- snakehead : FlxSprite (صورة تعبر عن رأس األفعى)

2- snakeBody : FlxGroup (مصفوفة أو مجموعة تعبر عن أجزاء األفعى)

ارة عن مصفوفة تعبر عن أجزاء األفعى ولرسم األفعى المتغير األول يعبر عن رأس األفعى أما الثاني فهو عب

علينا تزويد تلك المتغيرات بالمعلومات التي نريد رسمها من خاللها

:()createفلرسم رأس األفعى نكتب السطور البرمجية التالية ضمن الدالة

1. var newBod:FlxSprite = new FlxSprite(64 + 8, FlxG.height / 2).makeGraphic(8, 8, 0xFFFFAA00);

2. snakeBody.add(newBod);

3. snakeHead = snakeBody.members[0];

4. snakeHead.facing = FlxObject.LEFT;

( أبعاده FlxG.height/2,72السطر األول يقوم بإنشاء صورة جديدة عبارة عن مربع في النقطة )

(8x8بكسل لونه أصفر غامق والسطر الثاني يضيف هذا المربع إلى مصف ) وفة أجزاء األفعى والسطر

الثالث يميز العنصر األول من المصفوفة على أنه رأس األفعى وهو الجزء الذي تتحكم به وتتبعه باقي

األجزاء أما السطر الرابع فيوجه األفعى باتجاه اليسار.


22

كما يلي: ولرسم األجزاء الثالثة نتبع نفس العملية السابقة ولكن بدون السطرين األخيرين

ء األول:الجز

1. newBod = new FlxSprite(64 + 16, FlxG.height / 2).makeGraphic(8, 8, 0xFFFFFF00);


:الثانيالجزء



الجزء الثاني:



واآلن جرب المشروع لترى نتيجة كما يلي:

يمكن مالحظة أن السطرين البرمجين السابقين الخاصين باضافة جزء جديد قد تكررا أكثر من مرة وبتغيير

مالحظة أننا سنستخدم نفس السطرين السابقين في كل مرة فقط مكان رسم الصورة, ويجب بسيط

نضيف جزء جديد لألفعى, ولذلك فإنه من األفضل أن نضع السطرين في دالة مستقلة )وهذه إحدى

( وعندما نريد اضافة جزء جديد نقوم باستدعاء ActionScript 3فوائد البرمجة غرضية التوجه في

كما يلي: MakeNewBodyجديد وليكن اسمها الدالة بدون اعادة كتابة األسطر من


23

1. private function MakeNewBody(_x:int, _y:int):void

2. {

3. var newBod:FlxSprite = new FlxSprite(_x, _y).makeGraphic(8, 8, 0xFFFFFF00);


5. }

وبالتالي إلنشاء جزء جديد لألفعى نستبدل السطرين بسطر واحد كما يلي:

1. function MakeNewBody(X, Y);

كما يلي: ()Creatوفي النهاية تصبح الدالة

1. override public function create():void

2. {

3. snakeBody = new FlxGroup();

4. MakeNewBody(64 + 8, FlxG.height / 2);

5. snakeHead = snakeBody.members[0];

6. snakeHead.makeGraphic(8, 8, 0xFFFFAA00); // األجزاء باقي عن قليلا الرأس لون تغيير

7. snakeHead.facing = FlxObject.LEFT;




11. add(snakeBody);

12. }

قة.وبعد تجربة اللعبة سنحصل على نفس النتيجة الساب

واألن إلعطاء األفعى بعض الحيوية يجب أن نقوم بتحريكها, في البداية سنقوم بتحريكها باتجاه اليسار ثم

سنعالج كيفية تغيير اإلتجاه, ولكن عندما تصل األفعى إلى أقصى اليسار فيجب إما أن نوقفها أن نجعلها

نحرك رأسها في كل دقة للمؤقت تتابع من أقصى اليمين إلى أقصى اليسار, ولتحريكها يجب علينا أن

بكسل )مسافة قطعة واحدة من قطعها( كما يلي: 8مسافة

snakeHead.x -= 8;

و تعريف هذه الدالة كمايلي: updateوهذه البرمجية نضعها في دالة جديدة اسمها

override public function update():void

{

super.update();

snakeHead.x -= 8;

}


24

واآلن جرب المشروع وستالحظ مشكلتين رئيسيتين األولى أن رأس األفعى يتحرك بسرعة كبيرة والثانية

إن رأس األفعى يختفي بعد أن يتجاوز حد اللعبة من اليسار, ولحل المشكلة األولى علينا أن نحدد سرعة

وهو عبارة عن sneakSpeedاألفعى بمتغير يمكننا تعديله حسب الرغبة لذلك سنعرف متغير إسمه

رقم يعبر عن الفترة الزمنية بين كل حركة من حركات األفعى, ونحتاج إلى متغير ثاني اسمه

nextMove :وهذا المتغير يحدد متى يجب أن تتم الحركة التالية وهو أيضًا رقم كما يلي

private var nextMove:int;

private var snakeSpeed:int;

جزء من الثانية أما متغير الحركة التالية فتساوي 150سنشحن سرعة األفعى بقيمة creatوفي الدالة

مجموع السرعة مضروبة باثنان مع الزمن الحالي كما يلي:

snakeSpeed = 150;

nextMove = getTimer() + snakeSpeed * 2;

كما يلي: updateولتطبيق الحركة والسرعة السابقة نعدل الدالة


{

super.update();

if (getTimer() > nextMove)

{

snakeHead.x -= 8;

nextMove = getTimer() + snakeSpeed;

}

}

انية فسنجعل األفعى وبعد التجريب ستالحظ بأن السرعة أصبحت منطقية نوعًا ما, أما لحل المشكلة الث

تبدأ من أقصى اليمين عندما تصل أقصى اليسار ولفعل ذلك يجب أن نفحص القيمة الخاصة بأبعاد رأس

وبالتالي تصبح الدالة FlxG.width-8األفعى فإذا كان أصغر أو يساوي الصفر نعدله ليأخذ القيمة

update :كما يلي


{ super.update();


{

if (snakeHead.x == 0) snakeHead.x = FlxG.width - 8;

else snakeHead.x -= 8;


} }


25

عض الشيء, حسنًا سنتابع علينا اآلن أن نحرك باقي أجزاء األفعى, جرب المشروع اآلن يبدو األمر جمياًل ب

كما قلنا سابقًا إن الرأس هو الذي يتحرك وتتبعه باقي األجزاء, وبالتالي جميع أجزاء مصفوفة جسم األفعى

ستنزاح مع رأس األفعى ولذلك سنستخدم حلقة تكرارية تمر على جميع أجزاء األفعى وتزيحها باتجاه رأس

عى لذلك قبل أن يتحرك رأس األفعى سنحفظ احداثياته في متغيرين جديدن ثم سنستخدم هذين األف

المتغيرين لنزيح باقي أجزاء األفعى على أساسهما بحلقة تبدأ بالجزء األخير وتعطيه قيمة الجزء الذي قبله

كما يلي: updateووصواًل إلى الجزء األول الذي سنعطيه قيمة احداثيات رأس األفعى لتصبح الدالة


{

super.update();


{

var oldX:int = snakeHead.x;

var oldY:int = snakeHead.y;

if (snakeHead.x == 0)

snakeHead.x = FlxG.width - 8;

else

snakeHead.x -= 8;

for (var s:int = snakeBody.countLiving() - 1; s > 0; s--)

{

if (s == 1)

{

snakeBody.members[s].x = oldX;

snakeBody.members[s].y = oldY;

}

else

{

snakeBody.members[s].x = snakeBody.members[s - 1].x;

snakeBody.members[s].y = snakeBody.members[s - 1].y;

}

}


}

}

جرب المشروع حتى اآلن, يبدو األمر أفضل بكثير.


26

وحتى تكون األمور مرتبة سنضع األسطر المظللة في updateأسطر البرمجة في الدالة وحتى ال تكثر

كما يلي: updateوبالتالي تصبح الدالة moveSneakدالة جديدة سنسميها


{

super.update();


{

moveSneak();


}

}

والدالة الجديدة كما يلي:

privar function moveSneak():void

{




snakeHead.x = FlxG.width - 8;

else

snakeHead.x -= 8;

for (var s:int = snakeBody.countLiving() - 1; s > 0; s--)

{

if (s == 1)

{



}

else

{



}

}

}


27

اتجهاها يجب علينا أن واآلن سنجعل األفعى تتفاعل مع األسهم لكي تغير اتجهاها, وحتى تغير األفعى

ويمكن تحديد األزرار التي يضغطها المستخدم الخاصة برأس األفعى, facingنستخدم خاصة االتجاه

بحيث إذا ضغط updateوسنستخدم هذه الخاصية ضمن الدالة FlxG.keysمن خالل الخاصية

نسبة لألسم اليسار, األعلى, المستخدم زر السهم اليمين يتغير اتجاه رأس األفعى إلى اليمين وهكذا بال

األسفل وذلك كما يلي:


{

super.update();

if (FlxG.keys.UP)

{

snakeHead.facing = FlxObject.UP;

}

else if (FlxG.keys.DOWN)

{

snakeHead.facing = FlxObject.DOWN;

}

else if (FlxG.keys.LEFT)

{

snakeHead.facing = FlxObject.LEFT;

}

else if (FlxG.keys.RIGHT)

{

snakeHead.facing = FlxObject.RIGHT;

}


{

moveSneak();


}

}

كما يلي: moveSneakولتطبيق االتجاه الجديد سنعدل الدالة

privar function moveSneak():void

{




28

switch (snakeHead.facing)

{

case FlxObject.LEFT:


{ snakeHead.x = FlxG.width - 8;

}

else

{

snakeHead.x -= 8;

}

break;

case FlxObject.RIGHT:

if (snakeHead.x == FlxG.width - 8)

{

snakeHead.x = 0;

}

else

{

snakeHead.x += 8;

}

break;

case FlxObject.UP:

if (snakeHead.y == 0)

{

snakeHead.y = FlxG.height - 8;

}

else

{

snakeHead.y -= 8;

}

break;

case FlxObject.DOWN:

if (snakeHead.y == FlxG.height - 8)

{

snakeHead.y = 0;

}

else

{


29

snakeHead.y += 8;

}

break;

} for (var s:int = snakeBody.countLiving() - 1; s > 0; s--)

{

if (s == 1)

{



}

else

{



}

}

}

حيث تفحص هذه الجملة اتجاه رأس األفعى ثم تحركه حسب switchإستخدمنا هنا جملة االختبار

اإلتجاه.

.واآلن جرب المشروع واستمتع بتحريك األفعى

قطع الطعام:نشاء إ

.مربعات خضراء اللونبانشاء قطع الطعام لألفعى وستكون عبارة عن سنقوم

يعبر عن قطعة الطعام كمايلي: Spriteأواًل سنعرف متغير من نوع

.


30

وستعرف دالة تقوم بوضع قطعة طعام جديدة في مكان عشوائي من الشاشة وستكون الدالة كمايلي:

private function placeFruit():void

{ fruit.x = int(Math.random() * (FlxG.width / 8) - 1) * 8;

fruit.y = int(Math.random() * (FlxG.height / 8) - 1) * 8; }

:()Creatواآلن إلنشاء قطعة طعام جديدة نضيف التعليمات التالية إلى الدالة

ر وللتأكد من أن مكان قطعة الطعام ليس مأخوذًا من قبل األفعى ولجعل قطعة الطعام تأخذ مكان آخ

كما يلي: ()placeFruitعند بدء تشغيل اللعبة علينا اضافة التعليمة التالية للدالة

وهذه الدالة تأخذ متغيرين عبارة عن جسمين نريد ()overlapما قمنا باضافته هو استدعاء الدالة

ب تنفيذها عند التأكد من ان كانا متداخلين أم ال باالضافة إلى متغير آخر عبارة عن اسم الدالة التي يج

placeFruitتداخل الجسمين السابقين, أي أنه عند تداخل األفعى مع الطعام يتم استدعاء دالة

مجددًا ليأخذ الطعام مكان عشوائي جديد.

ولجعل اللعبة تتفاعل مع الطعام عندما تالمسه أثناء اللعب نضيف التعليمات التالية في الدالة

update():


31

ذا أصابت األفعى الطعام أم ال وبعدها يتم تغيير مكان الطعام ويتم تغيير سرعة السطر األول يحدد إ

األفعى بتقليل الزمن بين كل حركة وأخرى.

ستالحظ بعد تشغيل اللعبة أنه حتى ان أخذت األفعى قطعة الطعام فالشيء الوحيد الذي يحدث هو

يحدد فيما Booleanير جديد من نوع زيادة سرعتها ونحن نريد أن يزيد طولها أيضًا لذلك سنعرف متغ

وسنعطيه القيمة ()Createفي الدالة Falseإذا كنا سنضيف جزء جديد أم ال وسنشحنه بالقيمة

True بمجرد تحقق شرط تالمس األفعى مع الطعام في الدالةUpdate() :كما يلي

...........................

private var addSegment:Boolean;

override public function create():void

{

. . . . . . . . . .

addSegment = false;

. . . . . . . . . .

}


{

. . . . . . . . . . .

if (snakeHead.overlaps(fruit))

{

. . . . . . . .

addSegment = true;

. . . . . . . .

}

}

حيث أواًل سنحفظ احداثيات أخر قطعة من قطع ()moveSneakوسنستخدم هذا المتغير في الدالة

األفعى كما يلي:


32

اعتمادًا على االحداثيات السابقة: ثم سننشأ قطعة جديدة ونضيفها لألفعى

وبالنهاية سنقوم باضافة بسيطة جدًا وهي اضافة صوت عبارة عن رنة بسيطة يتم تشغيلها عند

يوجد ملف Flixelحصول األفعى على الطعام, لذلك سنعرف متغير خاص بالصوت )ضمن مكتبة

:(beep.mp3صوتي

عند حصول شرط تداخل رأس األفعى مع update وتعليمة تشغيل هذا الصوت سنضعها في الدالة

الطعام:

واآلن قم بتشغيل اللعبة واستمتع باللعب.

وبهذا نكون قد انتهينا من هذا الدرس, في الدرس القادم سنقوم باضفة نص يظهر الدرجات وسرعة

األفعى ووضع شرط انتهاء اللعبة عند تالمس رأس األفعى مع أجزائها.

نظام النقاط وزيادة سرعة األفعى وعرض النتائج على الشاشة:نشاء إ

هر باللغة العربية ولفعل ذلك سنستخدم مكتبة النصوص العربية الخاصة تظ ةسنجعل النقاط والسرع

.Flixelالكتابة بالعربي في قسم, راجع Flixelب


33

Arabicومجلد orgتأكد من أن مكتبة النصوص العربية موجود لديك وهي ضمن مجلد

كما يلي: scoreوليكن intومتغير من نوع txtوليكن اسمه FlxArTextسنعرف متغير من نوع

private var txt:FlxArText;

private var score:int;

المتغير األول عبارة عبارة عن مربع النص الذي ستتم طباعة النص ضمنه, أما المتغير الثاني فهو عبارة عن

رقم يخزن عدد النقاط التي وصل إليها الالعب.

:()Createوسنهيء هذين المتغير بالقيم في الدالة

ألنه في بداية اللعب ستكون نقاط الالعب صفر. 0سيشحن بالرقم scoreلمتغير ا

كما يلي: txtوالمتغير

txt = new FlxArText(100, 2, 220);

دالة انشاء نص جديد تأخذ ثالث معامالت )الرقم األول والثاني هي احداثيات مربع النص والرقم الثالث هو

عرض مربع النص(

.add(txt)ة مربع النص إلى اللعبة من خالل الدالة وال تنسى اضاف

وتحديدًا بعد استدعاء Updateولطباعة قيمة النقاط مع سرعة األفعى نضع السطر التالي في الدالة

: ()MoveSneakالدالة

txt.text = "النتيجة: " + score + " 162: " + )السرعة - snakeSpeed);

ر مهما تناولت األفعى قطع الطعام وهذا ألننا لم نقم بتعديل قيمة ستالحظ بأن قيمة النقاط لن تتغي

النقاط حتى اآلن, ولفعل ذلك سنجعل الالعب يكسب عشرة نقاط عن كل قطعة طعام, في الدالة

Update :بعد تحقق شرط اصتدام رأس األفعى بقطع النقاط نضع السطر كما يلي


34

if (snakeHead.overlaps(fruit))

{

score += 10;

آخر مهمة هي عملية انهاء اللعبة فعند اصتدام رأس األفعى بأحد أجزائها ستنتهي اللعبة وتعرض قيمة

لتحديد ان كانت Booleanالنقاط التي حصل عليها الالعب, أواًل علينا تعريف متغير خاص من نوع

, ()Createلدالة في ا Trueوسنشحنه بالقيمة Aliveاألفعى حية أم ال وليكن اسمه

كما يلي: Updateوسنستخدمه في الدالة

if (Alive)

{

……………… Updateهنا نصع كل األسطر التي كتبناها في الدالة .……………

}

كما يلي: Elseوبعدها سنستخدم عبارة

else

txt.text = " والنتيجة! ةاللعب إنتهت : " + score;

نفحص ذلك فإن كان ()Updateوبالنهاية إلنهاء اللعبة عند اصتدام األفعى بأجزائها في بداية الدالة

وبذلك تنتهي اللعبة: Falseبالقيمة Aliveالشرط محققًا نشحن المتغير

FlxG.overlap(snakeHead, snakeBody, KillSneak);

خذ ثالث معامالت: أوال معاملين هما المتغيرين المراد معرفة إن كانا تأ FlxG.overlapإن الدالة

متصادمين أم ال, أما المتغير الثالث فهو اسم الدالة التي ستنفذ عند حدوث التصادم وفي هذه الحالة اسم

كما يلي: Falseبالقيمة Aliveومهمتها فقط شحن المتغير KillSneakالدالة

private function KillSneak(object1:FlxObject, object2:FlxObject):void

{

Alive = false;

}

.Flixelوهكذا انتهى مشروع لعبة األفعى في

شغل المشروع واستمتع باللعبة النهائية.

كتيب flixel

Documents