فكرة اللعبة
تظهر صورة الخلد (Mole) على الشاشة وتتحرك بصورة عشوائية حركة مختلفة كل ثانية، عند نجاح المستخدم في دهس الخلد يهتز الجهاز، وتحتسب له نقطة، تظهر في عنوان (Hits) أسفل الشاشة، وإذا لم ينجح المستخدم في دهس الخلد تحتسب عليه نقطة في خانة (Misses) أسفل الشاشة. يمكن للمستخدم بدء اللعبة من جديد عند ضغط زر (reset).
الهدف من التطبيق:
·
الاستجابة للمس الشاشة (touch-sensitive) باستخدام مكون (ImageSprite).
·
استخدام لوحة التزيين (Canvas) لتحريك مكون الصورة (ImageSprite).
·
استخدام مكون الساعة (Clock) لتحريك مكون الصورة حركة
جديدة (ImageSprite) كل ثانية.
·
استخدام مكون الصوت (Sound) ليحدث اهتزاز عند لمس
مكون الصورة (ImageSprite).
·
استخدام مكون الزر (Button) لبدء لعبة جديدة.
·
استخدام مكونات معاملات الجمع (+) والطرح (-) لاحتساب النتيجة.
الأدوات المستخدمة في التطبيق:
خطوات التطبيق:
- قم بإنشاء تطبيق جديد في آب اينفنتور appinventor mit، واعطه الاسم "MoleMash".
- قم بتحميل الصورة (mole.png) من هذا الرابط.
- وقم بحفظها على جهاز الحاسب الخاص بك.
تصميم مكونات التطبيق:
- قم بإضافة مكون لوحة التزيين (Canvas) من لوح الرسوم والحركة (Drawing and Animation) على الشاشة، وقم بضبط خاصية العرض (Width) له على (Fill pattern)، والطول (Height) على (300 pixels) ليكون طول هذه الأداة 300 نقطة أسفل صف الأزرار.
- قم بإضافة المكون (ImageSprite) من لوح (Drawing and Animation) داخل لوحة التزيين (Canvas)، وقم بضبط خاصية الصورة (picture) له على (mole.png) عن طريق رفعها إليه باستخدام زر (Uplode) الموجود داخل قائمة خصائص الصورة، وقم بتغيير اسم المكون إلى (Mole).
- مكون (ImageSprite) يمثل هدف النقر من المستخدم على اللعبة، والذي تظهر به صورة الخلد، وهو يتحرك على الشاشة بصفة مستمرة بشكل عشوائي.
- قم بسحب مكون زر (Button) من لوح (User Interface) أسفل لوحة التزيين (Canvas) وقم بتغيير اسمه إلى (ResetButton) عن طريق زر (Rename) الموجود أسفل لوح المكونات (Componants)، وقم بتغيير خاصية النص (Text) له على (Rest).
- قم بسحب مكون الساعة (Clock) من لوح المستشعرات (Sensors) وألقه على شاشة التطبيق ليظهر بأسفلها.
- قم بسحب مكون صوت (Sound) من لوح الوسائط (Media) ليظهر أيضا أسفل شاشة التطبيق.
إضافة مكونات العناوين:
قمنا في الخطوات السابقة
بإضافة مكونات اللعبة على شاشة التطبيق، سنقوم فيما يلي بإضافة العناوين (Labels) التي ستظهر بها النتيجة (Score).
- قم بسحب أداة الترتيب الأفقي (HorizontalArrangement) من لوح (Layout) إلى الشاشة أسفل الزر الموجود بها، وقم بضبط خاصية العرض (Width) له على (Fill Parent).
- قم بإضافة مكوني عنوان (Label) من لوح (User Interface) داخل مكون أداة الترتيب الأفقي (HorizontalArrangement)، وقم بتغيير العنوان الأول إلى (HitsLabel)، وغير خاصية النص له إلى (Hits:). وقم بتغيير أداة العنوان الأخرى للاسم (HitsCountLabel)، وغير خاصية الاسم لها على (0).
- قم بسحب أداة ترتيب أفقي (HorizontalArrangement1) جديدة من لوح (Layout) إلى الشاشة أسفل الأداة الأولى، وقم بضبط خاصية العرض (Width) له على (Fill Parent).
- قم بإضافة مكوني عنوان (Label) من لوح (User Interface) داخل مكون أداة الترتيب الأفقي الثانية (HorizontalArrangement2)، وقم بتغيير العنوان الأول إلى (MissesLabel)، وغير خاصية النص له إلى (Missess:). وقم بتغيير أداة العنوان الأخرى للاسم (MissesCountLabel)، وغير خاصية الاسم لها على (0).
لتكون شاشة التطبيق كما
بالشكل التالي:
إضافة السلوكيات لمكونات التطبيق:
- بعد أن قمنا بإضافة وتصميم مكونات التطبيق وترتيبها على الشاشة، سنقوم في هذه الخطوة بضبط سلوكيات المكونات (Behaviors) لتستجيب للأحداث (Events) أثناء تشغيل التطبيق. حيث نريد للخلد (Mole) الانتقال إلى موقع عشوائي على لوحة التزيين (Canvas) كل ثانية.
- وهدف المستخدم في اللعبة هو الاستفادة من الخلد أينما ظهر بالنقر عليه ليحصل على نقاط، وسوف يعرض التطبيق عدد المرات التي يضرب المستخدم فيها الخلد والمرات التي يفشل فيها. وعند الضغط على زر إعادة تعيين (Reset) تبدأ اللعبة من جديد ويتم تعيين النتيجة إلى (0).
تحريك الخلد (Mole):
لكي نقوم بتحريك الخلد سنقوم بإنشاء إجراء خاص بذلك (built-in procedures) مبني داخل آب اينفنتور ...
- انقر زر (Blocks) لتنتقل لشاشة الكتل.
- اضغط قائمة الإجراءات (Procedures) وقم بسحب الإجراء الفارغ الذي يتضمن كلمة (do) إلى منطقة الكتل.
- انقر خانة النص في الإجراء الجديد، واكتب الاسم (MoveMole) ليكون هذا الاسم هو اسم الإجراء.
- قم بضغط مكون (Mole) الموجود أسفل لوح التزيين (canvas) أسفل فئات الكتل، ثم اسحب إجراء (call Mole.MoveTo) إلى منطقة الكتل داخل الإجراء السابق تخصيصه. وهذا الإجراء الجديد مسؤول عن تحريك صورة الخلد.
- يحتوى إجراء تحريك الخلد على إحداثيات (x, y) المسؤولة عن تحريك الخلد على الشاشة. وعلينا أن نقوم بتعيين قيم عشوائية لهذه الإحداثيات، حتى لا يتوقع المستخدم الحركة التلية للخلد.
- نختر المكون (random integer) من فئة كتل الحساب (Math)، ونضعه عند النقطة (x) على المكون السابق (call Mole.MoveTo)، ونغير القيم (1) إلى (0)، ونحذف القيمة (100) الموجودة في خانة (to)، بتحديدها وضغط مفتاح (Delete) من على لوحة المفاتيح.
- نقم بسحب كتلة الطرح (-) من فئة كتل الحساب (Math)، ونضعه في نهاية المكون السابق.
- قم بتحديد مكون لوحة التزيين (Canvas) من أسفل فئات الكتل، ثم اختر مكون (Canvas1.Width) في المنطقة الفارغة الأولى في مكون الطرح.
- قم بتحديد مكون (Mole) الموجود أسفل لوحة التزيين (Canvas) من أسفل فئات الكتل، ثم اختر مكون (Mole.Width) في المنطقة الفارغة الثانية في مكون الطرح.
- وبذلك يحرك الخلد على المحور (x) في قيمة عشوائية من صفر إلى عرض لوحة التزيين (Canvas1) مطروحة من عرض صورة الخلد (Mole)
- اتبع نفس الخطوات السابقة لتعيين قيمة المحور (y) لتكون إحداثياته من صفر (0) إلى طول لوحة التزيين (Canvas1) مطروحة من طول صورة الخلد (Mole).
ليكون الإجراء على الشكل
التالي.
استدعاء حركة الخلد عند بدء التطبيق:
سنقوم في هذه الخطوة بكتابة إجراء جديد ليقوم باستدعاء حدث تحريك الخلد عند بداية تشغيل التطبيق. ولعمل ذلك نتبع الخطوات التالية:
- قم بتحديد مكون الشاشة (Screen1) أسفل فئات الكتل، ثم اسحب كتلة تهيئة الشاشة (Screen1.Initialize) إلى منطقة الكتل.
- حدد فئة كتلة إجراءات (Procedures) ثم قم بسحب كتلة (call MoveMole) داخل إجراء تهيئة الشاشة (Screen1.Initialize).
تعيين حركة الخلد لتكون كل ثانية:
لكي نجعل الخلد يتحرك كل ثانية سنستخدم مكون الساعة (Clock) ونضبط خاصية الفاصل الزمني له (TimerInterval) القيمة (1,000) ملي ثانية، أو ثانية واحدة (1).
لعمل ذلك نقوم بما يلي:
- حدد مكون الساعة (Clock1) أسفل فئة الكتل، ثم اسحب كتلة (Clock1.Timer) إلى منطقة الكتل.
- حدد فئة كتلة إجراءات (Procedures) ثم قم بسحب كتلة (call MoveMole) داخل إجراء تهيئة الشاشة (Clock1.Timer).
تسجيل النتيجة (Score):
قمنا أثناء تصميم التطبيق بإنشاء عنصري عنوان (labels) هما (HitsCountsLabel)، و (MissesCountsLabel)، وقد تم تعيينها على القيمة الافتراضية (0)، نريد الآن أن نزيد هذه القيمة الموجودة في هذين العنوانين عندما ينجح المستخدم في النقر على الخلد، وأن تقل عندما يفشل المستخدم في اصطياد الخلد.
للقيام بذلك، سوف نستخدم كتلة (Canvas1.Touched)، لتحديد مكان النقر على الشاشة (لوحة التزيين Canvas) عن طريق الإحداثيات (x , y).
ولعمل ذلك سنتبع الخطوات التالية:
- قم بتحديد عنصر لوحة التزيين (Canvas) أسفل فئات الكتل، ثم اختر كتلة لمس لوحة التزيين (Canvas1.Touched).
- انقر فئة كتل التحكم (Control) ثم اسحب حلقة التكرار (if - then) واتركها داخل الإجراء السابق (Canvas1.Touched).
- اضغط الزر الأزرق داخل كتلة التكرار، ثم اسحب كتلة (else) واتركها داخل كتلة (if) لتتم توسعة حلقة التكرار وإظهار الشرط (else) بها.
- حرك الماوس فوق حدث (Canvas1.Touched) ثم اسحب الأحداث الفرعة التي ستظهر منه إلى الخارج. وقم بسحب الحدث (get touchedAnySprit) داخل كتلة (if).
- لكي نزيد قيمة النتيجة (Score) في عنصر العنوان (HitsCountLabel) سنقوم بتحديد العنصر (HitsCountLabel) أسفل منطقة الكتل، ثم اسحب كتلة خاصية النص لعنصر العنوان (itsCountLabel.Text) داخل كتلة (then).
- انقر فئة كتلة الحساب (Math) ثم اسحب كتلة الجمع (+) وضعها في نهاية كتلة خاصية النص السابقة (itsCountLabel.Text).
- انقر عنصر (HitsCountLabel) أسفل منطقة الكتل، ثم اسحب كتلة خاصية النص لعنصر العنوان (HitsCountLabel.Text) داخل الكتلة الفارغة في نهاية الحدث السابق.
- انقر فئة كتلة الحساب (Math) ثم اسحب كتلة القيمة (0) وضعها في نهاية الحدث السابق، ثم قم بتغيير القيمة (0) إلى (1).
- كرر الخطوات السابقة للعنوان (MissesCountLabel) في القسم الآخر الموجود في حلقة التكرار.
تجريب التطبيق:
يمكننا تجريب التطبيق عند هذه النقطة قبل استكمال باقي السلوكيات والأحداث.
- اختر أمر (Al companion) من قائمة (Connect).
- وجه كاميرا الهاتف إلى الكود الذي سيظهر على الشاشة، واضغط زر (Scan QR) code) ليتم تشغيل التطبيق على الهاتف.
- انقر صورة الخلد التي تتحرك في أماكن عشوائية على الشاشة، ولاحظ زيادة النتيجة (Score) في عنوان (Hits).
إعادة تعيين النتيجة:
يمكن إعادة تعيين النتيجة بتصفير عنواني (Hits)، و (Missess) ولعمل ذلك نفعل حدث الضغط على زر (Reset). ولعمل ذلك نتبع الخطوات التالية:
- انقر على مكون الزر (Reset) الموجود أسفل الشاشة في لوح الكتل، وقم بسحب حدث النقر على الزر (When Reset.Click) إلى منطقة الكتل.
- انقر على عنصر العنوان (HitsCountLabel)، ثم قم بسحب حدث (set HitsCountLabel.Text) داخل حدث النقر على الزر (When Reset.Click)، ثم اضغط كتلة الحساب (Math) وقم بسحب القيمة (0) إلى نهاية الحدث.
- انقر على عنصر العنوان (MissesCountLabel)، ثم قم بسحب حدث (set MissesCountLabel.Text) داخل حدث النقر على الزر (When Reset.Click)، ثم اضغط كتلة الحساب (Math) وقم بسحب القيمة (0) إلى نهاية الحدث.
تجريب التطبيق:
- اختر أمر (Al companion) من قائمة (Connect).
- وجه كاميرا الهاتف إلى الكود الذي سيظهر على الشاشة، واضغط زر (Scan QR) code) ليتم تشغيل التطبيق على الهاتف.
- انقر صورة الخلد التي تتحرك في أماكن عشوائية على الشاشة، ولاحظ زيادة النتيجة (Score) في عنوان (Hits).
- انقر زر (Reset) لتظهر القيمة (0) من جديد في عنواني النتيجة.
اهتزاز الجهاز عند لمس الخلد:
يمكن جعل الجهاز يهتز عندما يتم لمس الخلد أثناء تشغيل التطبيق، لعمل ذلك نفعل حدث لمس الخلد.
- قم بتحديد عنصر (Mole) الموجود أسفل الشاشة في لوح الكتل، ثم سحب كتلة لمس الخلد (when Mole.Touched) إلى منطقة الكتل.
- انقر عنصر الصوت (Sound) الموجود أسفل الشاشة في لوح الكتل، ثم قم بسحب حدث استدعاء صوت الاهتزاز (call Sound1.Vibrate)، وضعه داخل كتلة (when Mole.Touched)، ثم قم بسحب قيمة عددية من كتلة الحساب (Math) إلى نهاية الحدث، وغير قيمتها إلى (100) بدلا من (0).
تجريب التطبيق:
- اختر أمر (Al companion) من قائمة (Connect).
- وجه كاميرا الهاتف إلى الكود الذي سيظهر على الشاشة، واضغط زر (Scan QR) code) ليتم تشغيل التطبيق على الهاتف.
- انقر صورة الخلد التي تتحرك في أماكن عشوائية على الشاشة، ليهتز الجهاز، ولاحظ زيادة النتيجة (Score) في عنوان (Hits)، وعنوان (Misses).
- انقر زر (Reset) لتظهر القيمة (0) من جديد في عنواني النتيجة.
الشكل الكامل لكتل التطبيق
هذا هو الشكل العامل لكتل التطبيق.
