نعيش حرفيًا في عالم من البيانات، فما نقرؤه وما نكتبه وما نفكر به أنواع من البيانات، وما تستند عليه أفعالنا اليومية وسلوكنا هي أنواع من البيانات. قد تقرر الذهاب إلى التسوق لأنك تحتاج إلى بعض الحاجيات التي سجلتها على قائمتك، إن ما سجّلته على قائمتك هي بيانات، ثم تمضي في طريقك لتقف عند إشارة مرور حمراء، إن وقوفك عند الإشارة الحمراء عائد إلى بيانات أيضًا، فالأحمر للوقوف والأخضر للمتابعة، ثم تصل بعد ذلك إلى المتجر لتتفقد ما تحتاج إليه، فقد تنظر إلى العلامة التجارية للمنتج وهذه بيانات قد تعطيك فكرة عن جودة المنتج، وقد تنظر إلى سعر المنتج وهذه أيضًا بيانات تستخدمها لاتخاذ قرار الشراء وفقًا لميزانيتك، وإن كان المنتج غذائيًا مثلًا ستهتم بتاريخ الإنتاج وتاريخ انتهاء الصلاحية والمكوّنات، فهي بيانات ستؤثر على صحتك، وأخيرًا عندما تنتهي من التسوق وتتوجه إلى كوة المحاسبة سيقرأ الماسح الضوئي رمز المنتج وهو نمط من البيانات التي تعرّف هذا المنتج وتحدد هويته وقد خُزّنت ضمن هذا الرمز وفق سلسلة من الأرقام أو الأحرف أو كليهما كما خزّنت على حاسوب كوة المحاسبة أيضًا بطريقة ما.

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

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

إليك فهرس بعناوين المقال لتسهيل الوصول إلى مختلف أجزاء المقال:

• تعريف البيانات
• الفرق بين البيانات والمعلومات
• من أين تأتي البيانات؟
• أنواع تخزين البيانات
• تصنيف أنواع البيانات Data Types
  • البيانات الكمية
  • البيانات النوعية
  • البيانات المنطقية
• أنواع البيانات في الحاسب
  • تصنيفات البيانات الرقمية
  • أنواع البيانات في لغات البرمجة
  • أنواع البيانات المستخدمة في قواعد البيانات
• خاتمة

تعريف البيانات

البيانات Data تُعرَّف بأنها مقادير منفصلة على شكل رموز أو إشارات قابلة للتحليل والمعالجة، ويمكن للبيانات أن تكون واضحةً ومفهومة لنا دون سياق محدد -أي دون أي تسلسل أو ترابط- مثل مجموعة أرقام تمثل أحجية، فالأرقام مقاديرٌ مفهومةٌ بالنسبة لنا، لكن الربط بينها لحل الأحجية قد يكون عصيًا. وقد لا تكون البيانات مفهومةً كخطوط رمز الماسح الضوئي (بار كود). تُدعى النتيجة المستخلصة من تحليل مجموعة من البيانات والربط بينها بالمعلومة أو المعلومات عمومًا information، كما تُدعى أصغر وحدة من مجموعة بيانات يمكن أن تُستخدم أو تفهم باستقلالية بعنصر البيانات datum.

عندما نجمع المعلومات المتعلقة بموضوع معين وننظمها ثم نفهمها من خلال التطبيق والممارسة، سيكون توثيق هذه المعلومات المصنّعة انطلاقًا من البيانات معرفةً knowledge، أما الأسلوب الأمثل في تطبيق هذه المعرفة فقد ندعوه حكمة wisdom.

إذًا فالبيانات عمومًا هي وسيلة للحصول على معلومات أو وسيلة لتمثيلها بطريقة أفضل كي تُعالح وتُستخدم. وقد تكون هذه البيانات مجرّدة كأسماء علامات تجارية وقد تكون مقاسة كدرجات الحرارة أو نسبة الفائدة أو عدد الولادات خلال عام.

تُنظم البيانات ضمن بنىً خاصة تسمى بنى البيانات أو هياكل البيانات data structure لتسهيل الوصول إليها واستخلاص المعلومات منها مثل الجداول، وقد جُمعت أنواع البيانات ما قبل الثورة الرقمية في مراجع وكتب ووثائق، لكن مع بزوغ فجر الحوسبة كان الانتقال إلى البيانات الرقمية أمرًا حتميًا لتقود بالفعل العالم الرقمي منتجات ومختصين نحو تقنيات أكثر قدرة وترابطًا ابتداءً بقواعد البيانات النمطية databases إلى تقنيات التعامل مع البيانات الضخمة Big data وصولًا إلى تطوير الذكاء الصنعي AI.

الفرق بين البيانات والمعلومات

يجري الخلط في مواضع عدة بين البيانات والمعلومات على أنها الشيء ذاته وهذا أمر خطأ، فهناك فرق بيّن بين المصطلحين تعريفًا وغاية، ولقد أشرنا سابقًا أن البيانات تعرّف حقائق مفردة، بينما تمثل المعلومات تنظيمًا لهذه الحقائق أو تفسيرًا لها.

تأتي البيانات بأشكال مختلفة، نصوصًا وأرقام وأشكال وصور وتواريخ لكنها لا تحمل دلالات على أهميتها أو الحاجة لوجودها، فقد يشير جهاز قياس تردد الصوت إلى القيمة 12 كيلو هرتز عندما يعجز المريض عن سماع أي صوت في عيادة تخطيط السمع، إذ القراءة بحد ذاتها لا دلالة لها ولن يتمكن سوى المختص من تأويلها إلى المعلومة التالية "المريض يعاني نقصًا في السمع". وقد تجد أيضًا أن مقدار المبيعات من منتج ما هو 20 جهازًا في العام، لن يقدم كذلك عنصر البيانات هذا أي دلالة ما لم يحلل ويوازن ويتحول إلى معلومة مثل "حققت الشركة هذا العام نسبة مبيعات عالية!".

وهكذا يمكن أن نلخص الفرق بين البيانات والمعلومات كالتالي:

• البيانات مجموعة من الحقائق غير المنظمة، أما المعلومات فهي من يضع تلك البيانات في سياقها الصحيح.
• البيانات مصدر خام للحقائق دون أية دلالات وقد لا تتمكن من قراءتها أحيانًا، أما المعلومات فهي التي توضّح أنواع البيانات وتستخلص منها ما يُفهم ويُطبق ويُختبر.
• البيانات حقائق مستقلة بذاتها وقد لا تربط بينها أية علاقات، بينما تجد المعلومات العلاقات التي تربط بين أنواع البيانات لعرض صورة أوسع عن الظاهرة المدروسة.
• لا تعتمد البيانات على المعلومات لكن العكس صحيح.
• لا يمكن الاعتماد على البيانات لاتخاذ القرارات، فلا بد من وجود معلومات حتى يُتّخذ القرار الصحيح.

من أين تأتي البيانات؟

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

• الافتراض assumption
• المراقبة observations
• القياس measurement
• التحليل analysis

الافتراض assumption

عادة ما يكون الافتراض منهجيًا، أي يستند إلى أفكار مسبقة عن موضوع ما أو إلى معلومات غير دقيقة أو بياناتها غير كافية. عادة ما تكون أنواع البيانات المفترضة خطوة مرحلية تُلغى لاحقًا عند حيازة البيانات المطلوبة، إلا أن توثيقها ضروري جدًا. فلو أردنا مثلًا أن نقدّر عدد المشترين المتوقعين لمنتج جديد في مدينة ما لدراسة جدوى توزيعه فيها سيكون هذا الرقم مفترضًا والنتائج التي تتأتى عنه افتراضيةً أيضًا ستصحح مع الوقت لكن بالطبع سيكون عدد المشترين متوقعًا بناء على أفكار أو دراسات مشابهة.

المراقبة observations

وهي إحدى الطرق الإحصائية Statistics المتبعة في حيازة البيانات، إذ تجري مراقبة ظاهرة اجتماعية أو اقتصادية أو غيرها ضمن جماعة population محددة للحصول على أنواع بيانات محددة تتعلق بالحالة المدروسة، كأن نسجل بيانات عن عدد المتزوجين تحت سن الثلاثين في منطقة معينة مثل سن الزواج وتاريخه وعدد الأطفال. تقدم هذه البيانات قاعدة قوية للحصول على الكثير من المعلومات التي يحتاجها الإحصائي للإجابة عن الأسئلة التي صمم هذه الدراسة لأجلها.

القياس measurement

تُعنى هذه الطريقة بالحصول على بيانات كمية (سنتحدث عنها لاحقًا) ثابتة توصّف الحالة المدروسة، ويقصد بالحصول على قيمة: إجراء ما يلزم من الاختبارات لتحديد القيمة المقاسة بأقل خطأ ممكن. من الأمثلة على البيانات المحازة عن طريق القياسات درجات الحرارة في مدينة محددة أو منسوب المياه في نهر خلال العام أو كمية المشتريات من منتج محدد وغيرها.

التحليل analysis

تهدف هذه العملية إلى تفكيك ظاهرة مجهولة أو مجموعة معلومات مجهولة التكوين إلى بياناتها الأولية لفهمها والاستفادة منها كالبيانات الناتجة عن تحليل الطيف الضوئي لنجم بعيد أو تحليل إشارة لاسلكية مركبة إلى مكوناتها الأساسية للحصول على بيانات تتعلق بالتردد والشدة.

إذًا فعمليات الحصول على أنواع البيانات أو حيازتها تتعلق بالظاهرة المدروسة والهدف النهائي من هذه الدراسة والمعلومات التي يجب الحصول عليها أو فهمها تمهيدًا لتخزينها أو وضعها حيز التطبيق.

أنواع تخزين البيانات

تخزن البيانات في وسائط تخزين والتي إما أن تكون فيزيائية باستعمال الأوراق والدفاتر وكل ما يصلح للكتابة عليه أو باستعمال وسائط تخزين رقمية عبر الحواسيب التي هي الأشيع حاليًا بما أنها تسهل عمليات البحث والفهرسة ومعالجة البيانات.

فبالنسبة لتخزين البيانات في الحواسيب، فإنها تعتمد على وسائط تخزين رقمية مثل الأقراص المدمجة والأقراص الصلبة HDD وذواكر الحالة الصلبة SSD والتي تتطور تدريجيًا مع الزمن وفيها إما أن تخزن البيانات مباشرةً باستعمال نظام ملفات يوفره نظام التشغيل أو تخزن بطريقة مهيكلة عبر جداول مثلًا لتسهيل معالجتها والوصول إليها وهنا يمكن استعمال برامج بسيطة مثل برنامج إكسل من مايكروسوفت أوفيس وقواعد بيانات أكسس وحتى استعمال قواعد بيانات مخصصة تكون عادة الأساس الذي ترتكز عليه تطبيقات الحاسوب كلها.

تصنيف أنواع البيانات Data Types

أنواع البيانات Data Types تُصنّف ضمن ثلاثة فئات رئيسية هي:

• البيانات الكمية quantitative data
• البيانات النوعية qualitative data
• البيانات المنطقية logical data

وسنشرح كل تصنيف منها.

البيانات الكمية

البيانات الكمية هي البيانات التي تأخذ قيمًا عددية أو ناتجة عن الموازنة مع مقاييس عددية ومن الأمثلة عليها ارتفاع بناء، فلا بد من أن يكون قيمة عددية محددة 30 متر مثلًا، أو أن تحدد مستوى مهارتك في لغة برمجة معينة على مقياس من 1 إلى 10.

تنتج هذه البيانات عن طريق قياس المقادير عبر الأجهزة المختلفة كمقاييس الضغط والحرارة والارتفاع، وقد نحصل عليها من الاستبيانات questionnaire التي تُنشر وتتطلب الإجابة عنها عن طريقة التقييم العددي لأسئلتها.

قد نجد أيضًا تصنيفات فرعية لهذا النوع من البيانات:

• بيانات منفصلة discrete data: وهي بيانات كمية تأخذ قيمها من مجموعة قيم محددة سلفًا كعدد الوجبات التي يمكن للمطاعم أن تقدمها أو عدد الأولاد في عائلة محددة.
• بيانات مستمرة continuous data: وتمثل عادة القيم التي تقيسها التجهيزات والتي يمكن أن تأخذ أي قيمة عددية ضمن مجال محدد مثل درجات الحرارة، ويمكن تصنيف هذه الأخيرة إلى:
• بيانات مجالية interval data: وهي بيانات تمثل قيم عددية مرتبة تزيد كل قيمة عن التي تسبقها بمقدار محدد تمامًا كأن نعرض تسلسل طلبات الشراء، أو أن نسجل ارتفاع بالون في الجو كلما ارتفع 10 أمتار عن سطح البحر.
• بيانات نسبية Ratio data: وهي بيانات مستمرة تمثل نسبة تكرار حالة إلى جميع الحالات الممكنة كأن تحدد احتمال إصابة هدف أو إمكانية ولادة طفل مصاب بمرض وراثي.
• بيانات إحصائية: وهي البيانات التي تنتج عن تطبيق العلاقات الرياضية الخاصة بالإحصاء ومن أنواع البيانات الإحصائية:
  • المتوسط الحسابي mean: ويقيس مجموع عدة قراءات إلى عددها كأن نحسب المتوسط الحسابي لأطوال الذكور في بيئة معينة بجمع أطوال جميع الذكور المشاركين في الدراسة ثم تقسيم الناتج على عددهم.
  • المتوسط الهندسي geometric mean: وهو الجذر من المرتبة n لجداء القراءات المتعلقة بظاهرة معينة.
  • الوسيط median: ويحدد القيمة التي تأتي في وسط مجموعة قيم مرتبة أي بمعنى آخر القيمة التي تقسم مجموعة قيمة مرتبة إلى مجموعتين متساويتين.
  • الانحراف المعياري standard deviation: ويمثل مقدار ابتعاد عينة عن المتوسط الحسابي.
  • المدى range: الفرق بين أعلى وأدنى قراءة من مجموعة قراءات.
  • المنوال mode: ويحدد القيمة أو القيم الأكثر ورودًا.

البيانات النوعية

البيانات النوعية هي البيانات التي تصف نوعية أو خصائص الظاهرة المدروسة وبالتالي هي غير قابلة للعد وصعبة القياس والتحليل الدقيق، كأن تكون ملاحظات مأخوذة عن نوعية الوجبات المقدمة في مطعم أو أسماء الناجحين في اختبار. قد تكون هذه البيانات على شكل كلمات تصف الظاهرة ولا تحتاج إلى تحليل أبعد أو يمكن أن تكون لهذه البيانات أنماط محددة أو معانٍ محددة لا بدّ من تحليلها للحصول على المعلومات المطلوبة مثل سمات السلوك العدواني لعينة من المرضى النفسيين أو الميزات الأنسب لأحد المرشحين للحصول على وظيفة معينة.

كما قد تكتب البيانات النوعية على شكل بيانات رقمية لكنها لا تحتمل معنى الأعداد الرياضي ولا توازن بأعداد لا تماثلها كأن نجعل الرقم 1 يدل على جنس المولود إن كان أنثى و 0 إذا كان ذكرًا.

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

• بيانات فئوية categorical data: وهي بيانات تمثل ميزة محددة للعينة المدروسة مثل العمر، والجنس، واللغة.
• بيانات مسماة nominal data: وهي بيانات نوعية تأخذ قيمها ضمن مجموعة محددة من الخيارات كأن تختار لغة من بين خمس لغات محددة سلفًا أو أن تختار تقييمًا لخدمة زبائن من بين عدة تقييمات متاحة.
• بيانات مرتبة ordinal data: وهي ببساطة بيانات مسماة لكنها مرتبة على أساس محدد كأن تحدد البيانات قائمة العقوبات التدريجية التي تطبق على مخالفي النظام الداخلي لمؤسسة او شركة أو تسلسل خطوات إصلاح خلل في برنامج.

ما الفرق بين البيانات الكمية والنوعية؟

شرحنا ما هي البيانات الكمية والنوعية ويجدر الذكر أنه يمكن لعينة بيانات نفسها أن تنقسم إلى بيانات كمية ونوعية في الوقت نفسه مثل عينة بيانات من مجموعة مدارس، فقد تنقسم إلى بيانات كمية من عدد الطلاب وقد تنقسم إلى بيانات نوعية بناءً على جنس الطلاب بين ذكر وأنثى وهكذا لذا وجب التفريق جيدًا بين البيانات الكمية والنوعية.

أمر آخر وهو أن العمليات المطبقة على البيانات الكمية قد تختلف أغلب الأحيان عن تلك المطبقة على البيانات النوعية فقد يصلح تطبيق عمليات إحصائية وعمليات رياضية على بيانات كمية في وقت لا يصلح تطبيقها على بيانات نوعية بما أن قيمة البيانات الكمية تمثَّل مباشرةً بعدد، وهذا خلاف البيانات النوعية فحتى لو مثلناها بعدد مثل تمثيل الطلاب الذكور بعدد 1 والطلاب الإناث بعدد 2 فهو طريقة لعرض البيانات بشكل آخر.

البيانات المنطقية

وهي أبسط أنواع البيانات، وتجيب عن سؤال ما بصحيح أو خاطئ، نعم أو لا وقد تأخذ إحدى القيمتين الرقميتين 0 أو 1، وتدعى أيضًا البيانات البوليانية نسبة إلى الجبر البولياني.

قد تصنف هذه البيانات على أنها بيانات نوعيّة إذا جاءت على شكل "صحيح/خاطئ" أو "نعم/لا"، وقد تصنّف أنها بيانات كمية إن جاءت على شكل "0/1".

أنواع البيانات في الحاسب

عزز ظهور الحواسب قدرة البشر على حيازة وتخزين كميات هائلة من البيانات وأمنت الوسائل اللازمة لتحليلها واستخلاص المعلومات عنها والاستفادة من تلك المعلومات في عمليات اتخاذ القرار، ولا تختلف أنواع البيانات في الحاسب وفي العالم الرقمي من حيث التعريف والغاية لكنها تخزّن وتعالج بطريقة أفضل وأسرع، لهذا السبب وضعت بعض التصنيفات الفرعية وحددت أنواع للبيانات تلائم طريقة عمل الحواسيب.

تمثّل البيانات في الحواسيب على شكل سلاسل من الواحدات والأصفار وهي ما يفهمه الحاسوب أولًا وآخرًا ويُدعى أصغر حجم لتخزين عنصر البيانات "بت Bit" ويخزن القيمة 0 أو 1 ومن البت يتكون البايت Byte الذي هو 8 بت والكيلو بايت والميغا بايت …إلخ.

تصنيفات البيانات الرقمية

تُدعى أنواع البيانات التي تُخزّن على شكل سلاسل من الأصفار والواحدات وتعالج وفق هذه الطريقة بالبيانات الرقمية digital data، وقد نجد أن البيانات الرقمية قد تأخذ أصنافًا جديدة منها:

• بيانات مهيكلة structured: تُرتب البيانات المهيكلة وفق نموذج بيانات محدد لتسهل معالجتها وتخزينها والوصول إليها مثل الجداول المكوّنة من أسطر وأعمدة والتي تُعد أساس قواعد البيانات العلاقيّة relational databases أو على شكل بنية هرمية متداخلة hierarchical data structure أو أنها قادرة على تخزين كائنات objects لها هيكليات محددة سلفًا.
• بيانات غير مهيكلة not structured: البيانات غير المهيكلة هي تلك التي تُنظّم فيها البيانات بطريقة محددة كأن توضع في ملفات نصية أو تُستخدم بعض اللغات التوصيفية في تنظيمها.
• بيانات وصفية metadata: وهي بيانات نصية تصف بيانات أخرى كأن تحدد إصدار برنامج وتاريخ الإصدار ومعلومات عن ترخيص الاستخدام وهكذا.
• بيانات خام raw Data: وهي تسلسل غير منسّق من الواحدات والأصفار يُخزّن للمعالجة اللاحقة.
• القواميس dictionary: وهي نوع من أنواع البيانات التي يمكن الوصول إليها بطريقة "مفتاح-قيمة" أي تُفهرس فيها بيانات "القيمة" وفقًا لبيانات "المفتاح" وللوصول إلى القيمة قراءةً أو تخزينًا لا بد من معرفة المفتاح المرتبط بها.
• البيانات الضخمة big data: ظهر هذا المصطلح في فترة قريبة نسبيًا ليدل على أنواع البيانات التي تتجاوز أحجامها البيتا بايت (1000 تيرا بايت)، وبالتالي سيصعب معالجة هذا الكم الهائل من البيانات من قبل حاسوب واحد أو تنظيمها باستخدام قواعد البيانات النمطية، لهذا توزّع المهام على عدة حواسب رئيسية تتمتع بقدرات كبيرة في المعالجة من خلال استخدام خوارزميات واختبارات متقدمة بغية استخلاص المعلومات والرؤى التي تقدمها تلك البيانات خلال فترة زمنية مقبولة.

أنواع البيانات في لغات البرمجة

تختلف أنواع البيانات التي تستخدمها لغات البرمجة للتعبير عن القيم التي تتعامل معها وفقًا للغة البرمجة نفسها فكل لغة برمجة لها مجموعة أنواع بيانات محددة تتعامل معها توضحها في توثيقها الرسمي فانظر مثلًا مقال أنواع البيانات في لغة بايثون في أكاديمية حسوب وقسم أنواع البيانات في لغة بايثون في توثيق موسوعة حسوب وكذلك صفحة أنواع البيانات في لغة PHP وصفحة أنواع البيانات الأساسية في لغة TypeScript وصفحة أنواع البيانات الأساسية في لغة كوتلن وغيرها، فكل لغة كما أشرنا تملك أنواع بيانات تحددها صراحة لما يترتب عليها لاحقًا من ضبط العمليات التي يمكن تنفيذها على كل نوع بيانات، فمثلًا الأعداد تطبق عليها عمليات رياضية من جمع وطرح وضرب والنصوص تطبق عليها عمليات القص والجمع مع نصوص أخرى والتنسيق وغيرها.

دورة تطوير التطبيقات باستخدام لغة Python

احترف تطوير التطبيقات مع أكاديمية حسوب والتحق بسوق العمل فور انتهائك من الدورة

اشترك الآن

وتنقسم لغات البرمجة في طريقة تحديد أنواع البيانات إلى قسمين إما بتحديدها صراحةً أثناء كتابة الشيفرة وتدعى آنذاك لغات برمجة صارمة في تحديد الأنواع Strongly typed language أو بترك الأمر للغة البرمجة لتحديدها أثناء تنفيذ الشيفرة وتدعى آنذاك لغات برمجة متهاونة في تحديد الأنواع Loosely typed language.

أما في لغات البرمجة التي تعد صارمة في تحديد الأنواع مثل لغة سي C وجافا Java، فهي تفرض على المبرمج تحديد نوع المتغير عند تعريفه أول مرة ويبقى هذا النوع ملازمًا له طيلة عمل البرنامج ولا يمكن تغييره مطلقًا ولا يمكن استعماله إلا في العمليات المرتبطة بنوعه المحدد وغيرها من القواعد الأخرى التي تختلف باختلاف اللغة، فالمثال التالي من لغة سي يعرِّف ثلاثة متغيرات الأول عدد صحيح والثاني عدد عشري والثالث محرف واحد:

int intNumber = 2;
float floatNumber = 2.3;
char character = 'e';

وإن لم يتبع المبرمج هذه القواعد فسيحصل على خطأ قبل تنفيذ الشيفرة وقت تصريفها (إن كانت اللغة مصرَّفة compiled مثلًا)، فستحصل على خطأ إن جربت جمع العدد الصحيح intNumber السابق مع الحرف character بالشكل intNumber + character مباشرةً وكذلك إن أردنا جمعه مع العدد العشري floatNumber وهنا يجب إجراء عملية تحويل صريحة للنوع انظر مثلًا:

int intNumber = 2;
float floatNumber = 2.3;
int sum = intNumber + (int)floatNumber;

printf("Value of sum : %d\n",sum);

عندما جمعنا العدد الصحيح intNumber مع العدد العشري floatNumber حولنا الأخير إلى عدد صحيح عبر تحديد النوع بين القوسين قبل المتغير ثم جمعنا العدد لنحصل على الناتج التالي:

Value of sum : 4

ولاحظ أن الفاصلة العشري قد أُهملَت بما فيها من أجزاء عشرية وهذا ناتج عملية التحويل.

تختلف لغات البرمجة أيضًا من ناحية التصريح والتلميح في عمليات التحويل بين الأنواع casting ففي التصريح يضطر المبرمج إلى ذكر النوع المراد التحويل إليه صراحةً وسيحصل على خطأ إن لم يفعل، وفي التلميح تكون اللغات ذكية في استنتاج النوع المراد التحويل إليه وتدعى smart casting فمثلًا إن جربت ما يلي في لغة سي:

int intNumber = 2;
float floatNumber = 2.3;
int sum = intNumber + floatNumber;

printf("Value of sum : %d\n",sum);

فستحصل على الناتج 4 كعدد صحيح لأن لغة سي مباشرةً حولت العدد العشري إلى صحيح بما أن المتغير الذي سنخزن فيه النتيجة من نوع عدد صحيح وكذلك العدد الأول عدد صحيح، أما إن جربنا ما يلي:

int intNumber = 2;
float floatNumber = 2.3;
float sum = intNumber + floatNumber;

printf("Value of sum : %f\n",sum);

فستحصل على ناتج 4.3 حتى لو كان العدد الأول صحيح إلا أن المتغير المراد تخزين القيمة فيه اختلف نوعه فاختلفت عملية التحويل الآلية وجرى تحويل العدد الصحيح إلى عدد عشري.

وأما في لغات البرمجة التي تعد متهاونة في تحديد النوع مثل جافاسكربت وبايثون ولغة PHP فلا حاجة لتحديد أنواع البيانات للمتغيرات ويكتفي المبرمج بالتصريح عن المتغير فقط دون نوعه، فانظر إلى المثال التالي في لغة جافاسكربت الذي يعرف المتغيرات الثلاثة كما في المثال السابق:

let intNumber = 2;
let floatNumber = 2.3;
let character = 'e';

سيُترك الأمر إلى لغة البرمجة لتحديد نوع المتغير أثناء وقت تنفيذ الشيفرة runtime لتحديد العمليات التي يمكن تنفيذها مع كل متغير وفق نوع، ولاحظ أنه يمكن لمتغير أخذ نوع عدد صحيح أن يأخذ نوع آخر مثل عدد عشري أو نص ولا يُعد ذلك خطأ:

let intNumber = 2;
intNumber = 'e';

وأما بخصوص عمليات التحويل بين الأنواع فهو أمر متروك كليًا إلى لغة البرمجة وذكائها، فإن جربنا الجمع بين العدد الصحيح والعشري كما فعلنا مع لغة سي الصارمة في تحديد الأنواع:

let intNumber = 2;
let floatNumber = 2.3;

let sum = intNumber + floatNumber;

console.log('Value of sum: ' + sum)

فسنحصل على النتيجة التالية:

Value of sum: 4.3

لاحظ أن عملية التحويل مالت إلى كفة العدد العشري ولاحظ أيضًا أننا جمعنا نصًا 'Value of sum: ‎' مع عدد sum أثناء طباعة النتيجة وكان الناتج نصًا ولم نحصل على خطأ بل اجتهدت لغة جافاسكربت في عملية التحويل ما يمكنها قبل أن تطلق أي خطأ للمبرمج، وقد شاعت الكثير من الدعابات بين المبرمجين حول عثرات لغة جافاسكربت تحديدًا في ضبط عملية التحويل بين أنواع البيانات بدقة.

وهذا الأمر يربك المبرمجين بعض الأحيان في اللغات المتهاونة في تحديد النوع لعدم معرفة نوع البيانات النهائي للعملية بالضبط، فتخيل مثلًا في تطبيق بنكي مبني بلغة متهاونة في ضبط النوع أو أن الأمر متروك للغة البرمجة لاستنتاج نوع البيانات أثناء وقت التنفيذ فيرسل مستخدمًا مبلغ 100.54 دولار لصديقه ليستلم الأخير مبلغ 100 فقط ويُعلل الأمر بأن لغة البرمجة قد أخطأت في عملية تحويل نوع البيانات لذا اختيار طريقة التعامل مع البيانات أمر مهم جدًا يعتمد على نوع التطبيق المراد العمل عليه!

في النهاية، المتغيرات في لغات البرمجة هي حاويات للبيانات التي تصنف إلى أنواع وقد تُحدد أحجام تلك الحاويات وفقًا لحجم البيانات المخزنة فيها تلقائيًا كما في اللغات المتهاونة في تحديد النوع أو وفقًا لنوع البيانات المحدد لها ويحصل خطأ إن تجاوزت البيانات الحجم المضبوط بنوع البيانات ذاك كما في اللغات الصارمة في تحديد النوع فمثلًا يأخذ متغير بنوع بيانات short حجم 2 بايت من الذاكرة لتخزين أعداد تتراوح بين القيمة ‎-32768 والقيمة 32767 فقط بينما يأخذ متغير من النوع bool حجم 1 بت فقط في لغة سي.

وأيًا كانت أنواع البيانات التي تُعرّفها لغات البرمجة المختلفة إلا أنها تشترك جميعها بأنواع بيانات عامة سنتحدث عنها بالتفصيل.

الأعداد الصحيحة

تعبّر الأعداد الصحيحة Integer عن البيانات بالأعداد الكاملة أي دون فواصل عشرية سواء كانت الأعداد موجبة أو سالبة مثل 5، 110-، 42345، وهكذا، وتُستخدم الأعداد الصحيحة لتمثيل مقادير مثل عدد الولادات في عام أو عدد مرات وقوع حدث معين أو الأرقام التسلسلية لمنتجات أو رقم جواز السفر وما شابه.

تمثل لغات البرمجة الأعداد الصحيحة ببايت واحد أو 2 بايت أو 4 بايتات، ويعود السبب في ذلك إلى حجم البيانات التي تريد تمثيله فإن أردت أن تمثل أعدادًا صحيحة من 0 إلى 100 مثلًا لا حاجة عندها لأربعة بايتات ويُكتفى ببايت واحد، أما إن احتجت إلى تخزين أرقام ضخمة ككتلة الأرض مثلًا فستحتاج إلى عدد صحيح من أربع بتات بالتأكيد. إليك بعض الأمثلة:

في اللغة C++/C:

// متغير حجمه أربعة بايتات ويخزّن فيه بيانات عددية صحيحة سالبة وموجبة
int a =0;

// متغير حجمه بايت واحد ويخزّن فيه بيانات عددية صحيحة موجبة وسالبة
int8_t a=0; 

// متغير حجمه بايتين ويخزّن فيه بيانات عددية صحيحة موجبة وسالبة
int16_t a=0; 

// متغير حجمه بايت واحد ويخزّن فيه بيانات صحيحة موجبة فقط
uint8_t a=0; 

في اللغة Java:

// متغير حجمه بايت واحد ويخزّن فيه بيانات عددية صحيحة موجبة وسالبة
byte x=0; 

// متغير حجمه بايتين ويخزّن فيه بيانات عددية صحيحة موجبة وسالبة
short x=0; 

// متغير حجمه أربعة بايتات ويخزّن فيه بيانات عددية صحيحة  موجبة وسالبة
int a=0; 

إذًا تختلف طريقة تمثيل الأعداد الصحيحة وفقًا للحجم المحجوز من الذاكرة من لغة إلى أخرى ويمكنك العودة إلى ويكيبيديا لتتعرف على طريقة تمثيل البيانات الصحيحة في أكثر اللغات انتشارًا.

الأعداد الحقيقية

تمثل الأعداد الحقيقية Real numbers جميع الأعداد الصحيحة والعشرية ذات الفاصلة الموجبة منها والسالبة مثل 2.56 أو 2341.234- وهكذا، وتُستخدم هذه الأعداد عند الحاجة إلى تخزين قراءات لمقادير فيزيائية مثل درجات الحرارة أو نواتج العمليات الحسابية المتنوعة كناتج عملية قسمة أو حساب الجذور التربيعية وما شابه.

تمثل لغات البرمجة الأعداد الحقيقية بكلمة ذات أربع بايتات 2³² عددًا أو كلمة ذات ثمان بايتات 2⁶⁴ عددًا، وتختلف تسمية الأعداد الحقيقية من لغة إلى أخرى. إليك بعض الأمثلة:

في اللغات #C++/Java/C:

// متغير حجمه أربعة بايتات ويخزّن فيه بيانات عددية حقيقية بإشارة
float a=0;

// متغير حجمه ثمان بايتات ويخزّن فيه بيانات عددية حقيقية بإشارة
double a=0;

الاختلاف بين نوع البيانات float ونوع البيانات double هو في دقة الأجزاء العشرية أي الأرقام المخزنة بعد الفاصلة العشرية، فالثاني هو عدد عشري مضاعف الدقة عن الأول.

البيانات المنطقية البوليانية

تمثل هذه البيانات إحدى القيمتين 0 أو 1 وتحجز بتًا واحدًا من الذاكرة، تُستخدم هذه البيانات لتخزين البيانات الناتجة عن أسئلة تحتمل فقط جوابًا بنعم/لا أو صح/خطأ، كأن تكون غرفة في فندق ما محجوزة أو هل اشترى عميل منتج معين أم لا وهكذا.

إليك بعض الأمثلة:

في لغة JAVA:

// متغير حجمه بت واحد ويخزّن فيه قيمة منطقية 0 أو 1
boolean a=1;

في لغة ++C:

// متغير حجمه بت واحد ويخزّن فيه قيمة منطقية 0 أو 1
bool a=0; 

المحارف والنصوص

تُمثّل هذه البيانات محرفًا واحدًا character كحرفٍ "ب" مثلًا أو رمزٍ "#" مثلًا أو علامة ترقيمٍ ":" مثلًا أو بعض المحارف الخاصة (لها استخدامات خاصة ولا تطبع على الشاشة كالمحارف التي تهيئ موقع الحركات في اللغة العربية)، وتُمثّل المحارف بكلمة من بايت أو بايتين أو ثلاثة أو أربعة وذلك وفقًا لطريقة الترميز. فترميز ASCII مؤلف من 128 أو 256 محرفًا أي يستخدم بايت واحد وقد وُسِّعت إلى الترميز الموحد UTF-8 الذي يستخدم من بايتين إلى أربعة بايتات ويرمز ملايين المحارف التي تغطي معظم الرموز والحروف في جميع اللغات المعروفة كما ظهرت توسيعات أخرى لمحارف ASCII مثل ISO وOEM وwindows125x وغيرها.

تتعامل مختلف لغات البرمجة مع المحارف وتعرفها بطرق مختلفة، وإليك بعض الأمثلة:

في لغات ++JAVA/C#/C:

// متغير يعبّر عن محرف واحد
char ch="#";

هذا بخصوص المحارف ولكن ماذا لو أردنا تخزين نص في متغير؟

النص String هو في الواقع سلسلة متلاحقة من المحارف أو مصفوفة من المحارف array of characters وبالتالي تُشتق الأنواع النصية انطلاقًا من المحارف وتتعامل معها انطلاقًا من العمليات على المحارف أيضًا، وتُعرف معظم اللغات هذا النوع بالاسم string. إليك مثالًا:

في لغة ++C:

#include <string> //إدراج المكتبة المعيارية الخاصة بالتعامل مع النصوص
using std::string // استخدام فضاء أسماء النوع النصي

int main(){
    string s1= "مرحبًا";
    sting  s2="أيها العالم";
    cout<< s1+s2;// "ستكون النتيجة "مرحبًا أيها العالم
    return 0;
}

انتبه إلى أنَّ لغة البرمجة قد تعامل المحرف معاملة النص وتدخله ضمن نوع النص String مثل لغة جافاسكربت وقد تميز اللغة بين المحرف Char وبين النص أو السلسلة النصة String كما في لغة جافا وسي.

أنواع البيانات مقابل هياكل البيانات

تُدعى الأنواع المدمجة في أي لغة بالأنواع الأساسية basic أو البدائية primitive ويمكنك استخدامها مباشرة في تعريف المتغيرات دون أية مقدمات فلغة جافاسكربت مثلًا التي تتصف بأنها متهاونة في تحديد أنواع البيانات تملك الأنواع الأساسية التالية:

• String: يمثل النصوص والسلاسل النصية.
• Boolean: يمثل القيم المنطقية مثل صح/خطأ.
• Number: يمثل الأعداد.
• BigInt: يمثل الأعداد الكبيرة جدًا.
• Undefined: يمثل عدم التعريف.
• Null: يمثل القيمة الفارغة أو عدم وجود قيمة.
• Symbol: يمثل الرموز الفريدة الخاصة.
• Object: يمثل هيكلة لتخزين البيانات.

ناقشنا بعض الأنواع السابقة في القسم السابق والتي قلنا أن أغلب لغات البرمجة تشترك فيها ولكن أريد التركيز على النوع الأخير Object فقد تطلق لغة البرمجة على طريقة وهيكلة محددة لتخزين البيانات بنوع بيانات وقد تكون من ضمن الأنواع الأساسية كما رأينا في لغة جافاسكربت التي هي عبارة عن طريقة تخزين بيانات على شكل مفتاح/قيمة key/value مثل:

const colorsObj = {
    black: '#000000',
    white: '#ffffff',
    red: '#ff0000',
    cyan: '#00ffff',
    pink: '#ffc0cb'
}

لاحظ أننا ربطنا اسم كل لون بقيمته الست عشرية والتي تمثِّل سلسلة نصية string ويمكننا الوصول إلى قيمة اللون الأسود مثلًا بالشكل colorsObj.black، ويمكن وضع أي نوع بيانات من الأنواع السابقة مكان النص.

ومن هذه الهيكلة تُشتق هياكل بيانات أخرى أشهرها على الإطلاق المصفوفات Arrays التي تمثل بالشكل التالي في جافاسكربت:

const colorsObj = [
    '#000000',
    '#ffffff',
    '#ff0000',
    '#00ffff',
    '#ffc0cb'
]

ستجد الكثير من أشكال هياكل البيانات ولا يسعنا في هذا المقال حصرها كلها ولكن وجبت الإشارة إليه بأنه وسيلة مهمة جدًا لتنظيم البيانات وهيكلتها وقد يعدها البعض نوعًا من أنواع البيانات إلا أنها عبارة عن حاويات تحوي البيانات وتسهل الوصول إليها.

اقتباس

إن أردت التعرف أكثر على لغة جافاسكربت، فانظر مقال أنواع البيات في لغة جافاسكربت، ويمكنك الإطلاع على دورة جافاسكربت من أكاديمية حسوب التي تشرح لغة جافاسكربت بالكامل وتعلم فيها بناء مختلف التطبيقات في ما يزيد عن 55 ساعة فيديو.

أنواع البيانات المستخدمة في قواعد البيانات

تحدد معظم قواعد البيانات -وهي برمجيات صممت لاحتواء البيانات وتنظيمها والتعامل معها- أنواع البيانات التي تخزّنها كي يسهل التعامل معها وتعديلها، وتستعمل قواعد البيانات جميع الأنواع التي تستخدمها لغات البرمجة أي:

• الأعداد الصحيحة integer.
• الأعداد العشرية (وهي أعداد حقيقية) ذات الفاصلة العائمة float.
• البيانات المنطقية (0 أو 1).
• المحارف character.
• القيم النصية string.

ويضاف إليها:

• المحارف متغيرة الطول varchar: وتمثل مجموعة محددة الطول من المحارف المتتابعة فعندما نحدد نوع أحد البيانات على أنه varchar(20)‎ أي أن العدد الكلي للمحارف في هذا المتغير هو 20 محرفًا.
• القيم الزمنية والتاريخ date-time: وتخزن بيانات تتعلق بالتاريخ (يوم:شهر:سنة) والوقت (ساعة:دقيقة).

إن كنت ستتخصص في قواعد البيانات وستعمل مع أحد أنظمة قواعد البيانات، فيمكنك آنذاك التحقق من توثيقات قاعدة البيانات التي ستستخدمها وما ستوفره من أنواع بيانات يمكن استخدامها، وعمومًا ننصحك بالاطلاع على مقال البيانات في SQL: أنواعها والقيود عليها وانظر أيضًا توثيق أنواع البيانات في لغة SQL العربي من موسوعة حسوب.

ملاحظة: تطور حاليًا ما يُدعى بقواعد البيانات الكائنية OODB التي تخزّن بياناتها على شكل كائنات بدلًا من الأنواع الأساسية التي تعرفنا عليها وستجد لنفسها قريبًا مكانًا في عالم البيانات الضخمة المتغير.

خاتمة

رأينا في هذا المقال أن الأساس المتين للمعرفة البشرية مبني على البيانات التي نستخلصها من بيئتنا المحيطة عند محاولة فهم أو توصيف أو تحليل ما يجري حولنا. لقد حُفظت البيانات على جدران الكهوف وعلى جلود الحيوانات وعلى الأوراق وفي الكتب وصولًا إلى الخوادم المخصصة التي تخزن كميات هائلة من أنواع البيانات وتساعد عبر إمكاناتها التقنية في معالجة هذه البيانات وإيجاد الروابط فيما بينها والحصول على معارف ورؤىً جديدة.

تحدثنا أيضًا عن طرق حيازة المعلومات وكيفية تصنيفها، وتعرفنا على الطريقة الرقمية في تخزين واسترجاع البيانات، وفصلنا الشرح في أنواع البيانات في لغات البرمجة وضربنا مختلف الأمثلة عليها لما لها من أهمية كبيرة في فهم أي لغة برمجة تريد أن تتعلمها.

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

اقرأ أيضًا

• تعلم البرمجة
• المدخل الشامل لتعلم علوم الحاسوب
• علم البيانات Data science: الدليل الشامل
• مفهوم علم البيانات Data Science
• المرجع الشامل إلى تعلم لغة بايثون

سنتعلم في هذا المقال كيفية إنشاء اختبار ذهني في الرياضيات يكون لدى اللاعب فيه 30 ثانية لإعطاء أكبر عدد ممكن من الإجابات الصحيحة.

لنحصل على نتيجة مشابهة لما يلي:

ستحتاج في هذا المشروع إلى:

• عتاد: جهاز حاسوب.
• برمجيات: برنامج سكراتش scratch الإصدار الثالث (إما نسخة سطح المكتب أو نسخة المتصفح).

كما يمكنك الحصول على المشروع كاملًا من ملف brain-game-solution.

ستتعلم في هذا المقال:

1. كيفية استخدام رسائل البث في سكراتش.
2. كيفية استخدام كتل المظاهر وتخصيصها.

إعداد الأسئلة

أولًا، افتح نسخة سطح المكتب من سكراتش،أو انتقل للعمل على المشروع في نسخة المتصفح.

ثانيًا، أضف كائنًا وخلفيةً من اختيارك، اخترنا في مثالنا الخلفية "Room 2" والكائن جيغا Giga.

ثالثًا، انقر على الكائن، ثم أضف متغيرين من قائمة المتغيرات لتخزين أعداد السؤال فيهما:

انقر على قائمة كتل المتغيرات، ثم انقر على خيار إنشاء متغير:

ثم سمِّ المتغير باسمٍ مناسب، "العدد الأول" مثلًا، واختر ما إذا كنت تريد جعله متاحًا للاستخدام في جميع الكائنات أم فقط في هذا الكائن.

سيظهر المتغير على المنصة، انقر عليه بالزر الأيمن للفأرة لتغيير طريقة عرضه أو إخفائه، كما يمكنك إخفاءه عن طريق إلغاء تحديده من قائمة كتل المتغيرات، ثم أنشئ متغيرًا آخر بنفس الطريقة وسمّه العدد الثاني.

سنستخدم كتلة توليد الأعداد عشوائيًا من كتل المتغيرات، والتي تولد أعدادًا عشوائيةً تلقائيًا، وذلك للحصول على رقم سؤال الاختبار تلقائيًا دون الحاجة لإدخاله.

رابعًا، أضف الكتلتين التالتين إلى الكائن جيغا الذي اخترته لإسناد قيمتين عشوائيتين للمتغيرات، وذلك بإضافة كتلة اجعل العدد مساويًا، ثم اسحب كتلة عدد عشوائي بين إليها من كتل المتغيرات:

خامسًا، أضف كتلةً لسؤال اللاعب عن الإجابة وأضف عليها كتلتي اربطمن كتل العمليات وضع فيهما متغير العدد الأول والثاني، وضع في المنتصف رمز العملية الحسابية التي تريد السؤال عنها:

ثم أضف كتلة إذا…. وإلا للتحقق من الإجابة، واختر كتلة العمليات المناسبة واسحبها إلى داخل شرط كتلة إذا ثم اسحب متغيري العدد الاول والثاني داخلها:

اجمع الكتل مع بعضها لتحصل على الكتل التالية:

سادسًا، ننصح باستخدام كتلة كرّر باستمرار، بحيث تستمر اللعبة في توليد أرقام عشوائية وتوليد الأسئلة للاعب. اسحب الكتل السابقة داخلها كما يلي:

اختبر المشروع، وأجب مرةً إجابة صحيحة على السؤال، ثم أجب إجابةً خاطئة،ما الرسالة التي تظهر لك على المنصة في كل مرة؟

إضافة مؤقت

سنضيف في هذه الخطوة عدادًا للوقت على المنصة باستخدام كتلالمتغيرات، بحيث يبدأ العد من 30 ثانية ويتناقص حتى ينتهي الوقت المتاح للإجابة.

أولًا، انقر على الخلفية التي اخترتها، ثم انقر على خيار إنشاء متغير من قائمة كتل المتغيرات وسمّه "الوقت" أو "مؤقت".

أضف الكتل التالية لجعل قيمة المتغير الابتدائية تساوي "30"، ثم تنقص قيمته تدريجيًا بمقدار 1 كل ثانية حتى تصل للصفر.

ثانيًا، أنشئ رسالة بث جديدة وسمِّها "النهاية"، ثم أضفها إلى كتل متغير الوقت لإرسال رسالة إلى جميع الكائنات لإعلامها بانتهاء الوقت.

ثالثًا، انقر على الكائن في مشروعك وأضف الكتل التالية لإيقاف عمل المقاطع البرمجية عند استلام رسالة "النهاية":

اختبر اللعبة، هل تستمر الأسئلة في الظهور حتى انتهاء الوقت؟

إضافة نتيجة

سنضيف في هذه الخطوة متغيرًا لتسجيل نقاط اللاعب بحيث يحصل اللاعب على نقطة عند كل إجابة صحيحة. تُعد هذه الخطوة اختياريًة، يمكنك تنفيذها أو تجاهلها، لكننا ننصح بتنفيذها لإضفاء روح التنافس على اللعبة.

أولًا، أنشئ متغيرًا، كما تعلمنا سابقًا، وسمّه النتيجة وأسند إليه القيمة 0 بإضافة الكتلة التالية تحت كتلة النقر على العلم الأخضر:

ثم أنشئ متغيرًا ثانيًا وسمّه أعلى نتيجة، وسيكون لديك المتغيرات التالية في المشروع:

ثانيًا، أضف الكتلتين التاليتين ليحصل اللاعب على نقطة عند الإجابة الصحيحة، وليخسر نقطةً عند الإجابة الخاطئة:

ثالثًا، أضف الكتل التالية، داخل كتلة كرر باستمرار للتحقق عند نهاية الاختبار ما إذا كانت نتيجة اللاعب الحالية أعلى من النتيجة العليا، عندها يعتمد البرنامج نتيجة اللاعب الحالية على أنها أعلى نتيجة:

يجب أن تبدو الكتل لديك كما يلي:

كما يمكنك إعادة تعيين نتيجة اللاعب إلى الصفر إذا أعطى إجابة خاطئة. فكّر في الكتل اللازمة لتحقيق ذلك. ويمكنك أيضًا جعل الكائن يتفاعل بتغيير مظهره عند الإجابة الصحيحة والخاطئة.

إضافة زر لبدء اللعبة

سنضيف في هذه الخطوة زرًا يتيح للاعب إعادة الاختبار عدة مرات.

أولًا، اختر أحد الأزرار من مكتبة الكائنات بكتابة "Button" في مربع البحث، ثم استخدم أداة النص في محرر الرسام لإضافة عبارة تصف عمله:

ثانيًا، أضف الكتل التالية إلى الزر:

لاحظ أن زر البدء سيظهر عند نقر العلم الأخضر، وسيختفي عندما ينقر اللاعب عليه ويبث رسالة "البداية" للكائنات الأخرى كي يتفاعلو معها. إذًا، يجب علينا تعديل الكتل البرمجية التي استخدمناها لتمكين ذلك.

ثالثًا، استبدل كتلة العلم الأخضر بكتلة عندما أتلقى البداية، كي يبدأ برنامجنا بالأسئلة عندما يتلقى أمرًا بذلك بعد النقر على زر البدء:

الآن، انقر على العلم الأخضر واختبر اللعبة. لاحظ أن الوقت يبدأ عند النقر على العلم الأخضر وليس عند النقر على زر البدء. استعن بالخطوة السابقة لحل هذه المشكلة.

رابعًا، أضف الكتل التالية على كائن الزر لجعله يظهر من جديد عند نهاية الاختبار:

ننصح بتقليل الوقت إلى بضع ثوان، لتسهيل اختبار اللعبة:

خامسًا، أضف الكتل التالية لتغيير شكل زر البدء عند وضع مؤشر الفأرة عليه:

بحيث يصبح شكل الزر على النحو التالي:

إضافة تأثيرات رسومية

سنضيف في هذه الخطوة مؤثرات رسوميةً خاصةً بالإجابة الصحيحة وأخرى خاصةً بالإجابة الخاطئة لإضفاء الحيوية على الاختبار.

أولًا، أضف كائن إشارة الصح من مكتبة الكائنات بكتابة "Button4" في مربع البحث، وسمّه النتيجة، ثم أضف عليه مظهر إشارة الخطأ بالبحث عن "Button5". أعد تسمية المظهرين كما يلي:

ثانيًا، عدِّل على الكتل البرمجية واستبدل كتلتي "قُل" بكتلتي "بُث" كما يلي:

ثالثًا، أضف الكتل التالية لكائن النتيجة لتظهر الإشارة المناسبة على المنصة عند الإجابة: كتل إشارة الصح:

وكتل إشارة الخطأ:

وعند النقر على العلم الأخضر:

رابعًا، اختبر اللعبة وتحقق من ظهور رمز الصح عند الإجابة الصحيحة ورمز الخطأ عند الخاطئة.

لاحظ أن الكتل الخاصة بالإجابة الصحيحة والخاطئة متشابهةٌ جدًا، لذلك سننشئ كتلةً خاصةً لتسهيل العمل.

خامسًا، انقر على كائن النتيجة، ثم انقر على كتل لبناتي من قائمة المقاطع البرمجية وانقر على خيار إنشاء لبنة، وسمِّ الكتلة الجديدة "مؤثرات":

اكتب اسم اللبنة الجديدة، ثم انقر على زر موافق:

لاحظ أنه ستظهر لك كتلة عرّف على الشاشة، وهي كتلةٌ ورديةٌ تشبه القبعة. إذا لم تجدها فانقر على زر تصغير الشاشة، أو اسحب شريط الشاشة نحو اليمين أو اليسار.

سادسًا، اسحب الكتل البرمجية ("اظهر" و"انتظر" و"اختف") أسفل الكتلة الجديدة كما يلي:

سابعًا، احذف كتلتي الإخفاء والإظهار وأبقِ على كتلة تغيير المظهر، ثم أضف كتلة المؤثرات، كما يلي:

لاحظ أنه بتخصيص كتلة المؤثرات واستخدامها قد وفّرنا عدد الخطوات اللازمة للتعديل على الكتل، فنكتفي بتعريفها مرةً واحدةً، ثم نذكرها مفردةً عندما نريد استخدامها. تحقق من ذلك بتعديل وقت الانتظار إلى ثانيتين. هل لاحظت عدد الخطوات اللازمة لذلك؟

ثامنًا، عدِّل على الكتل وأضف تأثيرًا لمظهري إشارة الصح والخطأ كما يلي:

ويمكنك التعديل على الكتل البرمجية وإضافة تأثيرات أخرى مختلفة عن التأثير الذي اخترناه.

ترقية المشروع

حان الآن وقت ترقية المشروع، إليك بعض الاقتراحات الممكن تنفيذها:

إضافة شاشة بداية

ما رأيك بإضافة خلفية تكون بمثابة شاشة بدء للعبة؟

لتنفيذ ذلك، يجب عليك إضافة خلفية جديدة واستخدام كتلتي عندما أتلقى البداية وعندما أتلقى النهاية للتبديل بين الخلفيات، ولا تنسى استخدام كتلتي الإخفاء والإظهار للكائنات عند التبديل بين الخلفيات، وكتل إظهار وإخفاء لمتغيري الوقت والنتيجة.

إليك الكتل المطلوبة:

كما يمكنك الإستعانة بالمشروع الكامل للإطلاع على الكتل اللازمة لتنفيذ ذلك.

إضافة مؤثرات صوتية

أضِف مؤثرات صوتية وموسيقى على الاختبار لزيادة حماس اللاعب، إليك بعض الاقتراحات الممكن تنفيذها:

• تشغيل صوتٍ خاص لكل من الإجابة الصحيحة والخاطئة.
• تشغيل صوت للمؤقت. -تشغيل صوت عند انتهاء الوقت المخصص للإجابة.

كما يمكنك تشغيل الموسيقى عند إجراء الاختبار بإضافة أحد كتل الأصوات على المنصة:

إضافة تحدي

يمكنك تعديل المشروع وإضافة تحدي بحيث يجب على اللاعب الإجابة على عشرة أسئلة بأسرع ما يمكن، بدلاً من الإجابة على أكبر عددٍ ممكن من الأسئلة خلال ثلاثين ثانية.

فكِّر، ما هي الكتل اللازمة لتنفيذ ذلك؟

إضافة إرشادات

يمكنك إضافة شاشة إرشادات لشرح كيفية عمل الاختبار للاعب، وذلك بإضافة زر للإرشادات، وخلفية جديدة، ولا تنسى إضافة زر "رجوع" كي يستطيع اللاعب العودة إلى شاشة البدء.

كما يمكنك الإطلاع على المشروع كاملًا من خلال ملف brain-game-solution.

خاتمة

تهانينا، فقد أتممت مشروع إنشاء اختبار ذهني باستخدام سكراتش.

ننصحك بتنفيذ مشروع برمجة لعبة متاهة باستخدام محرك يونيتي Unity في خطوتك التالية.

إذا واجهت مشاكلًا مع برنامج سكراتش، فيمكنك الحصول على الدعم والمساعدة عن طريق إضافة سؤالك في قسم الأسئلة والأجوبة في أكاديمية حسوب، ولا تنسى مشاركتنا مشروعك على مجتمع سكراتش في منصة حسوب IO.

ترجمة -وبتصرف- للمقال Brain Game من الموقع الرسمي لراسبيري باي.

اقرأ أيضًا

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

يصف هذا المقال ما يجري عند استعراض صفحة ويب على حاسوبك أو هاتفك المحمول بصورة مبسّطة، فقد لا تجد هذا الأمر بدايةً أمرًا أساسيًا لكي تكون قادرًا على كتابة شيفرة ويب، لكنك ستجني بسرعة فائدة معرفتك خفايا العملية.

الخوادم والعملاء

تُدعى الحواسب التي تتواصل على ويب بخوادم servers وعملاء clients، وإليك توضيحًا مبسّطًا عن طريقة تفاعلها:

• العميل: يُعرَّف تقليديًا بأنه جهاز متصل بويب مثل حاسوب عبر شبكة لاسلكية أو هاتف محمول عبر شبكة خلوية، بالإضافة إلى برنامجيات على هذه الأجهزة قادرة على الوصول إلى ويب مثل متصفحات ويب مثل كروم أو فايرفوكس عادةً.
• الخادم: هو حاسوب يخزِّن صفحات ومواقع وتطبيقات ويب. حيث يزوّد الخادم الجهاز العميل بنسخة عن صفحة ويب عندما يريد الوصول إليها ليتمكن من عرضها على متصفح المستخدِم.

تفاصيل أكثر

لن تكتمل القصة بمفهومَي الخادم والوكيل التي عرضناها قبل قليل، فهنالك الكثير من الأجزاء الأخرى التي سنناقشها تاليًا.

دعونا نتخيل الآن أنّ الويب هي طريق يقع العميل في طرفه الأول وليكن بيتك مثلًا ويقع الخادم في طرفه الآخر وليكن متجرًا تشتري منه حاجياتك على سبيل المثال.

عليك أن تتعرف على ما يلي بالإضافة إلى الخادم والعميل:

• الاتصال بالإنترنت: الذي يسمح لك بإرسال واستقبال البيانات من وإلى ويب، فهو تقريبًا مثل الشارع الذي يربط بيتك بالمتجر.
• بروتوكول TCP/IP: يُعَدّ بروتوكول التحكم بالنقل Transmission Control Protocol وبروتوكول الإنترنت Internet Protocol بروتوكلَي اتصال يحددان آلية نقل البيانات عبر الإنترنت، إذ يشابه هذان البروتوكولان وسيلة التنقل التي تتخذها لتنظيم رحلتك من منزلك إلى المتجر وشراء حاجياتك، فقد تكون في مثالنا سيارة أو دراجة أو أيّ شيء مماثل.
• خادم أسماء النطاقات Domain Name System أو DNS اختصارًا: يمكن تشبيهه بدفتر عناوين لمواقع ويب، فعندما تكتب عنوان موقع ويب في متصفحك، يبحث خادم DNS عن عنوان بروتوكول الإنترنت IP address الموافق للموقع قبل إحضاره، إذ يحتاج المتصفح لمعرفة الخادم الذي يستضيف الموقع المطلوب ليرسل رسائل HTTP إلى الوجهة الصحيحة، ويشبه الأمر في مثالنا البحث عن عنوان المتجر.
• بروتوكول HTTP: وهو بروتوكول نقل النص التشعبي Hypertext Transfer Protocol ويُعَدّ بروتوكولًا تطبيقيًا يُوصِّف لغةً بين الخادم والعميل ليتواصلا من خلاله، أي الأمر مشابه أيضًا للغة المحكية التي تتواصل بها لطلب حاجياتك من المتجر.
• الملفات المكوّنة للموقع: يتألف الموقع من ملفات مختلفة بصورة مشابهة للبضائع المختلفة التي تحتاجها من المتجر، وتأتي هذه الملفات ضمن صنفين أساسيين:
• ملفات شيفرة Code files: تُبنى مواقع ويب بصورة أساسية من ملفات HTML و CSS وجافاسكربت، كما ستتعرف لاحقًا على ملفات أخرى تخدم تقانات مختلفة.
• ملفات مساعدة أو الأصول Assets: تشمل كل الأشياء التي يتكوّن منها الموقع مثل الصور والموسيقى والفيديو والمستندات النصية وغيرها.

ما الذي يحدث عند طلب موقع ويب؟

إليك ما يحدث عندما تكتب عنوان موقع في شريط متصفحك، وهو أمر مماثل لانطلاقك نحو المتجر:

1. يتوجه المتصفح إلى خادم DNS ويجد العنوان الحقيقي للخادم الذي يستضيف هذا الموقع، أي مثل إيجاد العنوان المفصّل للمتجر.
2. يرسل المتصفح طلب HTTP إلى الخادم يسأله فيها إرسال نسخة عن موقع الويب إلى العميل، أي عندما تذهب إلى المتجر وتطلب حاجياتك، إذ تُرسل الطلبات وغيرها من البيانات بين العميل والخادم عبر اتصال الإنترنت من خلال بروتوكول TCP/IP.
3. سيرسل الخادم إذا وافق على طلب العميل رسالةً تحمل العدد 200 وتعني تمامًا أنه بإمكانك الاطلاع على هذا الموقع، إذ يبدأ الخادم بعدها بإرسال ملفات الموقع إلى المتصفح على أساس سلسلة من القطع تُدعى رزم البيانات، أي عندما يبدأ المشرف على المتجر بإعطائك البضائع التي طلبتها ثم تنقلها إلى منزلك.
4. يُجمِّع المتصفح حزم البيانات ضمن صفحة مكتملة ويعرضها لك مثل وصول حاجياتك كاملة إلى منزلك واستخدامها.

الترتيب الذي يستخدمه المتصفح في تفسير الملفات

عندما تطلب المتصفحات من الخوادم ملفات HTML، فستشير هذه الملفات من خلال العناصر <link> إلى ملفات CSS خارجية، ومن خلال العناصر <script> إلى ملفات جافاسكربت الخارجية، فمن المهم إذًا معرفة الترتيب الذي تفسر به المتصفحات ملفات موقع عندما تحمّله:

• يفسّر المتصفح ملف HTML أولًا، وبالتالي سيميّز العناصر <link> التي تشير إلى ملفات CSS الخارجية، كما يميّز العناصر <script> التي تشير إلى ملفات الشيفرة.
• يرسل المتصفح أثناء تفسير ملف HTML طلبات إلى الخوادم التي قد تستضيف ملفات CSS أو ملفات الشيفرة التي تشير إليها العناصر السابقة، ثم يفسّر هذه الملفات.
• يولّد المتصفح شجرة DOM مقيمة في الذاكرة انطلاقًا من ملف HTML الذي فسّره ومن ثم شجرة CSSOM بعد تفسير ملف CSS ثم يصرِّف وينفذ شيفرة جافاسكربت التي فسّرها.
• عندما يبني المتصفح شجرة DOM ويطبّق التنسيقات استنادًا إلى شجرة CSSOM وينفّذ شيفرة جافاسكربت، تُعرض الصفحة على الشاشة بعملية تُدعى الرسم paint ليراها المستخدِم ويكون قادرًا على التفاعل معها.

توضيح عن خادم أسماء النطاقات DNS

من الصعب تذكُّر عناوين ويب الحقيقية لأنها ليست عبارات نصية واضحة، وإنما هي أعداد خاصة تبدو مشابهةً للسلسلة 63.245.215.20، إذ تُدعى هذه السلسلة بعنوان بروتوكول الإنترنت IP address ويمثل موقعًا فريدًا على ويب، وطالما أنه من الصعب تذكر هذه العناوين، فقد اختُرعت خوادم أسماء النطاقات، وهي خوادم خاصة تربط عنوان موقع ويب الذي تدخله في شريط المتصفح مثل "hsoub.com" بعنوان بروتوكول الإنترنت الحقيقي له.

يمكن أيضًا الوصول إلى مواقع ويب من خلال عناوين بروتوكول الإنترنت، لكن عليك أن تحصل أولًا على هذا العنوان عن طريق بعض الأدوات مثل IP Checker.

توضيح عن رزم البيانات

استُخدم المصطلح رزم packets لوصف هيئة البيانات التي يرسلها الخادم إلى العميل، فما الذي نعنيه بالرزم هنا؟ عندما تُرسل البيانات عبر الويب فإنها تُرسَل عبر آلاف الأجزاء الصغيرة وذلك لأسباب كثيرة، فقد تُهمل هذه البيانات أو تتشوه أثناء نقلها ومن الأسهل استبدال قطعة صغيرة إذا حدث ذلك، إضافةً إلى هذا الأمر، فقد توجّه الرزم إلى مسارات مختلفة، مما يجعل تبادلها أسرع ويسمح لعدد كبير من المستخدِمين تنزيل الموقع نفسه في الوقت عينه، بينما إذا أُرسِل الموقع دفعةً واحدةً، فلن يتمكن سوى مستخدِم واحد من تنزيل الموقع كل مرة، مما يجعل الويب غير فعالة وغير مسليَة.

ترجمة -وبتصرف- للمقال How the web works.

اقرأ أيضًا

• كيف تعمل شبكة الإنترنت
• كيفية التعامل مع الويب
• المدخل الشامل لتعلم تطوير الويب

لغات البرمجة هو مفهوم واسع كبير يحتوي على أسماء عدة شتى قد يحتار فيها الداخل الجديد إلى مجال علوم الحاسوب لتعلم البرمجة، فقد يتساءل أي لغة برمجة يجب أن أتعلم أولًا، وما هي أشهر لغة برمجة تُستعمل على نطاق واسع استفيد منها، وما هي أسهل لغة برمجة ابدأ بها وغيرها من الأسئلة المحيرة، فإن فتحت مثلًا قائمة لغات البرمجة على ويكيبيديا فستجد عشرات لغات البرمجة المذكورة وهو ما يزيد المشكلة وهنا لابد من الاستعانة بدليل.

يقودك هذا المقال تدريجيًا في جولة سريعة في عالم لغات البرمجة كي تتكون لديك صورة عامة موسّعة عن لغات البرمجة لتكون عونًا لك إن كنت ستتعلم إحداها، وسينتقل بك المقال من شروحات مبسطة لمفهوم لغات البرمجة ومستويات لغة البرمجة وأقسامها إلى أنواعها واستخداماتها سواء لبرمجة الحواسيب أو الأجهزة الذكية أو الأجهزة الإلكترونية وحتى الروبوتات، ثم سنجاوب على بعض الأسئلة الشائعة المتعلقة بلغات البرمجة مثل التي أشرنا إليها قبل قليل في نهاية المقال.

ينبغي أن تكوّن في نهاية المقال فكرة واضحة عن ما يُدعى لغة برمجة ولغات البرمجة عمومًا تكون ركيزة صلبة تعتمد عليها في اختيار لغة البرمجة التي تناسب المجال الذي تخطط الدخول له إن أردت تطوير مسارك المهني ودخول عالم البرمجة.

إليك فهرس المقال لكي يسهل عليك التنقل بين أقسامه:

• تعريف البرمجة
• ما هي لغات البرمجة
• لغة البرمجة واللغات البشرية
• أنواع لغات البرمجة
• لغات برمجة السكربت Scripting Languages
• اللغات التوصيفية Markup Languages
• أسئلة شائعة عن لغات البرمجة

تعريف البرمجة

البرمجة هي العملية التي تستطيع بواسطتها إنجاز فكرة معينة أو حل مشكلة ما عن طريق تقسيم الفكرة أو المشكلة إلى خطوات متتالية قابلة لإعادة التكرار وصولًا إلى النتيجة المطلوبة. فلو سألت أحدهم ما هو ناتج العملية الرياضية التالية 5*(2-3) فقد يعطيك مباشرة الجواب 5 لكن ما فعله الدماغ هو عملية تحليل للمسألة ووضع طريقة لحلها وهذا ما يُدعى بوضع خوارزمية Algorithm. فخوارزمية حل المسألة البسيطة السابقة هي:

1. اطرح 2 من 3 وسجل الجواب: 1 =2-3.
2. احسب جداء الناتج مع العدد 5: 5x1.
3. قل الجواب: 5.

وخلاصة القول أن البرمجة هي طريقة لترتيب وتنظيم مسألة ما للحصول على النتيجة بالمعنى العام، أما في عالم الحواسيب فهي وسيلة للتخاطب مع هذه الأجهزة. أما الأسلوب المقترح لتنفيذ هذه الخطوات فهي الخوارزمية، وستكون عندها لغة البرمجة هي الوسيلة التي نخبر فيها الحاسوب أو التجهيزة كيفية تنفيذ الخوارزمية لحل المشكلة المعروضة.

ما هي لغات البرمجة؟

لغات البرمجة تشير ببساطة على أنها وسيلة للتواصل بين البشر والحواسب أو بعض التجهيزات أو الآلات المهيأة لتنفيذ برامج متغيرة والتي تُدعى تجهيزات قابلة للبرمجة. ونظرًا للتقدم التكنولوجي الهائل ودخول تقنيات المعلومات إلى مختلف نواحي الحياة، ازداد توجه الصانعين إلى إنتاج تجهيزات قادرة على التخاطب والتفاعل مع المستخدم لتنفيذ وظائف متعددة كالصرافات الآلية ونقاط الخدمة الذاتية والهواتف الذكية وحتى التجهيزات المنزلية والسيارات، وكلما زاد تعقيد هذه التجهيزات وتعددت مهامها احتاجت إلى طريقة فعّالة لتخبرها بما هو مطلوب منها. وهنا تأتي أهمية لغات البرمجة وضرورة وجود أنواع مختلفة من لغات البرمجة وفق سويات مختلفة لتأمين إدارة تلك التجهيزات والتواصل الأمثل معها.

إذًا فلغة البرمجة هي مجموعة من التعليمات والتوجيهات التي تكتب أو تُجمّع أو تُركّب ضمن سياق معين كي تنقل بعد معالجتها إلى الجهاز الهدف بغية تنفيذها.

ويُقصد بمعالجة لغات البرمجة هو تحويلها من تعليمات مقروءة -في لغات البرمجة المكتوبة Written Programming Languages- أو مرئية بالنسبة للبشر -في لغات البرمجة المرئية Visual programing languages- إلى توجيهات تفهمها الآلة المستهدفة سواء حاسوب أو أية أنظمة إلكترونية أخرى. فما يفهمه الحاسوب هو برنامج مكوّن من الواحدات 1 والأصفار 0 التي تخبره وفقًا لتسلسلها بطريقة محددة سلفًا ما عليه فعله، وتعرف لغة البرمجة التي تُكتب برنامجًا بهذه الطريقة "لغة الآلة" machine language. ونظرًا لصعوبة فهمها للبشر، ظهرت الحاجة إلى لغات برمجة أكثر قربًا من البشر وهنا بدأت الحكاية.

تتكون لغة البرمجة -مثلها مثل أي لغة- عمومًا من الأقسام التالية:

صياغة لغة البرمجة Syntax

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

• نصية: وتمثل تعليمات اللغة وكلماتها المفتاحية keywords وعباراتها ومتنها.
• رسومية أو كتلية: تُنظَّم فيها التعليمات التي تؤدي عملًا محددًا ضمن كتلة واحدة، ثم تُمثَّل هذه الكتلة بطريقة مرئية كمربع أو دائرة تُعطى لونا واسمًا يدل على طبيعة العمل الذي تنفذه. ويبنى البرنامج عندها بضم هذه الكتل إلى بعضها لإنجاز الوظيفة المنوطة بالبرنامج.

تعطي الصياغة إذًا الشكل العام الصحيح لطريقة كتابة التعليمات بناء على معايير خاصة خارج نطاق مقالنا، وإن أردنا تقريب الأمر فهي بمثابة القواعد النحوية للغات البشر أو اللغات الطبيعية. إذ تُعد مثلًا الجملة "إن المبرمجون مبدعون." في اللغة العربية خاطئة الصياغة لمخالفتها قواعد اللغة ومن المفترض أن نقول" إن المبرمجين مبدعون.".

دلالة لغة البرمجة Semantic

هي مجموعة قواعد تحدد ما إن كانت طريقة صياغة التعليمات ستعطي النتيجة المرجوة أم لا، وتضع بعض القيود على الصياغة الصحيحة التي قد لا تؤدي إلى نتيجة. لن نخوض كثيرًا في هذه الفكرة لكن سنسهل الأمر عليك عزيزي القارئ: لن تمنعنا أية قاعدة نحوية في اللغة العربية من القول بأنني "أتناول برتقالًا حامضًا لا طعم له" لكن كيف يكون حامضًا ولا طعم له في نفس الوقت! صياغة صحيحة ومدلول لا معنى له.

تحديد الأنواع في لغة البرمجة Types

وهي الطريقة التي تصنّف فيها لغة البرمجة القيم والتعابير ضمن أنواع مختلفة وكيفية التعامل مع هذه الأنواع والتحويل فيما بينها. فهنالك مثلًا قيم نصية كأن استخدم القيمة "انقر هنا" وقيم عددية كأن استخدم الرقم 5 وقيم منطقية كأن استخدم القيمة "صحيح" true. وقد تكون نتيجة تنفيذ العملية نوعًا محددًا من البيانات كأن تُنتج العملية الحسابية عددًا أو تنتج نصًا. لهذا تحاول معظم اللغات وضع أنواع للقيم التي تتعامل معها. لكن في المقابل ستجد عدة لغات لا تعتمد على الأنواع مثل جافاسكربت JavaScript وماتلاب MatLab.

إن وجدت هذا الفكرة غامضة قليلًا لا تكترث وتابع القراءة فستبدو هذه الفكرة غاية الوضوح ما أن تكتب برنامجك الأول في لغة تختارها.

المكتبات المعيارية Standard Libraries

وهي مجموعة من التعليمات أو العمليات الجاهزة التي توفرها لغة البرمجة لعمل مختلف أجزائها مع بعضها ولتنفيذ المهام الأساسية المنوطة بلغة البرمجة تلك مثل التعامل مع النصوص والأعداد والتواصل مع نظام التشغيل ونظام الملفات وغيرها، وتوضع عادة في ملفات منفصلة وتضاف إلى البرنامج الذي تُنفّذه. إذ تساعدك بعض المكتبات مثلًا على إضافة نصٍ إلى نص آخر مباشرة باستخدام إشارة الجمع + على الرغم من كونها عملية حسابية تجري على الأعداد. إذ تضم تلك المكتبات القدرة على فهم أن هذه العملية هنا ليست لجمع عددين بل لضم نصين.

تصنّف لغات البرمجة في فئات ومجموعات وفقًا لصياغتها وطريقة معالجتها للمعلومات وطريقة تنفيذ تعليمات لغة البرمجة وهذا ما سنتوسع فيه بعد قليل.

لغة البرمجة واللغات البشرية

إنّ اللغات البشرية هي الطريقة الطبيعية للتواصل بين البشر وتتكون من حروف تكوّن كلمات ومن ثم تشكل جملًا وفق مجموعة من القواعد التي ندعوها في العربية "نحوًا" ومن ثم نستخدم هذه الجمل بعناية لإيصال المعنى المطلوب. ويُفترض بالإنسان أن يُلم بأساسيات لغة الشخص الذي يحاوره كي لا تقع مشاكل في التواصل. الأمر مشابه في لغات البرمجة كونها لغة للتخاطب بين البشر والحواسيب أو الآلات التي تقبل البرمجة عمومًا.

إضافة إلى ذلك، للغات الطبيعية ولغات البرمجة نوع من الهيكلية أو البنية التي تنتظم وفقها تلك اللغات، فالكلمات في اللغات الطبيعية قد تشابه التعليمات في لغة البرمجة والجمل sentences قد تشابه التعابير البرمجية Expressions، وتستخدم لغات البرمجة ما تستخدمه اللغات الطبيعية من علامات للترقيم لكن لأغراض خاصة بوظيفتها، وتستخدم عوامل تشابه حروف العطف والاختيار والموازنة في اللغات الطبيعية للربط بين التعابير البرمجية واستخلاص المعنى، فلهذه اللغات جميعها أساليب في الصياغة والمدلول. ومن أوجه الشبه أيضًا ما يُدعى بالعائلات، فاللغات الطبيعية تنحدر من عائلات تتشابه اللغات فيها كاللغات السامية أو اللغات الجرمانية أو السلافية. كذلك الأمر في لغات البرمجة التي تنحدر جميعها من لغات ظهرت في البداية مثل Fortran التي انحدرت منها Algol ثم C و ++C إذ تتشابه هاتين الأخيرتين كثيرًا.

أما الاختلافات فتأتي من كون التعليمات في لغات البرمجة معدة سلفًا وقابلة للحصر حتى إن تطورت سيكون التطور بإلغاء تعليمة ووضع أخرى بينما تتطور اللغات الطبيعية وفقًا للحاجة ويظهر ذلك تلقائيًا. كذلك يظهر الاختلاف في عدم قدرة لغات البرمجة على التعبير بطرح أسئلة أو استخدام الإيحاءات بل تعتمد على مجموعة قواعد صارمة فيما يخص الصياغة وطريقة استخدام اللغة.

تأتي أهمية هذا النقاش من ضرورة الفهم الأصيل للغات البشرية ولغات البرمجة لما سيقود ذلك من تطور في مجال البرمجيات التي تتعرف على الكلام أو المترجمات الآلية أو الذكاء الاصطناعي وغيرها الكثير.

دورة الذكاء الاصطناعي

احترف برمجة الذكاء الاصطناعي AI وتحليل البيانات وتعلم كافة المعلومات التي تحتاجها لبناء نماذج ذكاء اصطناعي متخصصة.

اشترك الآن

أنواع لغات البرمجة

هنالك المئات من لغات البرمجة وجدت لتحقيق أهداف مختلفة وحتى هذه اللحظة تظهر لغات برمجة جديدة باستمرار، لذا تصنف هذه اللغات إلى أنواع عدة بالاعتماد على وظائف كل لغة وتطبيقاتها وطريقة معالجتها وغيرها من المقاييس ونوضح في الصورة التالية بعض الأنواع أو الفئات التي تنضوي تحتها لغات البرمجة.

أنواع لغات البرمجة الشائعة هي تنقسم إلى الأنواع التالية:

• أنواع لغات البرمجة وفق مستوى الترميز
  • لغات البرمجة منخفضة المستوى Low level Programming Languages 
  • لغة الآلة Machine language
  • لغات التجميع Assembly languages
  • لغات البرمجة عالية المستوى High level languages
• أنواع لغات البرمجة وفق طريقة معالجة التعليمات
  • اللغات المُصرَّفة Compiled Languages
  • اللغات المُفسَّرة Interpreted languages
  • اللغات الهجينة المصرّفة المفسّرة
• أنواع لغات البرمجة وفق أسلوب تنظيم الشيفرة
  • لغات البرمجة الوظيفية Functional Programming
  • لغات البرمجة الإجرائية Procedural Programming
  • لغات البرمجة الكائنية Object-oriented Programming
• أنواع لغات البرمجة وفق مجالات الاستخدام
  • لغات البرمجة عامة الغرض General Purpose programming Languages
  • لغات البرمجة خاصة الغرض Special Programming Languages

شرح كل الأنواع السابقة سيطيل المقال وهو خارج موضوع التعريف بلغات البرمجة ويكفي أن تأخذ فكرة على أنواع لغات البرمجة وتتعرف على أشهر أصنافها لأنك عادة عندما تتعلم لغة برمجة يفترض أن تعرف نوعها والصنف الذي تتبع له لأن الأنواع الواحدة تشترك بمفاهيم واحدة تقريبًا يمكن تعلمها بشكل منفصل.

ويمكنك الرجوع إلى مقال أنواع لغات البرمجة لتكتشف المزيد من التفاصيل حول معايير وطرق تصنيف وتنظيم لغات البرمجة وشرح مفصل لكل الأنواع التي ذكرناها بالأعلى.

لغات برمجة السكربت

تُعد لغة برمجة ما أنها لغة سكربت إن كانت:

• تستخدم مجموعة من التعليمات النصية المكتوبة لتنفيذ أي نوع من العمليات.
• تعتمد على مضيف: إذ لا يمكن أن تُنتج برامجًا تنفيذية قائمة بحد ذاتها بل ترتبط بنظام تشغيل مثل (سكربتات الطرفيات) أو بيئة عمل (سكربت ويب على الخادم) أو برنامج ( سكربت كتابة ماكرو أو موسّع) أو لغة برمجة أخرى لتنفيذ مجموعة من العمليات التي تهدف إلى تعديل أو تطوير أو زيادة القدرة الوظيفية للمضيف أو تتوسط بينها وبين منظومات أخرى ليشار إليها عندها إلى أنها لغات صمغية glue code.
• أن تكون لغة مفسّرة وليست مُصرَّفة.

تتميز لغات السكربت بكونها، مفتوحة المصدر غالبًا، وسهلة التعليم نسبيًا ولا ضرورة لوجودها ضمن ملف خاص كي تُفسّر، ولا يمكن كتابة تطبيقات أو برامج باستخدامها مباشرة بل تحتاج إلى مضيف لذلك يُقال أنها محمولة.

أضف إلى ذلك أنها سريعة التنفيذ كونها تستطيع تنفيذ الطلبات مباشرة (تنفيذ أمر مباشرة) دون الحاجة إلى تعليمات أخرى لتفعيل الطلب كما يزيد سرعتها كونها لغة برمجة مفسّرة. يمكنك مثلًا أن تُنفّذ الأمر ('مرحبًا')window.alert مباشرة في جافاسكربت وهي لغة سكربت مشهورة جدًا، لكنك لن تستطيع فعل ذلك باستخدام لغة ++C. لاحظ ماذا سيتطلب الأمر:

// لنقول مرحبًا C++ برنامج بلغة 
#include <iostream>
using namespace std;
int main(){
  cout<<"مرحبًا";
  return 0;
}

تُصنف لغات برمجة السكربت إلى:

• سكربتات تطوير الويب: وتستخدم لكتابة صفحات ويب ديناميكية وتطوير مواقع وتطبيقات الويب، ويمكن أن نميز بين نوعين من السكربتات في هذه الصدد

• سكربتات تعمل من جانب العميل (أي تُستخدم في بناء الواجهة الأمامية للتطبيق أو الموقع) نجد:

  • JavaScript
  • React
  • Next.js

• سكربتات تعمل من جانب الخادم (أي تستخدم لبناء الواجهة الخلفية للتطبيق، وهي ما يستعرضه المتصفح) نجد منها:

  • JavaScript
  • PHP
  • Node.js
  • ASP.net
  • Ruby
  • Perl
  • Python

• سكربتات تعمل مع طرفيات أنظمة التشغيل: وتستخدم لتنفيذ الأوامر ضمن واجهات سطر الأوامر في أنظمة التشغيل المختلفة مثل ويندوز ولينكس. من الأمثلة عليها:

• BASH: في طرفيات لينكس، وتنفذ طيفًا واسعًا من التعليمات مثل الكتابة والقراءة من وإلى الملفات وتنزيل البرمجيات من الإنترنت وتثبيتها وتشغيل البرمجيات وغيرها الكثير.

• Windows powerShell: في ويندوز، وتنفذ مهامًا مشابهة لما تنفذه طرفية لينكس.

• سكربتات للأغراض العامة: يمكن أن تُنفذ تقريبًا أي شيء نذكر منها:

• Ruby

• Python

يمكن استخدام السكربتات في كل المجالات تقريبًا مثل تطبيقات الويب وتطبيقات الهواتف المحمولة وسطح المكتب والتعامل مع الأنظمة وأتمتة المهام على المنظومات السحابية والتنقيب عن البيانات وبرمجة الموّسعات والإضافات إلى البرامج وغيرها الكثير.

اللغات التوصيفية Markup Languages

يشير مصطلح اللغات التوصيفية markup languages إلى آلية لترميز النصوص عن طريق إضافة مجموعة من الرموز إلى النص تتحكم بتنسيقه أو بإيجاد علاقات بين أقسامه وتسهل عملية أتمتته. إذ تضم اللغات التوصيفية مجموعة من الوسوم أو القواعد التي يشير كل منها إلى دلالة معينة وتستخدم لتنظيم البيانات النصية وعرضها بطريقة يسهل تمييزها بالنسبة للإنسان أو الحاسوب كأن تشير إلى عبارة على أنها عنوان وتبرز عبارة أخرى بكتابتها بخط ثخين وهكذا. لا تُعرض تلك القواعد أو الوسوم ولا تُضاف إلى المحتوى الفعلي بل وظيفتها وصف البيانات فقط وترتيبها. تتطلب هذه اللغات فقط برنامجًا ليحلل الوسوم ويعرض المحتوى وفقًا لمدلول كل وسم وغالبًا ما تحلل المتصفحات أكواد HTML وأكواد XML ثم تعرض النتائج بينما تحلل برمجيات أخرى مخصصة لغات توصيفية أخرى مثل Markdown و DocBook اللتان تستخدمان في المحررات النصية ولاتخ LaTex لكتابة الأوراق البحثية الأكاديمية وغيرها الكثير.

لا تحتاج اللغات التوصيفية كلغات البرمجة إلى تصريف Compilation أو تفسير Interpretation كي تحول الشيفرة المكتوبة إلى مجموعة أخرى من التعليمات التي يفهمها الحاسوب، فهي لا تنفذ أية عمليات أو إجرائيات لذلك لا تُعد اللغات التوصيفية لغات برمجة. فكل ما تفعله محللات اللغات التوصيفية هو قراءة الوسوم ومعرفة بدايتها ونهايتها ثم عرض هذه الوسوم بالطريقة الصحيحة تبعًا لدلالة تلك الوسوم.

يمكن استخدام هذه اللغات لتصميم صفحات ويب مثل HTML أو لتنسيق صفحات الويب مثل CSS أو لتخزين البيانات مثل XML أو لتنسيق النصوص مثل Markdown وغيرها الكثير.

تشرح دورة تطوير واجهات المستخدم من أكاديمية حسوب كل من لغات تطوير واجهات المستخدم الأمامية وهي HTML و CSS وجافاسكربت شرحًا شاملًا بعدد ساعات يزيد عن 50 ساعة فيديو بتطبيقات عملية تطبيقية تناسب سوق العمل.

يمكنك الرجوع في هذا الصدد إلى مقال تعلم لغة HTML الذي يتحدث عن اللغات التوصيفية عمومًا ولغة HTML خصوصًا.

أسئلة شائعة عن لغات البرمجة

إليك بعض الإجابات عن أكثر الأسئلة شيوعًا حول لغات البرمجة.

كم عدد لغات البرمجة الموجودة حاليًا؟

عدد لغات البرمجة وفقًا لموقع ويكيبيديا يقارب 700 لغة برمجة مستخدمة أو توقف استخدامها باستثناء اللغات التوصيفية. لكن يرى البعض أنها قد تصل بجميع تصنيفاتها إلى 8000-9000 وهذا رقم مبالغ فيه قليلًا.

ما السبب في وجود عدد كبير من لغات البرمجة؟

التنوع نابع عن الحاجة، فلن تتمتع لغة برمجة واحدة بجميع المزايا التي تسهّل العمل في جميع المجالات بفعالية ودقة. قد يكون الأمر مشابهًا لوجود أنواع عدة من المركبات منها السيارة والطائرة والدراجة الهوائية والنارية فلكل استخدامه، إذ يولّد التطور التقني المتسارع الحاجة إلى وجود لغات أكثر مرونة وفعالية في مجالات مختلفة مما يدفع إلى تطوير لغات جديدة تلبي هذه الحاجة.

ما هي أحدث لغات البرمجة؟

إذا استثنينا الإصدارات الجديدة من اللغات القديمة مثل الإصدار 3 من لغة Python يمكن أن نجد:

• لغات البرمجة بالدوال:
• ELIXIR
• ELM
• PURESCRIPT
• SWIFT
• لغات البرمجة الإجرائية:
• Go
• لغات البرمجة بالكائنات:
• DART
• PONY
• CARBON
• لغات أغراض عامة:
• HACK
• Kotlin
• NIM
• RUST

ما هي لغات البرمجة السائدة (أشهر لغات البرمجة)؟

إليك أكثر لغات البرمجة استخدامًا وأشهر لغات البرمجة لكن دون نسب مئوية للاستخدام ودون أفضلية لعدم وجود إحصائيات دقيقة وموثوقة.

• Python
• JavaScript
• JAVA
• C++/C
• GO
• Ruby
• #C
• PHP

أشهر لغة من بينها تُستعمل في بناء تطبيقات سطح مكتب تعمل على مختلف أنظمة التشغيل الحاسوبية هي لغة جافا Java وبايثون Python والأخيرة تستعمل في مجال الذكاء الاصطناعي وتعلم الآلة والتعامل مع البيانات وغيرها، أما في مجال الويب، فأشهر لغة فيه حاليًا هي لغة جافاسكربت JavaScript فيمكنك باستعمالها تطوير الواجهات الأمامية Frontend وأصبح بإمكانك أيضًا تطوير الواجهات الخلفية Backend عبر بيئة Node.js وكما يمكنك باستعمال تقنيات الويب تطوير تطبيقات لسطح المكتب تعمل على كل أنظمة التشغيل باستعمال إطار العمل Electron.js، وتعد دورة تطوير التطبيقات باستخدام لغة JavaScript أفضل مرجع عربي يشرح لغة جافاسكربت وكافة تطبيقاتها لبناء تطبيقات الويب وتطبيقات سطح المكتب شرحًا عمليًا.

ما هي أسهل لغات البرمجة من حيث التعلم والاستخدام؟

لا يمكن أن نجد إجابة محددة عن سؤال أسهل لغات البرمجة فالغرض من استخدامك للغة البرمجة وتآلفك معها مسألة حاجة ورغبة:

• PHP
• Python
• JavaScript
• Ruby
• C/C++/JAVA
• Kotlin
• Swift

عمومًا، يقال عن لغة بايثون أنها أسهل لغة برمجة يمكن البدء بتعلمها والسبب أنها صياغة اللغة قريبة جدًا من صياغة اللغة الإنجليزية فعندما تكتب شيفرة برمجية كأنك تصيغ فقرة من لغة إنجليزية وهذا ما يميزها عن بقية اللغات التي تكثر فيها الأحرف والكلمات الغامضة وعلامات الترقيم والأقواس المتناثرة هنا وهناك، ولهذا السبب تبدأ أغلب الجامعات بشرح هذه اللغة كأول لغة برمجة لطلاب علوم الحاسوب وتبدأ أغلب الدورات والكورسات البرمجة بشرحها لمن يريد تعلم البرمجة بمفرده، وأفضل مرجع عربي شامل متكامل من تلك الدورات هي دورة تطوير التطبيقات باستخدام لغة Python من أكاديمية حسوب.

هل عليَّ تعلم لغة برمجة؟

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

ما الفائدة من تعلم لغة برمجة؟

1. تطوير مسيرتك المهنية، فكل الدلائل تشير إلى أننا مقبلون وبشدة على عصر الآلات الذكية.
2. الاطلاع على الطريقة التي تعمل بها الآلات المبرمجة مما قد يساعدك على استخدامها بالشكل الصحيح.
3. تحسين قدراتك العقلية على التحليل وترتيب الأفكار.

إضافة إلى تلك الأسباب العامة، ستجد من مهنة المبرمج أو مطور ويب مهنة ممتعة ومجزية ماديًا فالطلب يزداد بشكل كبير على المنتجات الرقمية وتتنوع مجالات استخداماتها لما تقدمه من فوائد على جميع الأصعدة مثل أتمتة المهام المختلفة وتحليل البيانات والحسابات الرياضية والتقنية المتقدمة وإدارة المتاجر الإلكترونية والأعمال وغير ذلك الكثير. فالبرمجة هي مهنة المستقبل بامتياز، وأيًا كانت مهنتك الأصلية ستجد البرمجة سبيلًا إليها، وهكذا ستجني فائدة مضاعفة بتعلمك إحدى لغات البرمجة.

هل من الصعب تعلم لغة برمجة؟

الجواب لا إن كنت تمتلك الإرادة والمثابرة. تعلم البرمجة شبيه بركوب الدراجة ما أن تُصِرَّ على تعلمها ثم تتعلم كيف تستخدمها لن تنسى أبدًا كيف ستقودها وكذلك لن تنسى كيف تفكر برمجيًا. لكن إن أردت أن تصبح محترفًا، فهذا طريق طويل تعترضك فيه بعض الصعوبات.

ما هي مجالات استخدام لغات البرمجة؟

من كتابة كلمة "مرحبًا" على شاشة حاسوبك إلى التحكم بمسبار فضائي يحط على كوكب آخر. فكل ما تعرضه لك الأجهزة الإلكترونية من بسيطها إلى أعقدها هي نتاج عملية برمجة لهذه الأجهزة. ويمكن تلخيص استخدامات لغات البرمجة وفق الخطوط العريضة التالية:

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

خاتمة

تعرفنا في هذه المقال على لغات البرمجة التي نستخدمها في برمجة الحواسب والأجهزة الإلكترونية الذكية أو القابلة للبرمجة واستعرضنا الخطوط العامة لمكوّنات أي لغة برمجة ثم فصلنا في أنواعها وقلنا أنها قد تكون عامة الغرض أو مخصصة من ناحية الاستخدام أو لغات مكتوبة أو مرئية من ناحية إظهار الشيفرة وأنها مفسّرة أو مصرّفة من ناحية معالجة المعلومات. كما ذكرنا أن لغات البرمجة التي تقترب تعليماتها وظيفيًا من التعليمات التي يفهمها الحاسوب هي لغات منخفضة المستوى ويزداد مستواها باستخدامها تعليمات تنفذ وظائف أكبر من تعليمات الحاسوب الأساسية. ومررنا أخيرًا على مفهوم لغات السكربت واستخداماتها بشيء من التفصيل، وعلى مفهوم اللغات التوصيفية واختلافها عن لغات البرمجة.

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

اقرأ أيضًا

• المدخل الشامل لتعلم علوم الحاسوب
• كيف تتعلم البرمجة
• فوائد تعلم البرمجة
• دليلك إلى: لغات برمجة الألعاب
• المدخل الشامل لتعلم تطوير الويب وبرمجة المواقع
• المرجع الشامل إلى تعلم لغة بايثون
• البرمجة بلغة جافاسكربت
• مقارنة بين JavaScript و TypeScript
• مقارنة بين PHP و NodeJS

من الأمور الأساسية التي يجب توضيحها فيما يخص البرمجة، هو فائدتها في وقتنا الحالي؛ فبصرف النظر عن المجال الذي تدرسه أو تعمل به، لا يمكن أن نغفل أن البرمجة بشكل أو بآخر دخلت في معظم المجالات إن لم يكن جميعها، وبالتالي فإن تعلم البرمجة أصبح ضرورةً ملحّةً حتى تتمكن من التألق في عملك، وتكتسب الفرصة لدخول سوق العمل الواسع الخاص بالبرمجة.

لتعلم أساسيات هذا المجال وباحترافية، يمكنك الانضمام إلى دورة علوم الحاسوب المقدمة من أكاديمية حسوب والانطلاق بتوسيع فرصك بالعمل في السوق الحالي، ولا تنسَ الاستعانة خلال رحلة تعلمك وعملك الاستعانة بالتوثيقات المجانية الخاصة بمجال البرمجة ولغاتها على موسوعة حسوب.

يتألف موقع ويب من ملفات عدة منها ملفات المحتوى وملفات الشيفرة وملفات التنسيق والوسائط المتعددة وغيرها، فعندما تبني موقعك، عليك تجميع هذه الملفات ضمن هيكلية معقولة على حاسوبك، والتأكد من أنها قادرة على التواصل مع بعضها وأنّ كل شيء يبدو على ما يرام قبل أن ترفع هذه الملفات إلى الخادم، إذ سيناقش هذا المقال بعض الأمور التي ينبغي الانتباه إليها لكي تنظم ملفاتك ضمن هيكلية واضحة لتكوين موقعك.

مكان تجميع موقع ويب على حاسوبك

عندما تشرع في بناء موقع ويب على حاسوبك، لا بد أن تُبقي كل الملفات المرتبطة به ضمن مجلد واحد يحاكي في تنظيمه تنظيم الملفات ضمن موقع الويب عندما تنشره، كما يمكنك اختيار أيّ مكان ضمن حاسوبك لوضع هذا المجلد شرط أن يكون إيجاده سهلًا مثل سطح المكتب أو في المجلد الرئيسي Home أو ضمن المجلد الجذري للقرص الصلب.

1. اختر مكانًا لتخزِّن ضمنه مشروع موقع الويب، ثم انشئ مجلدًا جديدًا في هذا المكان وسمِّه web-projects أو ما شابه، إذ سيكون هذا المجلد المكان الذي تخزّن فيه جميع مواقع الويب التي تصممها.
2. انشئ ضمن هذا المجلد مجلدًا جديدًا لتخزين موقعك الأول، وسمِّه test-site أو ما شابه.

تسمية الملفات والمجلدات

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

1. تُعَدّ الكثير من الحواسب وخاصةً الخوادم حساسةً لحالة الأحرف، فإذا وضعت مثلًا صورةً على موقعك عنوانها test-site/MyImage.jpg وأردت تشغيلها من ملف آخر وكتبت العنوان test-site/myimage.jpg، فربما لا تعمل.
2. لا تعامِل خوادم ويب والمتصفحات ولغات البرمجة الفراغات بالطريقة نفسها، فإذا وضعت فراغات في اسم الملف مثلًا، فستعامِل بعض الأنظمة اسم الملف هذا على أساس ملفين منفصلين، إذ تملأ بعض خوادم ويب الفراغات في أسماء الملفات بالرمز "%20" (وهو رمز المسافة الفارغة في عناوين URL)، وتكون النتيجة أخطاءً في جميع الروابط، ومن الأفضل أيضًا فصل الكلمات بشرطة hyphen مثل my-file.html بدلًا من الشرطة السفلية مثل my_file.html، والسبب في ذلك أنّ محرك بحث جوجل يعامل الشرطات على أساس فواصل بين الكلمات بينما لا يعامل الشرطات السفلية بالطريقة ذاتها.

خلاصة الأمر أنه عليك اعتياد استخدام الأحرف الصغيرة دون فراغات، واستخدام الشرطات للفصل بين الكلمات حتى تدرك ما تفعل على الأقل، فإنّ تقيدك بذلك يريحك من بعض المشاكل التي قد تنبثق أمامك هنا وهناك.

الهيكلية التي ينبغي أن يبنى عليها موقع ويب

لنلق نظرةً فيما سيأتي على هيكلية الموقع البسيط الذي نبنيه، إذ يُعَدّ الشيء المشترك بين معظم مشاريع مواقع ويب هو إنشاء ملف HTML يعمل تلقائيًا عند استدعاء الموقع ويُدعى عادة "index"، بالإضافة إلى مجلد يحتوي على الصور وملفات التنسيق وملفات الشيفرة، فلنبن هذه الأشياء إذًا:

1. index.html: استخدم محرر النصوص الذي تملكه لإنشاء ملف جديد يُدعى index.html، ثم احفظه ضمن المجلد test-site، إذ يحتوي هذا الملف عمومًا على محتويات الصفحة الرئيسية للموقع مثل النصوص والصور التي يراها الزائر عند دخول موقعك.
2. المجلد images: أنشئ مجلدًا بهذا الاسم داخل المجلد test-site، إذ يضم كل الصور التي تستخدمها في موقعك.
3. المجلد styles: أنشئ مجلدًا بهذا الاسم ثم احفظه ضمن المجلد test-site، إذ يضم كل الملفات التي تحتوي على شيفرة التنسيقات المورثة CSS والتي تتحكم بمظهر الصفحة مثل لون النصوص والخلفية.
4. المجلد scripts: أنشئ مجلدًا بهذا الاسم ثم احفظه في المجلد test-site، إذ يضم شيفرة جافاسكربت التي تُستخدَم لإضافة وظائف تفاعلية إلى صفحتك مثل الأزرار التي تعرض بيانات عند نقرها.

ملاحظة: قد تجد صعوبةً في رؤية أسماء الملفات كاملة على الحواسب التي تشغل النظام ويندوز لأنه يقدِّم خيارًا بإخفاء امتدادات الملفات معروفة النوع، وهذا الخيار مفعَّل افتراضيًا، إذ يمكنك عادةً إيقاف هذا الخيار بالانتقال إلى مستكشف ويندوز Windows Explorer ثم خيارات المجلد Folder Options وبعدها ألغ تفعيل خيار "إخفاء الامتدادات للملفات معروفة النوع Hide extensions for known file types"، كما يمكنك دومًا البحث عبر الويب لإيجاد التفاصيل الخاصة بنسختك من ويندوز.

مسارات الملفات

لا بد من تحديد مسار الملف بطريقة صحيحة حتى تتمكن الملفات في الموقع من التخاطب مع بعضها بعضًا، ومبدئيًا لا بد من تحديد وجهة ليتمكن أيّ ملف من معرفة مكان الآخر، ولتوضيح الأمر سنكتب بعض الشيفرة في الملف index.html لكي يعرض الصورة التي اخترتها لموقعك البسيط أو أية صورة مناسبة قد تجدها على حاسوبك أو على الويب:

1. انسخ الصورة التي اخترتها إلى المجلد images.
2. افتح الملف index.html وانقل الشيفرة التالية إليه كما هي تمامًا، ولا تكترث حاليًا بمعنى هذه الشيفرة، إذ سنهتم بالتفاصيل لاحقًا:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <img src="" alt="My test image">
  </body>
</html>

3. يُدرِج سطر شيفرة HTML التالي الصورة ضمن صفحتك:

<img src="" alt="My test image">

لابد من إخبار HTML بمكان وجود الصورة، إذ تتواجد الصورة ضمن مجلد الصور وهذا المجلد موجود في المجلد نفسه الذي يحوي الملف index.html، وبالتالي سنحتاج إلى المسار images/your-image-filename للوصول من هذا الملف إلى الصورة، فإذا كان اسم الصورة firefox-icon.png، لكان المسار images/firefox-icon.png.

4. ضع اسم المسار في شيفرة إدراج الصورة بين علامتي إقتباس بالشكل ""=src، ثم احفظ الملف ثم افتحه باستخدام المتصفح بالنقر المزدوج على أيقونة الملف، إذ ستظهر الآن الصورة المطلوبة.

إليك بعض القواعد العامة في تحديد مسارات الملفات:

• لاستدعاء ملف يقع في المجلد نفسه الذي يقع فيه الملف الذي يستدعي، استخدم فقط اسم هذا الملف مثل my-image.jpg.
• للإشارة إلى ملف في مجلد فرعي مجاور للملف الذي يستدعي، اكتب اسم المجلد الفرعي متبوعًا بالمحرف "/" ثم اسم الملف المطلوب مثل subdirectory/my-image.jpg.
• للإشارة إلى ملف يقع في المجلد الأب للمجلد الذي يقع فيه الملف الذي يستدعيه، اكتب نقطتين .. ثم المحرف "/" ثم اسم الملف مثل my-image.jpg/...
• يمكنك الدمج بين القواعد السابقة كما تشاء مثل ‎../subdirectory/another-subdirectory/my-image.jpg، وهذا كل شيء تحتاجه إلى الآن.

ملاحظة: يستخدِم نظام التشغيل ويندوز الشرطة الخلفية \ وليست الأمامية / لتحديد المسارات مثل C:\Windows، ولكن عليك استخدام الشرطة الأمامية دائمًا عند تطوير مواقع ويب حتى لو عملت على ويندوز.

ما الذي يجب فعله أيضا

لا شيء الآن، إذ يجب أن تبدو هيكلية موقعك مشابهةً للهيكلية التي تعرضها الصورة التالية:

ترجمة -وبتصرف- للمقال Dealing with files

اقرأ أيضًا

• التعامل مع الملفات في البرمجة
• رفع ملفات موقع الويب إلى خادم على الإنترنت
• الأدوات المستخدمة في بناء مواقع ويب

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

لنحصل على النتيجة التالية:

ستحتاج في هذا المشروع إلى:

• عتاد: جهاز حاسوب.
• برمجيات: برنامج سكراتش scratch الإصدار الثالث (إما نسخة سطح المكتب أو نسخة المتصفح).

كما يمكنك الحصول على مصادر المشروع والمشروع كاملًا من هنا.

ستتعلم في هذا المقال:

1. كيفية استخدام العوامل Operators لمقارنة الأرقام في سكراتش.
2. كيفية استخدام المقاطع البرمجية للتحسس للألوان في الكائنات.
3. كيفية استخدام المتغيرات لتسجيل الوقت في سكراتش.

إعداد المشروع

أولًا، نزِّل المشروع من ملف Boat Race وافتحه في نسخة سطح المكتب من سكراتش، أو انتقل للعمل على المشروع في نسخة المتصفح.

ستظهر لك خلفيةٌ زرقاء فيها عقبات خشبية يجب على القارب تفاديها حتى يصل إلى الجزيرة الرملية في نهاية المتاهة.

التحكم بالقارب

سنضيف هنا الكتل اللازمة للتحكم بالقارب باستخدام الفأرة.

أولًا، أضف الكتل التالية إلى كائن القارب بحيث يبدأ الحركة من الزاوية اليسرى للمنصة ويتبع حركة مؤشر الفأرة.

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

ثالثًا، اختبر ما الذي يحدث عندما يلامس القارب مؤشر الفأرة. ستلاحظ أن القارب سيعكس اتجاهه باستمرار دون أن يتحرك من مكانه؛ ولتجنُّب هذه المشكلة يجب علينا إضافة كتلة إذا بحيث يتحرك القارب فقط عندما يكون بعيدًا بمقدار 5 بكسلات عن مؤشر الفأرة:

الآن، انقر على زر العلم الأخضر وتحقق من عمل المشروع.

ارتطام القارب بالعقبات

سنعمل في هذه الخطوة على إضافة تأثير التحطم للقارب عندما يرتطم بالعقبات. أولًا، انتقل إلى نافذة المظاهر وانقر بالزر الأيمن للفأرة على مظهر القارب وضاعفه، ثم سمِّ المظهرين باسمٍ مناسب، "القارب" مثلًا، و"حالة الاصطدام".

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

ثالثًا، أضِف الكتل التالية اللازمة لتحطيم القارب عندما يلامس العقبات الخشبية، إذ سنستخدم حلقة تكرار مستمرة حتى يفحص البرنامج حركة القارب باستمرار ويعيده إلى نقطة البداية عندما يصطدم بالعقبات ويتحطم، وذلك باستخدام كتلة تحسس للون البني للخشب وعندها سيتغير مظهر القارب إلى مظهر حالة الاصطدام، ثم يعود إلى المظهر السليم ونقطة البداية:

لا تنسى إعادة القارب إلى مظهره الطبيعي باستخدام كتلة تغيير المظهر.

الآن، تحقق من عمل المشروع، هل يعود القارب إلى نقطة البداية بعد أن يتحطم؟

الفوز

سنضيف في هذه الخطوة رسالة تهنئة تظهر للاعب عندما يصل القارب بسلام إلى الجزيرة الرملية، وتبشره بفوزه، إذ سنستخدم كتلة إذا مع كتلة تحسس للون الجزيرة الأصفر داخل كتلة كرّر باستمرار، وسنضيف أيضًا رسالة تهنئة باستخدام كتلة قُل، كما يلي:

اكتب الرسالة التي ترغب بها، ولا تنسى إضافة كتلة أوقف الكل لإنهاء اللعبة.

إضافة الأصوات

يمكنك إضافة صوت للقارب عندما يتحطم لإضفاء الحيوية على اللعبة، كما يمكنك إضافة موسيقى على اللعبة.

أولًا، انقر على كائن القارب لتحديده ثم انقر على نافذة الأصوات وانقر بعدها على أيقونة اختيار صوت:

تُعرض الأصوات في سكراتش ضمن تصنيفات، ضع مؤشر الفأرة فوق الصوت لمعاينته، ثم انقر على الصوت الذي أعجبك لإضافته إلى مشروعك:

ستلاحظ ظهور الصوت الذي اخترته:

إضافة مؤقت

سنضيف مؤقتًا على اللعبة لزيادة الحماس، بحيث يتوجب على اللاعب أن يصل إلى الجزيرة بأسرع ما يمكن.

أولًا، انقر على قائمة كتل المتغيرات ثم انقر على خيار إنشاء متغير:

ثانيًا، سمِّ المتغير باسمٍ مناسب واختر ما إذا كنت تريد جعله متاحًا للاستخدام في جميع الكائنات أم فقط في هذا الكائن:

لاحظ أن المؤقت سيظهر على المنصة، انقر عليه بالزر الأيمن للفأرة لتغيير طريقة عرضه أو إخفائه، كما يمكنك إخفاءه عن طريق إلغاء تحديده من قائمة كتل المتغيرات.

ثالثًا، أضف الكتل التالية للمنصة، بحيث يبدأ المؤقت العد من الصفر ثم يزداد بمقدار "0.1" ثانية:

رابعًا، اختبر سرعتك في اجتياز الحواجز والوصول إلى بر الأمان.

إضافة جوائز وعقبات

سنزيد الحماس في لعبتنا عن طريق إضافة بعض العقبات والجوائز.

أولًا، استخدم محرر الرسام في سكراتش لإضافة بعض الأسهم البيضاء على خلفية المشروع، لتبدو كما يلي:

سنستخدم هذه الأسهم لزيادة سرعة القارب عندما يمر فوقها.

ثانيًا، أضف الكتل التالية داخل كتلة كرر باستمرار لكائن القارب، إذ سيتحرك القارب ثلاث خطوات إلى الأمام عندما يلامس السهم الأبيض.

شغِّل المشروع واختبر هل تزداد سرعة القارب عندما يلامس الأسهم؟

الآن، سنضيف عائقًا دوّارًا يجب على القارب تفاديه للوصول إلى الجزيرة بسلام.

ثالثًا، انتقل إلى الرسام وأضف كائنًا له شكل مستطيل باستخدام أداة المستطيل، ثم استخدم أداة مل ءاللون لتلوينه باللون البني.

استخدم نفس لون الحواجز الخشبية للحاجز الدوار.

واحرص على وضع مركز الحاجز الدوار فوق المؤشر الرمادي في الرسام.

رابعًا، سنضيف الكتل اللازمة إلى الحاجز لجعله يدور باستمرار بمقدار درجة واحدة.

الآن، شغل المشروع واختبر حركة الحاجز، حاول ألا يرتطم القارب فيه.

لا تحزن، بإمكانك إعادة اللعب حتى تصل بالقارب إلى بر الأمان.

ترقية المشروع

حان الآن وقت ترقية المشروع، إليك بعض الاقتراحات الممكن تنفيذها:

• يمكنك إضافة مزيد من العوائق، مثل إضافة مادة لزجة خضراء تبطئ حركة القارب عند ملامستها، وأضف الكتل اللازمة كما تعلمنا سابقًا.
• يمكنك إضافة عائق متحرك آخر، كأن تضيف سمكة قرش.

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

خاتمة

تهانينا، فقد أتممت مشروع إنشاء لعبة سباق القوارب باستخدام سكراتش.

ننصحك بتنفيذ مشروع إنشاء اختبار ذهني باستخدام سكراتش في خطوتك التالية.

إذا واجهت مشاكلًا مع برنامج سكراتش، فيمكنك الحصول على الدعم والمساعدة عن طريق إضافة سؤالك في قسم الأسئلة والأجوبة في أكاديمية حسوب، ولا تنسى مشاركتنا مشروعك على مجتمع سكراتش في منصة حسوب IO.

ترجمة -وبتصرف- للمقال Boat Race من الموقع الرسمي لراسبيري باي.

اقرأ أيضًا

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

ستتعلم في هذا المقال كيفية إنشاء لعبة إلكترونية تفاعلية يعتني فيها اللاعب بكائنٍ ما، أو بحيوانٍ أليف أو نبتةٍ ما، وذلك باستخدام برنامج سكراتش scratch. أطلق العنان لخيالك في هذا المشروع، ولكن تذكر أنه يجب اتباع الدليل الموجز أدناه والذي سيكون بمثابة مهمةٍ عليك إنجازها.

لتحصل على نتيجة مشابهة لما يلي:

ما الذي سيحدث للخفاش إذا نقرت على الطعام أو الماء؟ كيف يمكنك معرفة ما إذا كان الخفاش جائعًا أم عطشًا؟

مهامك في هذا المشروع هي:

• إنشاء شخصية ممتعة بغرض التفاعل معها.
• توظيف كتل سكراتش والمهارات التي تعلمناها في المشاريع السابقة لإنشاء شخصية والاهتمام بها.
• فهم كيفية عمل الخوارزميات وكيف تتحكم في الشخصيات في الألعاب والتطبيقات.

الدليل الموجز لإنشاء لعبة إلكترونية تفاعلية

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

• استخدام المتغيرات للتحقق من احتياجات الشخصية الرئيسية وتطويرها.
• استخدام كتلة إذا للتحكم بعمل المشروع.
• استخدام كتل البث للتواصل بين الكائنات.

كما يُفضل أن تحقق لعبتك ما يلي:

• إيصال فكرة نبيلة، كأن تحث اللعبة على فعل الخير والاعتناء بالحيوانات والبيئة.
• تنبيه اللاعب لمراعاة احتياجات الشخصية عند اللزوم.
• إتاحة إمكانية تسمية الشخصية.

استلهم أفكارك

فكِّر في الشخصية الرئيسية لمشروعك، هل تريدها حيوانًا أليفًا،أم شخصًا يساعده اللاعب في اتخاذ قراراته، أو نبتةً ما أو كائنًا طبيعيًا أو خياليًا يعتني به اللاعب ويهيئ له الظروف المناسبة. ثم اطلع على المشاريع التالية لتستلهم الأفكار للعبتك التفاعلية:

• مشروع لعبة التحكم بالطقس

• مشروع رعاية النباتات

• مشروع المذياع السحري

معلومة: تُعد ألعاب الحيوانات الأليفة الافتراضية إحدى أنواع الألعاب التفاعلية، إذ يتفاعل اللاعب مع الشخصيات لتلبية احتياجاتها. لربما سمعت بلعبة تماغوتشي Tamagotchi الشهيرة أو جربت ألعابًا مثل Catz أو Adopt me.

ما هي الالعاب التي جربتها من هذا النوع؟

إعداد فكرة اللعبة

يجب عليك وضع خطة للعبتك وذلك إما بمجرد التفكير، أو عن طريق الرسم وتدوين أفكارك في مفكرة ما، أو بإضافة خلفيات وكائنات في برنامج سكراتش. اتبع الطريقة التي تفضلها.

فكِّر ما هي الشخصية الرئيسية في لعبتك، هل تريدها حيوانًا أليفًا، أم كائنًا خيالًا، أم نبتة من الطبيعة؟ ثم قرّر كيف سيعتني اللاعب بالشخصية واحتياجاتها، كأن يعتني بصحتها، أو يراقب نموها.

معلومة: عندما نُلبي الاحتياجات الأساسية، مثل الغذاء والسلامة، فإننا نخلق الظروف المناسبة للمخلوقات (بما فيه أنفسنا) للتعلُّم والنمو، لذلك عندما تشعر بالانزعاج من دون سبب أو بتشتت انتباهك، تحقق من احتياجاتك الأساسية.

فكّر مليًا في الغرض من هذه اللعبة، قد يكون هدفها واحدًا مما يلي:

• تعليم الأطفال كيفية الاعتناء بالنباتات أو الحيوانات الأليفة.
• تعزيز قضية مهمة، مثل الاهتمام بالصحة النفسية والبيئة المحيطة.
• الترفيه ومنح اللاعب فرصة للتفاعل مع شيء قد يكون خارجًا عن المألوف.

التخطيط للعبة

فكّر مليًا في الجمهور المستهدف من المشروع، من هم؟ إذ تساعد معرفة الجمهور في تصميم المشروع وفقًا لما يستهويهم مما يدفعهم للعب مرارًا.

أنشئ مشروعًا جديدًا في برنامج سكراتش، وأبقِ قلمًا وورقةً بالقرب منك، وفكر فيما يلي:

• ما هي الشخصية التي تنوي استخدامها في لعبتك؟
  • حيوانًا أليفًا أو بريًا، أو شخصًا ما.
  • نبتةً أو محصولًا ما، بحاجةٍ للماء وضوء الشمس وسماد.
  • إحدى الظواهر الطبيعية، مثل قوس المطر أو النار.
  • آلة ما، مثل الغواصة أو آلة إعادة التدوير.

• ما هي المتغيرات التي ستحتاجها؟ وهل ستزداد أو تنقص تلقائيًا؟
• كيف سيتفاعل اللاعب مع الشخصية الرئيسية؟ هل سيطعمها، أم سيتحدث معها لتسليتها؟
• ماذا ستسمي اللعبة؟ فكّر في عنوان يجذب الآخرين لتجربة لعبتك.

إعداد اللعبة واختبارها

سنبدأ الآن بإعداد اللعبة، يُنصح أن تبدأ تنفيذ الأساسيات أولًا خطوةً خطوة، ثم تعمل على ترقية المشروع حين يتسنى لك ذلك، كما يُنصح باختبار المشروع بعد كل إضافة أو تعديل ليسهل عليك اكتشاف الأخطاء وإصلاحها.

حدد هل تريد إنشاء متغير واحد وإضافة التأثيرات عليه والمظاهر والأصوات لجعل الكائن ينبض بالحياة، أم تُفضل إنشاء عدة متغيرات دفعةً واحدةً ثم إضافة التأثيرات عليها.

ننصحك بإضافة كائن ثم إنشاء متغير.

إليك تذكرةً ببعض المهارات التي تعلمناها سابقًا والتي ستفيدك في تنفيذ كتابك التفاعلي:

استخدام المتغيرات

إضافة متغير وإسناد قيمة له

أولًا، انقر على قائمة كتل المتغيرات، ثم انقر على خيار إنشاء متغير:

ثانيًا، سمِّ المتغير باسمٍ مناسب واختر ما إذا كنت تريد جعله متاحًا للاستخدام في جميع الكائنات أم فقط في هذا الكائن:

سيظهر المتغير على المنصة. انقر عليه بالزر الأيمن للفأرة لتغيير طريقة عرضه أو إخفائه، كما يمكنك إخفاءه عن طريق إلغاء تحديده من قائمة كتل المتغيرات.

ثالثًا، أسند قيمة ابتدائية للمتغير ثابتة للمتغير باستخدام كتلة اجعل المتغير مساويًا التالية، انقر على السهم بجانب اسم المتغير لاختيار المتغير الذي تريده من النافذة المنزلقة للكتلة:

إسناد المتغير إلى زر

أضف زرًا من مكتبة الكائنات بكتابة "Button" في مربع البحث، ثم أنشئ متغيرًا جديدًا كما تعلمنا سابقًا:

وأضف إحدى الكتل التالية إلى الزر:

• إسناد قيمة ما للمتغير عند النقر على الزر، كما في المثال التالي:

• تغيير قيمة المتغير عند النقر على الزر باستخدام كتلة غيّر التالية، إما بالزيادة أو النقصان:

• السؤال والإجابة عن أمرٍ ما عند النقر على الزر، إذ يمكننا جعل اللاعب يتفاعل معنا ويسند قيمةً للمتغير باستخدام كتلة السؤال ومتغير الإجابة، وإسناد إجابة اللاعب إلى متغير ما، كما يلي:

تغيير قيمة المتغير باستخدام حلقة تكرار

نستخدم كتل التكرار لتنفيذ كتل سكراتش عدّة مرات، أو تنفيذ الكتل باستمرار، أو لتنفيذ الكتل إلى أن يتحقق شرطٌ ما.

• استخدام كتلة التكرار عدة مرات: نستخدم هذه الكتلة لتكرار أمرٍ ما عددًا معينًا من المرات، كأن نستخدمها لزيادة سرعة المتغير تدريجيًا وتحريكه:

• استخدام كتلة التكرار باستمرار: نستخدم هذه الكتلة لتكرار أمرٍ ما عددًا لا نهائيًا من المرات. إليك المثال التالي: تزيد الكتل التالية نقاط اللاعب باستمرار، كلما استمر باللعب.

• استخدام كتلة التكرار حتى تحقق شرط ما: نستخدم هذه الكتلة لتكرار أمر إلى أن يتحقق شرط ما. إليك المثال التالي: تزيد الكتل التالية قيمة متغير الوقت بمقدار "1" إلى أن يُستوفى الشرط، أي وصول المتغير إلى القيمة "50".

كما يمكنك استخدام المتغيرات الجاهزة الموجودة في سكراتش، مثل متغير الحجم، ورقم المظهر، وشدة الصوت، والاتجاه:

التحقق من الشروط

التحقق من الشروط باستخدام كتلتي إذا وكرر باستمرار

يمكننا التحقق من شرطٍ هام باستمرار باستخدام كتلة إذا وكتلة كرر باستمرار لتنفيذ أمر ما إذا تحقق شرط كتلة إذا.

كما يمكننا التحقق من الشروط باستخدام المتغيراتوكتل العمليات، كأن نقارن قيمة المتغير مع قيمة عددية:

التحقق من الشروط باستخدام كتل العمليات

يمكننا استخدام كتل العمليات للتحقق من الشروط وتنفيذ القرارات في كتل إذا وإذا… وإلا وانتظر حتى وكرر حتى، إذ تُستخدم العوامل الرياضية < و > و = للمقارنة بين قيمتين وفقًا للحالات التالية:

• أكبر من:

• أصغر من:

• يساوي:

وتُستخدم العوامل المنطقية و and، أو or، ليس not كما يلي:

• و: تشترط صحة كلا الشرطين:

• أو: تشترط صحة أحد الشرطين:

• ليس: تشترط عدم صحة الشرط:

استخدام كتلة إذا وكتلة إذا… وإلا

يُنفَّذ الأمر الموجود داخل كتلة إذا فقط إذا تحقق شرط الكتلة الموجود في دخل الكتلة ذأت الشكل السداسي، إذ توجد عدة كتل يمكن استخدامها مثل شروط لكتلة إذا ومنها كتل الاستشعار وكتل العمليات، إليك مثالًا على بعض هذه الكتل:

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

كما يمكنك استخدام الكتلتين مع بعضهما عند الحاجة لكتابة برنامج معقد والتحقق من عدة شروط.

اختيار اللون باستخدام أداة انتقاء اللون

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

اضغط على اللون الموجود في إحدى الكتل واستخدم أداة انتقاء اللون، الموجودة أسفل أشرطة الألوان، لاختيار اللون المطلوب بوضع مؤشر الفأرة عليه ثم النقر:

لاحظ أن اللون في الكتلة سيتبدل إلى اللون الذي اخترته.

بث الرسائل واستلامها

تعرفنا في مشروع سابق على رسائل البث التي تتيح لنا إرسال أمرٍ ما لجميع الكائنات، كما لو أننا نذيع إعلانًا باستخدام مكبر الصوت.

انقر على العلم الأخضر، ثم استخدم العصا السحرية للنقر على الأزرار وتفعيل التعاويذ السحرية، ولاحظ ماذا يحدث عند نقر كل منها. انقر لمشاهدة الكتل المستخدمة في المشروع في نسخة المتصفح.

إنشاء رسالة بث وإرسالها

أولًا، انقر على قائمة كتل الاحداث، ثم انقر على كتلة بث.

ثانيًا، انقر على النافذة المنسدلة للكتل واختر رسالةً جديدةً.

ثالثًا، اكتب الرسالة التي تريدها، ننصحك باختيار رسالةٍ معبرة عن عمل الكتل.

رابعًا، اختر متى تريد بث الرسالة باستخدام إحدى كتل الأحداث:

خامسًا، لاستلام رسالة البث، أضف كتلة عندما أتلقى الرسالة من كتل الأحداث إلى الكائنات التي تريدها أن تستلم الرسالة، ثم أضف بعدها الكتل التي تريد تنفيذها:

استخدام النصوص

استخدام الرموز التعبيرية

يمكنك إضافة الرموز التعبيرية على مشروعك بالاستعانة بالاختصارات التالية وفقًا لنظام التشغيل المستخدم في جهازك:

• نظام ويندوز: انقر من لوحة المفاتيح على مفتاح الويندوز ومفتاح رمز النقطة "."
• نظام ماك أو إس MacOS: انقر على مفتاح المسافة ومفتاحي cmd و ctrl.
• نظام لينكس: انقر على مفتاحي ctrl والنقطة ".".

يمكنك إضافة الرموز التعبيرية بالنقر على أداة النص في نافذة المظاهر:

كما يمكنك إسناد الرموز التعبيرية على أنها قيمة للمتغيرات:

قد تختلف الرموز التعبيرية من جهازٍ لآخر، وخاصةً بين الحواسيب المكتبية واللوحية، وقد لا تتوفر بعض الرموز على الحواسيب القديمة، على عكس الحواسيب الحديثة.

استخدام كتلتي السؤال والإجابة

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

تأكد من كتابة إجابة مماثلة للإجابة في الكتل البرمجية لتفادي الأخطاء. لاحظ أنه عند إخفاء الكائن الذي يطرح السؤال، فسيظهر السؤال داخل مربع بدلًا من فقاعة كلام.

ربط النص مع المتغيرات

يتيح لنا سكراتش استخدام كتلة الربط من كتل العمليات لربط النص مع المتغيرات والحصول على سلاسل نصية طويلة:

كما يمكنك استخدام متغير ونص كما يلي أو عدة كتل ربط، ولا تنسى وضع المسافات بين النصين:

التعامل مع الخلفيات والمؤثرات الرسومية وحركة الكائنات

إضافة تأثير الانزلاق على الكائنات

يمكن استخدام كتلة الانزلاقمن كتل الحركة لتحريك الكائن إلى إحداثيات معينة، أو إلى موضع عشوائي، أو إلى مؤشر الفأرة أو كائن آخر. لنأخذ المثال التالي:

أولًا، ضع الكائن في نقطة البداية التي تفضلها ثم أضف إليه الكتل التالية:

لاحظ الخيارات المتاحة عند النقر على النافذة المنزلقة لكتلة انزلق نحو موضع عشوائي، اختر منها خيار الكائن "Cake"، ثم اجمع الكتلتين مع بعضهما كي ينزلق القط باتجاه قالب الحلوى.

استخدام الخلفيات لإنشاء صفحاتٍ جديدة

تُستخدم الخلفيات في سكراتش إما لإنشاء صفحاتٍ أو مراحل جديدة كما في المشروع التالي:

اضغط على المنصة ثم اضغط على نافذة الخلفيات لاختيار الخلفيات التي تريدها، إذ يمكنك تغيير ترتيب الخلفيات عن طريق سحبها ووضعها وفق الترتيب الذي تفضله.

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

إذ يمكنك الانتقال إلى الخلفية التالية وذلك إما عن طريق الضغط على مفتاح المسافة Space في لوحة المفاتيح، أو بالضغط على المنصة، أو على كائنات سكراتش على الشاشة، كما يمكنك الانتقال آليًا وذلك عن طريق تحديد زمن للانتقال.

العمل على تغيير مظهر الكائن

يمكنك استخدام كتلة غيّر المظهر مع كتلتي قُل أو فكر لإيضاح ما يفكر أو يشعر به الكائن، كما في المشروع التالي:

وذلك باستخدام الكتل التالية:

احرص على استخدام الكتل ذات القيم الزمنية كي تستطيع ملاحظة التغيُّر في المظهر.

تحريك الكائن باستخدام المظاهر

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

يمكنك تحريك الكائن باستخدام كتلتي تغيير المظهر والتحرك داخل حلقة تكرار، كما يمكنك تغيير سرعة الكائن عن طريق تغيير الوقت في كتلة الانتظار.

يمكنك استخدام كتلة المظهر التالية مع كتلة تكرار لعرض جميع المظاهر التي يمتلكها الكائن.

زِد عدد الخطوات في كتلة الحركة لجعل لزيادة سرعة الكائن، وغيّر العدد في كتلة التكرار إذا أردت تعديل المسافة؛ أما إذا أردت أن يتحرك الكائن للخلف، فاستخدم أرقامًا سالبة، أو كتلة اتجه نحو الاتجاه، وتحديد القيمة "90-" لتغيير اتجاه الكائن قبل أن يتحرك.

انقر على زر العلم الأخضر لفحص عمل مشروعك وكيفية تفاعل الكائنات، ثم انقر على العلم الأخضر مرةً ثانيةً لتتأكد أن الكائنات عادت إلى موضعها الأصلي وإلى مظهرها الابتدائي.

استخدام مؤثرات بصرية

يمكن تطبيق عدة مؤثرات بصرية على الكائنات في سكراتش، كما في المثال التالي:

تحتوي كل من الكتلتين اجعل مؤثر اللون و غيّر مؤثر اللون على نافذة منزلقة يمكن اختيار عدة تأثيرات منها لتغيير مظهر الكائنات وهي:

• اللون: يمكن اختيار القيم من القيمة 0 إلى القيمة 199 (تُدَور الأرقام الكبيرة، فيُعتَبر الرقم 200 مثل الرقم 0).
• عين السمكة: لا تعطي القيمة 0 أي تأثير، وكلما كبرت القيمة ازداد تأثير "عين السمكة" fisheye، أما القيم السالبة فتعطي تأثيرًا عكسيًا.
• الدوامة: لا تعطي القيمة 0 أي تأثير، وتعطي القيم الكبيرة الموجبة تأثيرًا أفعوانيًا نحو اليسار، أما القيم السالبة الكبيرة فتعطي تأثيرًا أفعوانيًا نحو اليمين.
• البكسلة: لا تعطي القيمة 0 أي تأثير، بينما تزيد القيم الكبيرة عدد البكسلات في الكائن.
• الموزاييك: لا تعطي القيمة 0 أي تأثير، بينما تغير القيم الكبيرة الموجبة والسالبة عدد النسخ.
• شدة الإضاءة: لا تعطي القيمة 0 أي تأثير، بينما تزيد القيم من 1 إلى 100 من سطوع الكائن، وتجعل القيم السالبة من القيمة 1- حتى القيمة 100- الكائن أكثر عتمةً.
• الشبح: لا تعطي القيمة 0 أي تأثير، بينما تزيد القيم من 1 إلى 100 من شفافية الكائن.

أسند قيمًا مختلفة للتأثيرات واكتشف كيف سيتغير مظهر الكائن باختلاف القيم.

لاحظ أن القيمة 225 تعطي نفس تأثير القيمة 25 عند إسنادها لتأثير تغيير اللون، ولا يحدث أي تغيير على الكائن في باقي التأثيرات عند تجاوز القيمة العليا والدنيا للتأثير.

يمكنك استخدام كتلة أزل التأثيرات الرسومية أو الضغط على زر العلم لمسح التأثيرات.

أما إذا أردت تطبيق تأثير معين على الكائن أثناء تشغيل المشروع، فضع كتلة تغيير المؤثر الرسومي تحت كتلة عند النقر على العلم الأخضر.

لا تنسى أنه يمكنك تطبيق هذه التأثيرات الرسومية واللونية على المنصة أيضًا.

إظهار الكائنات وإخفاؤها

قد ترغب في إظهار الكائنات في صفحاتٍ معينةٍ من الكتاب وإخفاؤها في أخرى، ولتحقيق ذلك اتبع ما يلي:

انتقل إلى الخلفية التالية وذلك بالنقر على المنصة، أو بالضغط على مفتاح المسافة Space في لوحة المفاتيح، كما يلي:

استخدم كتلتي الإظهار والإخفاء مع كتلة عندما تتغير الخلفية لإظهار الكائنات أو إخفائها في الخلفيات المحددة.

استخدم كتلة عند النقر على العلم الأخضر كما يلي، لإظهار الكائنات أو إخفائها في أول خلفية.

تغيير تموضع الكائنات باستخدام الطبقات

توجد طريقتان لوضع الكائنات في طبقات، الأولى: هي بسحب الكائن على المنصة لنقله إلى الطبقة الأمامية، كما يلي:

والثانية هي باستخدام الكتلتين البرمجيتين "انتقل إلى الطبقة الأولى" أو "انتقل إلى الطبقة الأخيرة":

استخدم حلقة تكرار مستمرة لإبقاء الكائن في المقدمة أو في الخلف دائمًا، أو لإعادته إلى طبقته الصحيحة بعد تحريكه:

إضافة تأثير الاهتزاز

أضِف الكتل التالية ليبدو الكائن وكأنه يهتز وذلك بتدوير الكائن بضع درجات باتجاه اليمين واليسار وتكرار ذلك عدّة مرات، كما يلي:

الأصوات

إضافة صوت للكائنات على المنصة

حدّد الكائن الذي تريد إضافة صوتٍ له، ثم اضغط على نافذة الأصوات، ولاحظ أن لكل كائن صوتٌ افتراضي خاصٌ به.

يحتوي برنامج سكراتش على مكتبة أصوات يمكنك الاختيار منها وإضافتها إلى الكائنات، وذلك عن طريق الضغط على رمز إضافة صوت للوصول إلى مكتبة الأصوات.

ضع مؤشر الفأرة (أو إصبعك، إذا كنت تستخدم جهازًا لوحيًا) فوق رمز التشغيل، لتشغيل الصوت.

ثم اضغط على الصوت الذي ترغب به لإضافته إلى الكائن، ستنتقل بعدها إلى نافذة الأصوات وسيظهر الصوت الذي اخترته.

ستجد الصوت الجديد الذي أضفته ضمن قائمة كتل الصوت في نافذة الأصوات:

ولا تنسى أنه يمكنك إضافة الأصوات للمنصة.

تسجيل الأصوات

اختر الكائن الذي تريد إضافة تسجيل صوت إليه، ثم اضغط على نافذة الأصوات:

اضغط على رمز إضافة صوت، ثم اضغط على رمز التسجيل:

ثم اضغط على زر التسجيل البرتقالي عندما تكون جاهزًا للتسجيل:

واضغط على زر إيقاف التسجيل عند الانتهاء.

سيظهر بعدها المقطع الذي سجلته، ويمكنك إعادة التسجيل إذا لم ترضى عن النتيجة. اسحب الدوائر البرتقالية لقص المقاطع التي لا ترغب بها، والاحتفاظ بالمقطع الذي تريده، ذي اللون الأزرق.

اضغط زر الحفظ عند الانتهاء، ستنتقل بعدها إلى نافذة الأصوات وسيظهر التسجيل الذي أضفته.

ستجد الصوت الجديد الذي سجلته ضمن كتل الصوت في نافذة الأصوات:

جعل الشخصية تتكلم باستخدام إضافة تحويل النص إلى كلام

سنتعلم في هذه الخطوة كيفية جعل الكائنين بيكو Pico وجيغا Giga ينطقان كما في المشروع التالي:

انقر على زر إدراج إضافة:

واختر إضافة نص إلى كلام:

ستلاحظ إضافة كتل النص إلى كلام إلى قائمة كتل سكراتش:

يمكنك جعل الكائنات تنطق عند النقر عليها، كما يمكنك اختيار اللغة التي ستتحدث بها، باستخدام الكتل التالية:

كما يمكنك أيضًا اختيار صوت المتحدث، سواءٌ أردت صوت امرأة، أم رجل، أو حتى صوت هرة.

محرر الرسوم Paint Editor

يتيح لنا برنامج الرسام العديد من الخيارات، سنستعرض منها ما يلي:

إنشاء خلفية جديدة باستخدام محرر الرسوم

اختر رمز الرسام أو محرر الرسوم Paint من قائمة اختيار خلفية Choose a Backdrop.

ستظهر لك شاشة برنامج الرسام، وستكون الخلفية الجديدة محددةً في القائمة مع الخلفيات الأخرى في مشروعك إن وجدت:

اضغط على الأداة ذات الشكل المستطيل ثم على أداة ملء اللون لاختيار اللون الذي تريده للخلفية الرئيسية، ثم اسحب الشكل المستطيل فوق الخلفية بكاملها، كما يلي:

كما يمكنك استخدام الأداة المستطيلة Rectangle tool، أو الأداة الدائرية Circle tool، أو الفرشاة Brush tool، أو استخدام الأدوات الثلاث جميعًا لإضافة تفاصيل إلى الخلفية.

يُنصح بتسمية الخلفية باسمٍ يعبّر عن محتواها عند انتهائك من التعديل عليها، ففي مثالنا رسمنا هضبةً وسماءً وسمَّينا الخلفية "هضبة":

ستظهر الخلفية على المنصة وستجدها أيضًا في كتل المظاهر :

إنشاء الخلفيات والكائنات باستخدام الأشكال

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

أولًا، انقر على خيارالرسام من أيقونة اختيار خلفية أو من أيقونة اختيار كائن:

ثم اختر أداةً مما يلي لإنشاء الأشكال التي ترغب بها:

• الأداة الدائرية: اضغط على رمز الأداة لرسم دائرة، كما يمكنك الضغط باستمرار على مفتاح "Shift" لمساعدتك برسمها على نحوٍ مثالي.

• الأداة المستطيلة: استخدم هذه الأداة لرسم مستطيل، كما يمكنك الضغط باستمرار على مفتاح "Shift" لرسم مربع مثالي.

• الأداة المثلثية: يمكنك استخدام هذه الأداة لرسم مستطيلاتٍ أو مربعاتٍ أولًا، ثم الضغط على أداة تغيير الشكل لاختيار جزءٍ من الشكل وحذفه باستخدام أداة الحذف والحصول على شكل المثلث.

استخدم أداة ملء اللون لتغيير لون الشكل:

قد تحتاج لاستخدام أداتي طبقة إلى الأمام وطبقة إلى الخلف لتغيير موضع الشكل في الخلفية:

كما يمكنك تحديد عدة أشكال ومعاملتها مثل شكل واحد باستخدام أداة التجميع Group وبذلك يسهل عليك تحريك الأشكال وتعديلها.

إليك مثالًا عن كائنٍ أنشأناه باستخدام الأداة الدائرية والمستطيلة، كما يمكنك الانتقال إلى محرر سكراتش للتعديل عليه:

لا تنسى تسمية الأشكال والخلفيات التي أنشأتها في الرسام بأسماءٍ مناسبة.

استخدام أداة النصوص

يمكنك اختيار لون النص بالنقر على أداة ملء اللون.

ثم اختر أداة النص.

اضغط على شاشة الرسام، ثم اكتب النص الذي تريده، ثم اختر نوع الخط الذي تريده من قائمة الخطوط المنسدلة :

اضغط على أداة السهم أو التحديد لتغيير حجم النص، ثم اسحب أحد الحواف لتغيير الحجم:

استخدم أداة ملء اللون (وشكلها الدلو) لتغيير لون النص > اختر اللون أولًا، ثم اسحب مؤشر الفأرة فوق النص ليتغير لونه (أو اضغط على النص إذا كنت تستخدم جهازًا لوحيًا):

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

استخدم أداتي طبقة إلى الأمام وطبقة إلى الخلف لتغيير موضع الشكل في الخلفية:

تعديل مظهر الكائنات

اضغط على نافذة المظاهر وأنشئ نسخةً من المظهر الذي تود تعديله، ليتسنى لك استخدامه فيما بعد، وذلك بالضغط بالزر اليميني للفأرة على المظهر واختيار مضاعفة.

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

سيبدو المظهر بعد الحذف كما يلي:

تذكر أنه يمكنك التراجع عن أي خطوة بالضغط على رمز التراجع التالي:

حدد الآن الجزء الذي تود نسخه من المظهر ثم اضغط على خيار النسخ:

إذا أردت إضافة جزء من مظهر غير موجود في نافذة المظاهر، فيجب عليك إضافة المظهر إلى الكائن أولاً، وذلك بالنقر فوق أيقونة اختيار مظهر، ثم البحث عنه والنقر فوقه لإضافته إلى كائنك:

اضغط على خيار اللصق لإضافة الجزء الذي نسخناه سابقًا، سيبدو المظهر كما يلي:

ثم انتقل إلى نافذة المقاطع البرمجية لاستخدام المظهر الجديد في الكتل البرمجية:

إضافة مظهر جديد للكائن

انقر على نافذة المظاهر ثم انقر على أيقونة اختيار مظهر لإضافة مظهر من المكتبة.

احرص على تعديل حجم المظهر الجديد في الرسام ليتناسب مع المظاهر الأخرى للكائن. يفضل تعديل المظهر الجديد في الرسام أولًا حتى يظهر في الموقع المحدد على المنصة، إذ أنه عند تغيير المظهر على المنصة قد "يقفز" الكائن أو يغير حجمه.

محرر سكراتش

نسخ الكتل البرمجية من كائن إلى آخر

يمكنك نسخ الشيفرة البرمجية من كائن إلى آخر من قائمة الكائنات، عندها سيحتوي كلا الكائنين على الكتل التي نسختها، وذلك بسحب الشيفرة وإفلاتها فوق أيقونة الكائن المراد نسخها إليه.

أما إذا أردت نقل الكتل من كائن إلى آخر، فيمكنك حذف الكتل من الكائن الأول بعد نسخها إلى الآخر.

تشغيل المشروع في وضع ملء الشاشة

اضغط على أيقونة التحكم في وضعية ملء الشاشة المُمثلة بأربعة أسهم والموجودة في أقصى اليمين أعلى المنصة لتشغيل المشروع في وضع ملء الشاشة.

أعد الضغط على أيقونة التحكم في وضعية ملء الشاشة للخروج من وضع العرض بملء الشاشة.

مضاعفة الكائنات

انقر بزر الفأرة الأيمن (أو انقر مع الاستمرار إذا كنت تستخدم جهازًا لوحيًا) على أول كائن في قائمة الكائنات أسفل المنصة.

ثم اختر مضاعفة، ستحصل على نسخة ثانية من الكائن مضافًا إليها الرقم 2 على الاسم.

أعد تسمية الكائن من المستطيل أعلى الشاشة.

ولاحظ أن اسم الكائن سيتغير، وأن الكائن الثاني له نفس الكتل البرمجية للأول، لذلك لا تُشغّل البرنامج حتى تغير الكتل البرمجية للكائن الثاني؛ فقد لا تلاحظه لأنه قد يكون موضوعًا أسفل الكائن الأول، اسحبه إلى موضعه المناسب.

لا تتردد في عرض مشروعك على شخص آخر للحصول على ملاحظاته وإجراء التعديلات اللازمة على لعبتك.

تصحيح الأخطاء

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

• مشكلة عدم تعديل قيمة المتغيرات بدقة: تأكد من أنك تستخدم الكتلة المناسبة من الكتلتين "اجعل" و"غيّر"، إذ تبدل كتلة اجعل المتغير قيمة المتغير بقيمة أخرى، بينما تعدِّل كتلة غيّر القيمة عن طريق زيادتها أو إنقاصها، ثم تأكد من أنك سحبت المتغير إلى الكتل ولم تكتب اسمه، إذ يجب أن يظهر المتغير باللون البرتقالي، كما يلي:

• مشكلة عدم تكرار الأمر إلا مرةً واحدة: تأكد من أنك وضعت الكتل التي تريد تكرار عملها ضمن كتلة كرر باستمرار.
• مشكلة عدم الحصول على نتائج صحيحة عند المقارنة: تأكد من أنك استخدمت إشارات المقارنة > و< بدقة، إليك مثالًا توصيحيًا:

يشير الجزء المفتوح من الإشارة إلى العدد الأكبر، ففي الكتلة الأولى فإن السرعة هي الأكبر، أما في الكتلة الثانية فإن العدد 50 هو الأكبر أي أن السرعة يجب أن تكون أصغر من 50.

• مشكلة عدم حدوث شيء عند إرسال رسالة بث: تأكد من إضافة كتلة عندما أتلقى رسالة بث مطابقة للرسالة التي أرسلتها، وتأكد من اسم الرسالة.

قد تواجهك مشكلات أخرى، حاول إصلاحها باستخدام ما تعلمته إلى الآن، وإذا استعصى عليك الحل فلا تتردد في إضافة سؤالك في قسم الأسئلة والأجوبة في أكاديمية حسوب للحصول على الدعم والمساعدة.

ترقية المشروع

يمكنك ترقية مشروعك حين يتسنى لك ذلك عن طريق إضافة بعض التفاصيل والتعديلات عليه. إليك بعض المقترحات لتحسين لعبتك:

• إضافة مزيدٍ من المتغيرات التي تعبر عن احتياجات الكائنات.
• جعل الكائنات تفعل أمورًا متعددة عند تحقق شروط معينة وذلك باستخدام كتلة إذا.
• إضافة مزيدٍ من الكائنات لتتفاعل مع الشخصية الرئيسية.
• تسجيل صوتك أو تسجيل تأثيرات صوتية مختلفة وإضافتها إلى المشروع.
• تعديل مظاهر الكائنات باستخدام محرر الرسام.

ولا تنسى مشاركتنا مشروعك على مجتمع سكراتش في منصة حسوب IO.

خاتمة

تهانينا، فقد أتممت مشروع إنشاء لعبة تفاعلية باستخدام برنامج سكراتش.

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

ترجمة -وبتصرف- للمقال This sprite needs you من الموقع الرسمي لراسبيري باي.

اقرأ أيضًا

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

سنتعلم في هذا المقال كيفية تصميم وتنفيذ لعبة قفز من منظور علوي، إذ يتوجب على اللاعب القفز والارتداد عن منصات متحركة للوصول إلى النهاية لنحصل على نتيجة مشابهة لما يلي:

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

لاحظ كيف يتغير حجم الكائن حين يقفز، ما الذي يحدث حين يقع الكائن؟

ستتعلم في هذا المقال ما يلي:

1. كيفية استخدام وكتابة خوارزمية تتحقق من الشروط المهمة لتصميم لعبة القفز.
2. تصميم اللعبة وفق الطابع الذي تهواه.
3. التحكم بصعوبة اللعبة.

معلومة: تُدعى الألعاب التي لها طريقة عرض من الأعلى للأسفل بألعاب المنظور العلوي أو نظرة الطائر Top-down/bird’s-eye view game. قد يكون للعبة بأكملها طريقة العرض هذه، وقد تستخدمها فقط عند الدخول إلى وضع التصميم.

هل جربت هذا النوع من الألعاب؟

استلهم أفكارك

فكِّر في هوية لعبتك، ما الشخصية التي تريدها، وما هو المكان الذي تريده للعبتك، وما هو مستوى الصعوبة؟

اطلع على المشاريع التالية لتستلهم الأفكار منها:

• مشروع الطائر الصغير انقر لمشاهدة المشروع في نسخة المتصفح:

• مشروع الضفة الأخرى انقر لمشاهدة المشروع في نسخة المتصفح:

• مشروع رحلة الكواكب انقر لمشاهدة المشروع في نسخة المتصفح:

اختيار فكرة اللعبة

سنضيف في هذه الخطوة خلفيةً وشخصيةً للعبتنا ومنصةً مناسبة.

أولًا، أنشئ مشروعًا جديدًا في نسخة سطح المكتب من سكراتش،أو انتقل للعمل على المشروع في نسخة المتصفح.

ثانيًا، أنشئ خلفيًة بسيطةً في الرسام باستخدام أداة المستطيل لرسم مستطيل كبير ملء الشاشة:

ثم استخدم أداة ملء اللون لاختيار لون مناسب للمستطيل.

ثالثًا، حدِّد اتجاه اللعب، هل تريد للاعب الانطلاق من أسفل المنصة إلى أعلاها، أم من اليسار لليمين، ثم ارسم شكلًا بسيطًا لمنصة البدء، كأن ترسم غيمةً أو قطعة خشب، أو ضفة نهر ينطلق منها اللاعب ليعبر إلى الاتجاه الآخر.

ننصحك باختيار أشكال بسيطة كما في المثالين التاليين، ثم إضافة مزيدٍ من الأشكال والتفاصيل إن أحببت.

رابعًا، حدِّد مركز دوران الكائن في شاشة البدء؛ إذ تدور الكائنات في سكراتش حول مركزها، وتحقق من وجود المؤشر الرمادي الصغير التالي في محرر الرسام لمعرفة ما إذا كان الكائن في المنتصف أم لا:

إذا لم يكن المؤشر الرمادي في مركز الكائن، استخدم أداة التحديد لتحديد العنصر ولاحظ ظهور مؤشر أزرق:

اسحب الكائن بحيث يتطابق مؤشر الكائن الأزرق مع المؤشر الرمادي:

إذا لم يكن مركز الدوران هو منتصف الكائن، ضع مركز الدوران على المؤشر الرمادي في محرر الرسام:

خامسًا، ارسم شكلًا بسيطًا لمنصة النهاية باستخدام الرسام وحدد مركز دورانه كما تعلمنا في الخطوة السابقة، ثم ضع منصة النهاية في المكان المناسب على المنصة.

سادسًا، أضف الشخصية الرئيسية للعبتك، إما برسمها في الرسام أو باختيار إحدى الكائنات من مكتبة الكائنات. ننصحك بكتابة "Tatiana" أو "Taylor" أو "Trisha" في مربع البحث للحصول على شخصية من منظور علوي يناسب اللعبة.

استخدم خيار الاتجاه في نافذة المنصة لتغيير اتجاه الكائن، حرك العقارب حتى تحصل على نتيجة تناسب لعبتك:

أما إذا أردت رسم شخصية خاصة بك فانقر على أيقونة اختيار كائن ثم على خيار الرسام، واستخدم أداة الفرشاة والادوات الاخرى المتاحة. لا تنسى تسمية الكائن الجديد باسم معبر.

حان الآن وقت إضافة الكتل البرمجية وبث الحياة في لعبتنا، إذ سيكون لدينا حالتان مميزتان للكائن هما حالة الاستعداد وحالة القفز أو الانطلاق.

سابعًا، أنشئ متغيرًا جديدًا وسمِّه "الاستعداد"، ثم أضف الكتل التالية لإسناد مظهر وحجم للكائن مختلفين عنهما في حالة "القفز" أو "الانطلاق"، وأسند الحجم الذي ترغب به للكائن، وغيّر مظهره إلى مظهر مناسب:

لاحظ أننا أضفنا رسالة بث لتنظيم عمل المشروع، والتحكم في بدء تنفيذ الكتل الأخرى.

لا تنسى إخفاء المتغير "الاستعداد" من المنصة بإلغاء تحديده من قائمة كتل المتغيرات، إذ لا حاجة لظهوره على المنصة، ولا تنسى تسمية المشروع باسم مناسب.

مرحلة الانطلاق

سنضيف في هذه الخطوة الكتل البرمجية اللازمة لتحريك الكائن من منصة البدء للنهاية.

أولًا، أضف الكتل التالية لجعل الكائن يتحرك عند الضغط على مفتاح المسافة في لوحة المفاتيح أو عند النقر على زر الفأرة:

انقر على العلم الأخضر واختبر مشروعك، ما عدد القفزات اللازمة للوصول إلى منصة النهاية؟

ثانيًا، أضف صوتًا مناسبًا لحركة الكائن بالنقر على نافذة الأصوات ثم النقر على أيقونة اختيار صوت من مكتبة الأصوات. لاحظ أن الصوت الذي اخترته سيُضاف إلى قائمة كتل الأصوات.

تصحيح الأخطاء

• لا يظهر الكائن على منصة البدء عند النقر على العلم الأخضر: تحقق أولًا من إضافة كتل الاستعداد التالية:

ثم تحقق أن الاسم في كتلة اذهب إلى يوافق اسم كائن منصة البدء، وتأكد أنك أضفت كتلة انتقل إلى الطبقة الأولى كي لا يكون الكائن خلف منصة البدء.

• لا يظهر الكائن في منتصف منصة البدء: تأكد من أنك حددت مركز الدوران للكائن، إذ أن كتلة اذهب إلى تنقل مركز الكائن الأول إلى مركز الكائن الآخر.
• يقفز الكائن في الاتجاه الخاطئ: أضف كتلة اتجه في الاتجاه على كتل الاستعداد، أو غيّر اتجاه الكائن من خيار الاتجاه في نافذة الكائن أسفل المنصة.
• لا يقفز الكائن بالمقدار الصحيح: عدِّل عدد الخطوات التي يتحركها الكائن، أو عدد مرات التكرار، وتذكر أنك ستحتاج إلى تغيير الأرقام للأجزاء العلوية والسفلية من القفزة.
• لا يتغير حجم الكائن عندما يقفز: تحقق تغيير الحجم بمقدار سالب في كتلة التكرار الثانية، وتأكد من إضافة كتلة بث في نهاية كتل الاستعداد، وكتلة لاستلام رسالة البث في بداية كتل الانطلاق.

إذا واجهتك مشكلة ما، فننصحك بقراءة البرنامج بتمعن وبصوت عالٍ للتأكد من عمله خطوةً خطوة حتى تجد الخطأ وتعمل على إصلاحه، وإذا استعصى عليك الحل فلا تتردد في إضافة سؤالك في قسم الأسئلة والأجوبة في أكاديمية حسوب للحصول على الدعم والمساعدة.

الفوز

سنتحقق الآن من وصول اللاعب إلى خط النهاية باستخدام كتلة تكرار مستمرة وكتل الاستشعار.

أولًا، أضف صوتًا مناسبًا لوصول اللاعب إلى النهاية.

ثانيًا، سنستخدم كتلة الاستشعار للتحسس للون منصة النهاية، وكتلة بث لإرسال رسالة لإيقاف تنفيذ الكتل الاخرى عند فوز اللاعب، كما يلي:

اختيار اللون باستخدام أداة انتقاء اللون

يوجد في سكراتش كتلٌ تسمح للمستخدم باختيار اللون الموجود في كائن ما أو لون على المنصة، منها:

اضغط على اللون الموجود في إحدى الكتل واستخدم أداة انتقاء اللون الموجودة أسفل أشرطة الألوان، لاختيار اللون المطلوب بوضع مؤشر الفأرة عليه ثم النقر:

لاحظ أن اللون في الكتلة سيتبدل إلى اللون الذي اخترته.

ثالثًا، لا تنسى اختبار المشروع بعد كل خطوة، انقر على العلم الأخضر وتأكد أن البرنامج يشغل الصوت عند الفوز.

تصحيح الأخطاء

• لا يقف الكائن في منتصف منصة النهاية: تأكد من أنك حددت مركز دوران الكائن، إذ أن كتلة اذهب إلى تنقل مركز الكائن الأول إلى مركز الكائن الآخر.
• تنتهي اللعبة بسرعة: تحقق أن الكائن لا يلامس لونًا مماثلًا للون منصة النهاية حتى يصل إليها، وإذا استخدمت نفس اللون لإحدى المنصات المتحركة فعليك تغييره.
• لا يُشغَّل الصوت عندما يصل الكائن إلى منصة النهاية: انقر على الكائن وتأكد من إضافة كتلة الصوت المطلوب إليه، وتأكد من مستوى الصوت في جهازك، وتأكد أيضًا من أن اللون الموجود في كتلة الاستشعار هو نفسه لون منصة النهاية.

إذا واجهتك مشكلةً ما، فننصحك بقراءة البرنامج بتمعن وبصوت عالٍ للتأكد من عمله خطوةً خطوة حتى تجد الخطأ وتعمل على إصلاحه.

إضافة منصات متحركة

سنضيف في هذه الخطوة منصات متحركة كي يتنقل اللاعب عليها للوصول إلى منصة النهاية.

أولًا، اختر كائنًا مناسبًا لاستخدامه منصةً متحركة، أو ارسم منصتك الخاصة باستخدام الرسام.

ننصحك باختيار كائن متناظر الشكل لكي لا يختلف شكله عندما يرتد عن حواف المنصة، أو فعّل خيار لا استدارة من نافذة الاتجاه:

ثانيًا، أضف الكتل التالية اللازمة لتحريك المنصات:

يجب عليك إضافة كتلة اتجه نحو الاتجاه 0 إذا كان اتجاه الحركة في مشروعك من اليمين لليسار، كما يمكنك تغيير عدد الخطوات بما يناسب مشروعك.

انقر على العلم الأخضر واختبر حركة المنصة.

ثالثًا، ضاعف كائن المنصة الأولى بالنقر عليه بزر الفأرة الأيمن ثم أعد تسميته، وكرِّر هذه الخطوة حتى تحصل على عدد مناسب من المنصات.

رابعًا، أضف الكتل التالية داخل كتلة إذا …وإلا اللازمة للتحسس فيما إذا كان الكائن ملامسًا للون المنصة ليقفز عليها:

إذا كان للمنصة عدة ألوان، عندها يمكنك زيادة صعوبة اللعبة وجعل الكائن يقع إذا حط على لون حافة المنصة.

خامسًا، أضف الكتل التالية إلى الشخصية الرئيسية، داخل كتلة وإلا للتحسس إذا كان الكائن ملامسًا للون الخلفية. عندها ستنتهي اللعبة بخسارة اللاعب وتشغيل صوت مناسب من اختيارك:

اختبر المشروع وتأكد من تشغيل البرنامج الصوت عند الخسارة.

سادسًا، أضف الكتل التالية إلى جميع المنصات المتحركة لإيقاف حركتها عند وقوع اللاعب أو عند وصوله إلى منصة النهاية.

سابعًا، اختبر المشروع وتأكد أن اللعبة تنتهي عند وقوع اللاعب أو عند وصوله إلى منصة النهاية.

تصحيح الأخطاء

• تنتهي اللعبة بسرعة: تأكد أن أنك أضفت كتل إذا بالترتيب الصحيح داخل كتل التكرار، وتحقق أن الكتل التي تتحقق من شروط الحجم موجودة داخل كتلة إذا، وتأكد كذلك أنك لم تضف كتلة التحسس للون الخلفية في كتل مرحلة الاستعداد،إذ أن الكائن لم يبدأ القفز بعد.
• لا تتوقف المنصات عن الحركة: تأكد أنك أضف كتلة إيقاف المقاطع البرمجية بعد كتلة استلام رسالة توقف:

وتأكد من إضافة رسالة بث توقف في كتلة إذا الخاصة بالربح والخسارة.

معلومة: تُعد المنصات شائعةً في الألعاب ثنائية وثلاثية الأبعاد،مثل ألعاب القفز والعوائق Obstacles games -أو اختصارًا obby-، إذ قد تحتوي هذه الألعاب على منصات تتحرك، أو تختفي تدريجيًا عند القفز عليها.

هل جربت هذا النوع من الألعاب؟

تعديل صعوبة اللعبة

شغّل المشروع واختبر اللعبة، هل تجدها سهلةً جدًا أم صعبةً؟ إليك بعض الاقتراحات لتعديل مستوى الصعوبة:

• تغيير حجم المنصات المتحركة أو الشخصية.
• تغيير سرعة حركة المنصات.
• تغيير الزمن الذي يستغرقه الكائن للقفز.

ترقية المشروع

حان الآن وقت ترقية المشروع، إليك بعض الاقتراحات الممكن تنفيذها:

• إضافة مرحلة ثانية تزداد فيها سرعة المنصات وذلك باستخدام متغير للسرعة، وكتلة بث للانتقال إلى المرحلة الثانية.
• جعل المنصات تظهر وتختفي باستمرار باستخدام كتلة كرر باستمرار وكتل الإخفاء والإظهار والانتظار.
• إضافة مزيدٍ من المنصات من المراحل المتقدمة، مع مراعاة تعديل الكتل البرمجية اللازمة.
• تصميم شخصية خاصة بك باستخدام الرسام.

ننصحك بزيارة معرض مشاريع ألعاب القفز للإطلاع عليها ومشاهدة الكتل البرمجية الخاصة بكل مشروع في محرر سكراتش لمعرفة كيف نُفِذت، وألقِ نظرةً على معرض أعمال ألعاب القفز لمشاهدة المشاريع التي أنشأها أعضاء مجتمع سكراتش.

ولا تنسى أن تحفظ مشروعك.

خاتمة

تهانينا، فقد أتممت مشروع تصميم وتنفيذ لعبة قفز باستخدام سكراتش.

ننصحك بتنفيذ مشروع إنشاء لعبة تفاعلية باستخدام سكراتش في خطوتك التالية.

إذا واجهت مشاكلًا مع برنامج سكراتش فيمكنك الحصول على الدعم والمساعدة عبر إضافة سؤالك في قسم الأسئلة والأجوبة في أكاديمية حسوب، ولا تنسى مشاركتنا مشروعك على مجتمع سكراتش في منصة حسوب IO.

ترجمة -وبتصرف- للمقال Don't fall in! من الموقع الرسمي لراسبيري باي.

اقرأ أيضًا

• إنشاء لعبة الطبول الموسيقية باستخدام سكراتش
• برمجة مشروع عصا التعاويذ السحرية باستخدام سكراتش
• إنشاء مشهد متحرك يعتمد على عنصر المفاجأة باستخدام سكراتش
• إنشاء شخصية لها عيون ذات تأثير كرتوني باستخدام سكراتش

كيف سيبدو موقع الويب الذي تبنيه؟ يناقش هذا المقال أعمال التخطيط والتصميم التي تجري قبل كتابة الشيفرة بما في ذلك المعلومات التي سيقدّمها الموقع وخطوط الكتابة والألوان والوظيفة التي ينجزها الموقع.

التخطيط قبل كل شيء

لا بد من تجميع بعض الأفكار قبل أن تبدأ بأيّ شيء، أي ما الذي سيقدِّمه موقعك؟ فبإمكانك برمجة موقع الويب ليفعل أيّ شيء تقريبًا، لكن وطالما أنها تجربتك الأولى، فلا بد أن تُبقي الأمور بسيطةً قدر المستطاع، لذلك سنبدأ ببناء صفحة ويب بسيطة بعنوان وصورة وبعض المقاطع النصية، وقبل أن نبدأ لا بد من الإجابة على الأسئلة التالية:

1. ما الموضوع الذي يدور حوله هذا الموقع؟ هل يدور حول الحيوانات الأليفة أو حول مدينة محددة أو شخصية ما.
2. ما المعلومات التي ستقدِّمها حول هذا الموضوع؟ اكتب عنوانًا وبعض الفقرات ثم فكّر بصورة مناسبة لتعرضها على الصفحة.
3. كيف يبدو موقعك؟ ماهو لون الخلفية؟ ما هي أنواع خطوط الكتابة المناسبة؟

ملاحظة: تحتاج المشاريع الأكثر تعقيدًا إلى تفاصيل أكثر تتعلق بالألوان وخطوط الكتابة والفراغات ما بين العناصر في الصفحة وأسلوب الكتابة الملائم وهكذا، إذ تُدعى هذه التفاصيل عادةً بدليل التصميم design guide أو نظام التصميم أو دليل المنتج، كما يمكنك الاطلاع على أمثلة عن ذلك في معرض فايرفوكس للتصاميم.

رسم الخطوط الأولى لتصميمك

أمسك ورقةً وقلمًا وحاول رسم شكل الموقع الذي تريده، إذ لن تجد الكثير لرسمه في الصفحة البسيطة التي سنبنيها، لكن من الأفضل أن تعتاد الأمر منذ اللحظة، إذ سيساعدك ذلك كثيرًا، ولا حاجة بالطبع إلى رسم متقن.

ملاحظة: يبدأ المصممون برسم تصوراتهم عن الموقع رسمًا تقريبيًا على ورقة مهما كان معقدًا، ثم يبنون نسخةً رقميةً باستخدام محرر رسومي أو تقنيات ويب أخرى، وغالبًا ما يضم فريق ويب مصممي رسوميات ومصممي تجربة المستخدِم، إذ يضع مصممي الرسوميات (الغرافيك) التصور المرئي للموقع، بينما تقتصر مهمة مصممي تجربة المستخدِم على تصوّر تجربة المستخدِم لهذا الموقع وطبيعة تفاعله معه وتوجيه التصميم لتحقيق التجربة الأفضل.

اختيار المواد المساعدة

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

النصوص

لا بد أن يكون عنوان الصفحة والمقاطع النصية التي ستعرضها محضرة مسبقًا، لذا تأكد من ذلك.

السمة اللونية للصفحة

انتق لونًا مناسبًا باستخدام أيّ أداة لانتقاء الألوان، فعندما تنقر على اللون المطلوب، فسترى ستة محارف تشبه الرمز التالي 6600AB# عادةً، إذ يُعَدّ هذا الرمز رمزًا ست عشريًا يمثل اللون، وبعدها انسخ هذا الرمز واحفظه في مكان يسهل عليك العودة له لاحقًا.

الصور

استخدم محرك البحث الذي تراه مناسبًا لإيجاد الصور المناسبة لموقعك.

1. انقر على الصورة حين تجدها لعرضها بأبعاد أكبر.
2. انقر بالزر اليميني على الصورة (أو انقر عليها مع ضغط زر Ctrl في ماك) ثم اختر "حفظ الصورة باسم Save Image As" وانتق مكانًا مناسبًا على جهازك لحفظها فيه، كما يمكنك نسخ عنوان الصورة من شريط عنوان المتصفح وحفظه لاستخدامات لاحقة.

انتبه إلى أنّ معظم الصور الموجودة على ويب محمية بحقوق نشر معيّنة، ولكن يمكنك استخدام مرشّح رخص الاستخدام من جوجل Google's license filter مثلًا إذا كنت تستخدم "صور جوجل Google Images" في البحث وذلك للتقليل من مشاكل خرق هذه الحقوق، ثم انقر على زر "أدوات Tools" ثم اختر "التراخيص الإبداعية العامة Creative Commons licenses" من قائمة "حقوق الاستخدام Usage Rights".

خطوط الكتابة

لاختيار خط كتابة معيّن:

1. انتقل إلى خطوط الكتابة من جوجل Google Fonts" واعثر على الخط المناسب.
2. انسخ أسطر الشيفرة التي يزوّدك بها جوجل إلى المحرر النصي لديك واحفظها لاستخدامات لاحقة.

ترجمة -وبتصرف- للمقال ?What will your website look like.

اقرأ أيضًا

• المقال السابق: تثبيت البرمجيات الأساسية للانطلاق في تطوير الويب
• أفضل 12 أداة انتقاء للألوان لمصممي الويب
• الألوان في تصميم الرسوميات ونظرية الألوان
• الحركات في تصميم الويب: لماذا نستخدمها ومتى؟
• فلسفة تصميم الويب المتجاوب

ستتعلم في هذا المقال كيفية إنشاء لعبة إلكترونية من منظور اللاعب أو الشخص الأول first person view وتختصر إلى FPV أو ما يدعى بألعاب البعد الثاني والنصف 2.5D، وذلك باستخدام سكراتش ويجب عليك اتباع الدليل الموجز أدناه أثناء تنفيذ المشروع.

ستعمل في هذا المشروع على:

• إنشاء مشهد من منظور اللاعب.
• توظيف كتل لبناتي و النُسخ لإنشاء المشهد.
• فهم كيف يؤثر حجم الكائن وإحداثياته على منظور اللعبة.

لتحصل على نتيجة مشابهة لما يلي:

انقر على العلم الأخضر واستمتع بتجربة قيادة السيارة مع الاستماع لأنغام الموسيقى، استخدم الدواسات لتغيير السرعة وقُد بحذر. واضغط على الزمور عند ظهور الحيوانات على الطريق لتنبيهها.

معلومة: تعتمد ألعاب البعد الثاني والنصف 2.5D على بعض الخدع والمؤثرات لتبدو وكأنها ثلاثية الأبعاد، أما ألعاب الشخص الأول فتوفر للاعب واجهة لعب تشعره وكأنه داخل عالم اللعبة.

الدليل الموجز لإنشاء لعبة إلكترونية تفاعلية

ستعمل في هذا المشروع على إنشاء مشهد من منظور اللاعب، أو ما يُدعى بمحاكاة البعد 2.5، بحيث يبدو للمستخدم بأنه ينظر من خلال شاشة اللعبة. ويمكنك استعمال النسخة الأولية المرفقة بملف مشروع قيادة السيارة هنا.

يجب على لعبتك أن تحقق ما يلي:

• استخدام كائنات ذات أحجام مختلفة لتجسيد بعدها عن اللاعب.
• استخدام كتل النُسخ لإنشاء نسخ من الكائنات.
• استخدام كتل لبناتي لتنظيم الكتل البرمجية واستخدام عدة مدخلات.

وننصح بأن يكون للعبة غرضٌ تعليمي، وأن تضيف عليها مؤثرات صوتية لجعلها أكثر واقعية.

استلهم أفكارك

فكر في المشهد الذي ترغب في إنشائه، ثم اطلع على المشاريع التالية لتستلهم الأفكار للعبتك التفاعلية، وانقر على الرابط لتنتقل إلى نسخة المتصفح من سكراتش وتشاهد الكتل المستخدمة:

• مشروع نزهة الشتاء:

شغّل المشروع وانقر على حرفي R وL للتحرك يمينًا أو يسارًا وشاهد ماذا سيحدث عند مرورك تحت الغيوم.

• مشروع الرؤية الليلية:

ستتاح لك فرصة تجربة الرؤية الليلية في هذا المشروع، ولكن من وجهة نظر السنجاب! انقر على الأشياء التي ستظهر على الشاشة وشاهد كيف سيتفاعل معها السنجاب.

• مشروع موسيقى الشاطئ:

انقر على الآلات الموسيقية واستمتع بأنغامها.

إعداد فكرة اللعبة

يجب عليك وضع خطة للعبتك والتفكير في المشهد الذي تود إنشائه، وكيف سيتفاعل اللاعب معه.

اختيار بيئة اللعبة

فكر ما هي البيئة التي تود أن تدور أحداث اللعبة فيها؟ هل تريد إنشاء مشهد طبيعي يتحرك فيه اللاعب باستخدام أزرار على الشاشة؟ أم مشهدًا داخليًا، كغرفة الجلوس، بحيث يتفاعل اللاعب مع الأغراض فيه، كالتلفاز مثلًا؟ أم تفضل إنشاء مشهد من وراء مقود القيادة لأحد المركبات ليتفاعل اللاعب مع عجلة القيادة ومقبض السرعة والدواسات ويستمتع بتجربة القيادة؟ الخيار متاح لك.

تحديد الجمهور

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

تصميم الشخصيات والخلفيات

أنشئ مشروعًا جديدًا في برنامج سكراتش، وأبقِ قلمًا وورقةً بالقرب منك لتدوين الأفكار، قرر ما هي الصور التي تود استخدامها في مشروعك؟ يمكنك استخدام الكائنات والخلفيات الموجودة في سكراتش، أو استخدام محرر الرسوم في سكراتش لرسم أشكالك الخاصة، كما يمكنك تنزيل الصور من الإنترنت ورفعها إلى سكراتش.

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

إنشاء خلفية جديدة باستخدام محرر الرسوم

اختر رمز الرسام أو محرر الرسوم Paint من قائمة اختيار خلفية Choose a Backdrop:

ستظهر لك شاشة برنامج الرسام، ولاحظ أن الخلفية الجديدة ستكون محددة في القائمة، مع الخلفيات الأخرى في مشروعك إن وجدت:

اضغط على الأداة ذات الشكل المستطيل ثم على أداة ملء اللون وذلك لاختيار اللون الذي تريده للخلفية الرئيسية، ثم اسحب الشكل المستطيل فوق الخلفية بكاملها، كما يلي:

كما يمكنك استخدام الأداة المستطيلة Rectangle tool، أو الأداة الدائرية Circle tool، أو الفرشاة Brush tool، أو استخدام الأدوات الثلاث جميعها لإضافة تفاصيل إلى الخلفية.

يُنصح بأن تسمي الخلفية باسمٍ يعبر عن محتواها عند انتهائك من التعديل عليها، ففي مثالنا رسمنا هضبة وسماء وسمينا الخلفية "هضبة":

ستظهر الخلفية على المنصة وستجدها أيضًا في كتل المظاهر:

إنشاء الخلفيات والكائنات باستخدام الأشكال

يمكنك إنشاء خلفيات ومظاهر للكائنات في الرسام باستخدام أشكال بسيطة.

أولًا، انقر على خيارالرسام من أيقونة اختيار خلفية أو من أيقونة اختيار كائن:

ثم اختر أداةً مما يلي لإنشاء الأشكال التي ترغب بها:

• الأداة الدائرية: اضغط على رمز الأداة لرسم دائرة، اضغط باستمرار على مفتاح Shift لمساعدتك بالرسم.

• الأداة المستطيلة: استخدم هذه الأداة لرسم مستطيل، واضغط باستمرار على مفتاح Shift لرسم مربع.

• الأداة المثلثة: يمكنك استخدام هذه الأداة لرسم مستطيلاتٍ أو مربعاتٍ أولًا، ثم الضغط على أداة تغيير الشكل لاختيار جزءٍ من الشكل وحذفه والحصول على شكل المثلث!

انقر على أداة تغيير الشكل ثم انقر على الزاوية اليمنى العليا للمربع واسحبها إلى منتصف الشكل للحصول على مثلث.

استخدم أداة ملء اللون لتغيير لون الشكل:

قد تحتاج لاستخدام أداتي طبقة إلى الأمام و طبقة إلى الخلف لتغيير موضع الشكل في الخلفية:

كما يمكنك تحديد عدة أشكال ومعاملتها كشكل واحد باستخدام أداة التجميع Group وبذلك يسهل عليك تحريك الأشكال وتعديلها:

إليك مثالًا عن كائنٍ أنشأناه باستخدام الأداة الدائرية والمستطيلة، كما يمكنك الانتقال إلى محرر سكراتش للتعديل عليه:

لا تنسى تسمية الأشكال والخلفيات التي أنشأتها في الرسام بأسماء مناسبة.

تعديل مظهر الكائنات بنسخ أجزاء من مظاهر كائنات أخرى

يمكنك تعديل مظهر الكائنات عن طريق نسخ أجزاء من مظاهر كائنات أخرى للحصول على مظاهر جديدة! اضغط على علامة تبويب المظاهر وأنشئ نسخة من المظهر الذي تود تعديله، ليتسنى لك استخدامه فيما بعد، وذلك بالضغط بالزر اليميني للفأرة على المظهر واختيار مضاعفة:

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

سيبدو المظهر بعد الحذف كما يلي:

تذكر أنه يمكنك التراجع عن أي خطوة بالضغط على رمز التراجع التالي:

حدد الآن الجزء الذي تود نسخه من المظهر ثم اضغط على خيار النسخ:

إذا أردت إضافة جزء من مظهر غير موجود في علامة تبويب المظاهر، فيجب عليك إضافة المظهر إلى الكائن أولاً، وذلك بالنقر فوق أيقونة اختيار مظهر، ثم البحث عنه والنقر فوقه لإضافته إلى كائنك:

اضغط على خيار اللصق لإضافة الجزء الذي نسخناه سابقًا، سيبدو المظهر كما يلي:

ثم انتقل إلى علامة تبويب المقاطع البرمجية لاستخدام المظهر الجديد في الكتل البرمجية:

إعداد اللعبة وتنفيذها

حان الآن وقت إنشاء مشهد اللعبة، هل تريد اعتماد خلفية ثابتة، أم تفضل اختيار خلفية متحركة؟ الأمر متروك لك.

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

إضافة خلفية متحركة

سنضيف كائنًا متحركًا في الخلفية بدلًا عن تحريك الخلفية، وذلك بإنشاء نسخة عن الكائن، وإضافة أجزاء من الخلفية إليه (إن لزم الأمر) باستخدام خيار النسخ واللصق في محرر الرسام:

أولًا، اختر الكائن الذي تريد تحريكه ثم أنشئ متغيرًا جديدًا بالنقر على كتل المتغيرات من القائمة، وسمّه "تحرك"، ثم أضف عليه الكتل التالية لتحريك الكائن باتجاه مؤشر الفأرة:

كما يمكنك التعديل على الكتل السابقة وتغيير قيمة المتغير تحرك عن طريق النقر على أحد الأزرار أو مفاتيح لوحة المفاتيح.

فكر ما هي الكائنات التي تود استخدامها، هل تريد استخدام كائن ثابت، هل تريده أن يغير مظهره عند النقر عليه؟ هل تريده أن يتنقل في الخلفية؟ كيف تود التحكم به؟

إليك الخيارات التالية التي يمكنك تطبيقها على الكائنات:

تحريك الكائن عند النقر على الأسهم من لوحة المفاتيح

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

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

تحريك الكائن بواسطة أزرار على الشاشة

أضف كائنات وضعها في مكان مناسب على المنصة لتكون بمثابة أزرار لتحريك الكائن.

بإمكانك إضافة كائن السهم، كما في مشروع تحدي إنقاذ السفينة الفضائية، بكتابة "arrow" في مربع البحث في مكتبة الكائنات، ووضعه في مكان مناسب على المنصة:

ثم أضف كتلة بث ليرسل السهم عند نقره، رسالة تخبر عن الاتجاه الذي يجب أن يتحرك به الكائن:

تذكر أن عليك تكرار الخطوة للسهم اليساري.

ثم أضف الكتل التالية ليتحرك الكائن في الاتجاه الموافق لرسالة البث:

كما يمكنك اختيار الكائن الذي تفضله لاستخدامه كزر لتحريك الشخصيات، أو إنشاء كائن خاص بك.

تغيير مظهر الكائن عند النقر عليه

إليك تذكرةً بعض الكتل التي يمكنك استخدامها لتغيير مظهر الكائن:

تغيير هيئة الكائن باستخدام المظاهر

إليك مثالًا عن بعض الكتل التي يمكنك استخدامها لتغيير هيئة الكائن باستخدام المظاهر:

تغيير تموضع الكائنات باستخدام الطبقات

يمكنك استخدام الكتلتين البرمجيتين التاليتين لإرسال الكائن إلى الطبقة الأمامية أو الخلفية:

نسخ الكائنات

فكر في مشروعك وما يناسبه، هل ستنشئ عدة ثسخ من الكائن؟ كيف ستتصرف هذه النُسخ؟ هل تفضل أن تتصرف بشكل متفرد؟

إنشاء عدة نسخ من الكائن

يمكننا استخدام كتلة أنشئ نسخة من كتل التحكم لإنشاء عدة نسخ من الكائن، وحذفها بعد تحقق شرط ما، كما في الامثلة التالية:

إنشاء نسخ عشوائية

يمكنك إنشاء نسخ عشوائية من الكائن تتحرك، وتتصرف بطريقة مختلفة، باستخدام كتلة العدد العشوائي من كتل العمليات:

إنشاء نسخ من الكائن عند أحداث معينة

يمكنك إنشاء نسخ من الكائن باستخدام كتل الأحداث.

إليك مثالًا على إنشاء نسخة من الكائن عند النقر عليه:

كما يمكنك إنشاء النسخ عند النقر بزر الفأرة، وجعل النسخ، تنتقل إلى موضع معين أو كائن معين، أو تتبع موضع الفأرة، كما في المثال التالي باستخدام الكتل التالية:

لتحصل على النتيجة التالية:

إضافة الأصوات والمؤثرات الصوتية

هل تود إضافة تأثيرات صوتية أو موسيقى إلى لعبتك؟ إليك تذكرة بالكتل التي قد تحتاجها:

إضافة ملحق الموسيقى

لإضافة الموسيقى إلى مشروعك، انقر على أيقونة إدراج إضافة الموجود أسفل قائمة الكتل، ثم انقر على إضافة الموسيقى:

بعد إضافتها ستظهر لك كتل جديدة، إليك شرحًا عن أهم عناصرها:

• وحدة الإيقاع أو beat وهي وحدة زمنية تستخدم في الموسيقى، وتكون مدتها إما نصف ثانية، أو ربع ثانية.لك الخيار في تحديد المدة.
• سرعة الأداء أو tempo تحدد عدد وحدات الإيقاع في الدقيقة الواحدة.
• النغمة أو note هي درجة النغمة المعزوفة.

تعني الكتلة التالية أن مدة وحدة الإيقاع هو ثانية واحدة:

إضافة صوت للكائنات على المنصة

حدد الكائن الذي تريد إضافة صوتٍ له، ثم اضغط على رمز إضافة صوت للوصول إلى مكتبة الأصوات، حيث يحتوي برنامج سكراتش على مكتبة أصوات مصنفة إلى مجموعات يمكن الاختيار منها وإضافتها إلى الكائنات:

ضع مؤشر الفأرة (أو إصبعك، إذا كنت تستخدم جهازًا لوحيًا) فوق رمز التشغيل، لتشغيل الصوت:

ثم اضغط على الصوت الذي ترغب به لإضافته إلى الكائن، ستنتقل بعدها إلى علامة تبويب الأصوات وسيظهر الصوت الذي اخترته:

ستجد الصوت الجديد الذي أضفته ضمن قائمة كتل الصوت في علامة تبويب الأصوات:

كما يمكنك إضافة الأصوات للمنصة بنفس الطريقة.

تسجيل الأصوات

اختر الكائن الذي تريد إضافة تسجيل صوت إليه ثم اضغط على علامة تبويب الأصوات:

اضغط على رمز إضافة صوت ثم اضغط على رمز التسجيل:

ثم اضغط على زر التسجيل البرتقالي عندما تكون جاهزًا للتسجيل:

واضغط على زر إيقاف التسجيل عند الانتهاء:

سيظهر بعدها المقطع الذي سجلته، ويمكنك إعادة التسجيل إذا لم ترضى عن النتيجة. اسحب الدوائر البرتقالية لقص المقاطع التي لا ترغب بها، والاحتفاظ بالمقطع الذي تريده، ذو اللون الأزرق:

اضغط زر الحفظ عند الانتهاء، ستنتقل بعدها إلى علامة تبويب الأصوات وسيظهر التسجيل الذي أضفته:

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

إضافة تأثيرات للأصوات

تتيح علامة تبويب الأصوات عدة خيارات لتعديل الاصوات كتسريع الصوت أو إبطائه، أو كتمه، أو إضفاء تأثير التلاشي عليه أو جعله كصوت آلي!

يمكنك اختيار إحدى التأثيرات من شريط التأثيرات أدنى الصوت:

لاحظ أن التأثير يعاد تطبيقه من جديد كلما نقرت عليه، وبذلك تحصل على تأثير مضاعف عند النقر مرتين.

ولتطبيق التأثير على جزء من الصوت، فانقر بزر الفأرة الأيسر (أو بإصبعك إذا كنت تستخدم جهازًا لوحيًا)، لتحديد بداية المقطع الذي تود تعديله ثم استمر بالنقر واسحب المؤشر لتحديد نهاية المقطع، سيظهر الجزء المحدد باللون الازرق، انقر على التأثير الذي تود تطبيقه، وانقر على خيار نسخ إلى صوت جديد للحصول على المقطع المعدل كصوت منفصل:

تطبيق تأثير عكس الصوت

يمكنك تطبيق تأثير عكس الصوت لخلق تأثيرات مميزة والحصول على أصوات جديدة، كما في الصوت "Slide whistle" الذي استخدمناه في مشروع التعاويذ السحرية عند تكبير الكائن، ثم طبقنا عليه تأثير عكس الصوت للحصول على صوت مناسب لعملية تقليص الكائن! جرب التأثير واستمتع بالحصول على أصوات جديدة!

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

ضاعف الصوت قبل عكسه للحصول على النسخة الأصلية منه والمعكوسة ، إذا أردت.

قص الأصوات

اختر الصوت الذي تريد تعديله أو قصه، ثم انقر بزر الفأرة الأيسر (أو بإصبعك إذا كنت تستخدم جهازًا لوحيًا)، لتحديد بداية المقطع الذي تود تعديله واستمر بالنقر واسحب المؤشر لتحديد نهاية المقطع، سيظهر الجزء المحدد باللون الازرق، انقر على خيار الحذف، أو التأثير الذي تود تطبيقه، من شريط الخيارات أعلى الصوت:

كما يمكنك التراجع عن التعديلات التي لا ترغب بها بالنقر على سهم التراجع.

تكرار الأحداث

بإمكانك استخدام كتل التكرار من كتل الاحداث لتنفيذ أمر ما عدة مرات، أو تنفيذه إلى أن يتحقق شرط ما، وذلك باستخدام كتلة كرر حتى. إليك مثالًا عن تحريك الكائن إلى أن يصل موقعه على المحور الشاقولي -250:

استخدام كتل لبناتي

فكر في الطريقة المثلى لتنظيم الكتل البرمجية والمدخلات اللازمة لها، هل يمكنك استخدام كتل لبناتي لتنظيم المشروع؟

استخدام كتل لبناتي لتنظيم الكتل البرمجية

يمكن استخدام كتل لبناتي لتنظيم استخدام الكتل، فيمكننا كتابة الكتل وتعريفها مرةً واحدة ثم استدعائها بكتلة واحدة:

اختيار الدخل باستخدام كتل لبناتي

تتيح لنا كتل لبناتي إمكانية إضافة مدخلات واستخدامها في برنامجنا، إليك المثال التالي الذي يوضح هذا الاستخدام:

تغيير حجم الكائن وفقا لموقعه

تعتمد مشاهد البعد الثاني والنصف على تغيير حجم الكائنات وفقًا لموضعها لتبدو وكأنها بعيدة، أو قريبة. إليك مثالًا عن كيفية تنفيذ ذلك:

لتحصل على النتيجة التالية:

لا تتردد في عرض مشروعك على شخص آخر للحصول على ملاحظاته وإجراء التعديلات اللازمة على لعبتك.

تصحيح الأخطاء

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

• مشكلة عدم ظهور النسخ على المنصة: تأكد من النقر على خيار الإظهار من نافذة الكائنات، وتأكد من إرسال الكائنات إلى الطبقة الأمامية.

• مشكلة عدم تحرك الكائنات بدقة: تأكد من موضع الكائن، ومن موضع محوره من علامة تبويب المظاهر، اسحب الكائن إلى حافة المنصة وتحقق من إحداثياته على المحورين، ثم تأكد من الإحداثيات في كتل الحركة.
• مشكلة عدم عمل كتل لبناتي بدقة: تأكد من استخدام اللبنة الجديدة بعد تعريفها، إذ لا تكفي كتلة التعريف لتشغيل البرنامج.
• مشكلة عدم تنفيذ النُسخ لأي شيء: تحقق من عدم وجود شرط ما يمنع عمل النسخ، كأن تتحرك النسخ إلى أن تلامس حافة المنصة، فإذا كانت النسخ تُولَد عند الحافة فلن تتحرك.
• مشكلة تحرك الكائنات في الإتجاه الخطأ: تأكد من استخدام كتل الحركة على الوجه الصحيح، إذ تعمل كتلة غيّر الموضع س بمقدار على تحريك الكائن يمنةً أو يسرة، أما كتلة تغيير الموضع ص، فتحرك الكائن لأعلى أو لأسفل.

وتأكد من استخدام الأعداد الموجبة لزيادة الإحداثيات، والأعداد السالبة لإنقاصها.

قد تواجهك مشكلات أخرى، حاول إصلاحها باستخدام ما تعلمته إلى الآن، وإذا استعصى عليك الحل فلا تتردد في إضافة سؤالك في قسم الأسئلة والأجوبة في أكاديمية حسوب للحصول على الدعم والمساعدة.

ترقية المشروع

يمكنك ترقية مشروعك، حين يتسنى لك ذلك، عن طريق إضافة بعض التفاصيل والتعديلات عليه. إليك بعض المقترحات لتحسين لعبتك:

• إضافة المزيد من الكائنات إلى لعبتك.
• إضافة المزيد من التأثيرات صوتية والموسيقى لجعل اللعبة أكثر حماسًا.
• استخدام عدة خلفيات لتبديل المشهد.

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

مشاركة المشروع

ألهم مستخدمي سكراتش عبر مشاركة مشروعك باتباع الخطوات التالية واحرص على عدم مشاركة أي معلومات شخصية: أولًا، سمّي مشروعك باسم مناسب.

ثانيًا، انقر على خيار المشاركة لجعل المشروع متاحًا للجميع.

ثالثًا، أضف إرشادات للاعبين، إن أحببت، في مربع الإرشادات. كما يمكنك إضافة ملاحظة في مربع الملاحظات والملكية إذا كان مشروعك أصليًا، أو يمكنك ذكر المشروع الأصلي الذي عدلت عليه.

أخيرًا، انقر على خيار نسخ الرابط لمشاركته مع الأصدقاء عبر وسائل التواصل الاجتماعي.

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

ولا تنسى مشاركتنا مشروعك على مجتمع سكراتش في منصة حسوب IO.

خاتمة

بهذا تكون قد أتممت مشروع برمجة لعبة إلكترونية من منظور اللاعب باستخدام سكراتش، واستعمل النسخة الأولية المرفقة بملف مشروع قيادة السيارة

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

ترجمة -وبتصرف- للمقال Welcome to my world من الموقع الرسمي لراسبيري باي.

اقرأ أيضًا

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

سنتعلم في هذا المقال كيفية إنشاء لعبة متجر تفاعلي باستخدام سكراتش scratch، بحيث يكون اللاعب نفسه زبونًا في المتجر.

لنحصل على نتيجة مماثلة لما يلي:

انقر فوق الفاكهة التي تريد شرائها ولاحظ كيف يزداد الحساب، ثم انقر على البائع لدفع الحساب.

ماذا يحدث إذا حاولت الدفع قبل اختيار أي فاكهة؟ كيف يعرف المشروع أنك لم تختر فاكهة؟

ستتعلم في هذا المقال:

1. كيفية إنشاء متجر فيه بضائع يمكن للاعب شراؤها.
2. كيفية التخطيط للحصول على متجر تفاعلي بسيط.
3. تصفُّح المتاجر التي أنشأها الآخرون ومشاركة متجرك حتى يتمكن الآخرون من تجربته.

استلهم أفكارك

فكر في هوية متجرك، ما العناصر التي تريد عرضها للبيع، ما الطريقة التي تفضل أن يدفع بها الزبون؟

اطلع على المشاريع التالية لتستلهم الأفكار لمتجرك التفاعلي ولاحظ أن بعضها يتيح للزبون شراء عدة سلع معًا.

• مشروع متجر الألبسة انقر لمشاهدة المشروع في نسخة المتصفح:

• مشروع متجر المثلجات انقر لمشاهدة المشروع في نسخة المتصفح:

• مشروع آلة البيع الالكترونية انقر لمشاهدة المشروع في نسخة المتصفح:

اختيار هوية المتجر

فكّر ما هي هوية متجرك؟ ما هو نوع المتجر الذي تريد أن تديره؟ هل تريده متجرًا يبيع سلعًا واقعية؟ أم متجرًا خياليًا شبيهًا لما نراه في الأفلام؟

أولًا، أنشئ مشروعًا جديدًا في نسخة سطح المكتب من سكراتش،أو انتقل للعمل على المشروع في نسخة المتصفح.

ثانيًا، فكر ما هي الخلفية التي ستحتاجها لمتجرك؟ هل تفضل مكتبًا، أم طاولةً مع آلة محاسبة؟ أم نافذة بيع؟ هل تريد إضافة رفوف للمتجر؟ ثم انقر على أيقونة اختيار خلفية، أو استخدم الرسام لرسم خلفية خاصة بك أو للتعديل عليها.

ثالثًا، فكر كيف سيبدو البائع؟ هل تريده شخصًا من اختيارك أو شخصيةً خاملةً مثل صاحب المتجر أو مزارع أو أمين المكتبة؟ أم هل تريد أن يكون البائع آلةً، مثل آلة البيع الإلكترونية،أو الصندوق الموسيقي أو آلة المدفوعات النقدية؟ ثم انقر على أيقونة اختيار كائن لإضافته إلى مشروعك.

معلومة: تدعى الشخصيات التي تتفاعل معها في اللعبة بشخصيات غير قابلة للعب أو شخصيات خاملة non-player character -أو اختصارًا NPC-.

ما هي الألعاب التي تعرفها والتي تحتوي على شخصيات غير قابلة للعب؟ في المرة القادمة التي تلعب فيها، فكّر كيف يمكن عمل شخصية مماثلة.

رابعُا، انقر على كائن البائع:

ثم أنشئ متغيرًا جديدًا لتخزين اسم المتجر فيه، وذلك بإتباع الخطوات التالية:

انقر على قائمة كتل المتغيرات، ثم انقر على خيار إنشاء متغير:

ثم سمِّ المتغير باسمٍ مناسب واختر ما إذا كنت تريد جعله متاحًا للاستخدام في جميع الكائنات أم في هذا الكائن فقط.

لاحظ أن المتغير سوف يظهر على المنصة، انقر عليه بالزر الأيمن للفأرة لتغيير طريقة عرضه أو إخفائه، كما يمكنك إخفاءه عن طريق إلغاء تحديده من قائمة كتل المتغيرات:

اسحب المتغير وضعه في المكان الذي تراه مناسبًا على المنصة. خامسًا، أضف الكتلة التالية لإسناد اسمٍ للمتجر:

سادسًا، تأكد من أنه يمكنك رؤية اسم عملك مثل قيمةٍ للمتغير على المنصة.

سابعًا، انقر على كائن البائع ثم أضف رسالة بث وسمها "الزبون التالي":

ثامنًا، أضف الكتل التالية لجعل البائع يرحب بالزبون الجديد عندما يستلم رسالة الزبون التالي:

تاسعًا، قد تواجهك مشكلة وهي أن متغير اسم المتجر على المنصة يظهر القيمة 0، ولحل هذه المشكلة، تأكد من كتابة اسم المتجر في كتلة اجعل اسم المتجر مساويًا، ثم انقر على العلم الأخضر.

تزويد المتجر بالسلع

الآن، سنزود المتجر بالسلع وسيكون لكل سلعة سعرًا يُضاف على متغير "فاتورة" الزبون.

أولًا، أنشئ متغيرًا، كما تعلمنا في الفقرة السابقة، وسمّه "فاتورة" واجعله متاحًا لجميع الكائنات، ثم أضف الكتلة التالية إلى كائن البائع لتصفير القيمة الإبتدائية للفاتورة:

تذكر أنه يمكنك تغيير طريقة عرض المتغير بالنقر عليه بالزر الأيمن للفأرة.

ثانيًا، فكِّر ما هي البضائع التي تريد بيعها في متجرك؟ هل تريد بيع الأطعمة والمشروبات؟ أم تريد بيع المعدات الرياضية أو الألعاب أو الأدوات؟ هل تفضل بيع الملابس والمجوهرات؟ أم تريد بيع الوصفات السحرية وكتب التعاويذ في متجرك الفريد؟ أطلق العنان لخيالك وأضف البضائع التي تريدها إلى متجرك.

كما يمكنك إضافة سعر لكل كائن وذلك باستخدام أداة النص في الرسام، أو إضافة السعر على المنصة ووضع البضاعة بجانب سعرها.

ثالثًا، أضف الكتل التالية لتغيير قيمة الفاتورة وفقًا لسعر البضائع التي يختارها الزبون:

كما يُنصح بإضافة صوت لتأكيد إضافة السلع إلى سلة الزبون، وذلك بالنقر على نافذة الأصوات ثم النقر على أيقونة اختيار صوت واختيار أحد الأصوات من المكتبة بالنقر عليه لإضافته للمشروع.

اخترنا إضافة الصوت "Coin" إلى كائن السلعة.

سيظهر الصوت الذي أضفته في قائمة كتل الصوت.

اختبر مشروعك وتأكد من أن قيمة الفاتورة تزداد وفقًا لسعر البضائع، وتأكد من تشغيل المؤثر الصوتي عند النقر على البضائع. ثم انقر على العلم الأخضر لتصفير قيمة الفاتورة.

رابعًا، أضف مزيدًا من البضائع إلى متجرك، يمكنك مضاعفة سلعتك الأولى ثم تغيير مظهرها في الرسام، أو إضافة كائن جديد ثم سحب الكتل البرمجية للكائن الأول وإفلاتها فوق الكائن الجديد لنسخها، ثم أضف السعر إلى مظهر الكائن أو الخلفية.

خامسًا، انقر على الكائن الجديد ثم عدّل سعره في الكتل البرمجية.

سادسًا، انقر على العلم الأخضر لتختبر مشروعك وتأكد من أن قيمة الفاتورة تزداد وفقًا للسعر الصحيح للبضائع عند النقر عليها.

تصحيح الأخطاء

قد تجد بعض الأخطاء في مشروعك والتي تحتاج إلى إصلاح،فيما يلي بعض الأخطاء الشائعة التي قد تواجهها:

• لا تُصفّر قيمة الفاتورة عند النقر على زر العلم الأخضر: تأكد من أنك أضفت لكائن البائع كتلة تغيير قيمة متغير الفاتورة بعد كتلة عند النقر على العلم الأخضر.
• لا تتغير قيمة الفاتورة على النحو الصحيح عند نقر البضائع: تحقق من إضافة كتلة تغيير قيمة الفاتورة، وليس كتلة اجعل قيمة الفاتورة، بعد كتلة عند النقر على الكائن إلى جميع كائنات البضائع، وتحقق من أنك أضفت السعر الصحيح في الكتلة.

لا تنسى حفظ المشروع.

عملية الدفع

في هذه الخطوة يجب على البائع التحقق من ثمن مشتريات الزبون واستلام ثمنها، ثم الترحيب بالزبون الجديد.

أولًا، أضف الكتل التالية لإخبار البائع الزبون بثمن مشترياته:

ثانيًا، أضف صوتًا إلى البائع لتخبر الزبون أن طلبه قيد المعالجة، استعن بالفقرة السابقة إن احتجت ذلك.

ثالثًا، أضف الكتل التالية لتصفير قيمة الفاتورة بعد الدفع، وتوديع الزبون ثم بث رسالة لاستقبال الزبون التالي:

رابعًا، أضف خيارًا للزبون لإلغاء الطلب، وذلك عبر سؤال الزبون باستخدام كتلة إسأل عما إذا أراد الدفع أو إلغاء الطلب، واستخدام كتلة إذا للتحقق من إجابته؛ ففي حال كانت "الإجابة = دفع"، اسحب كتل الدفع السابقة داخل كتلة إذا، كما يلي:

ثم أضف على الكتل السابقة كتلة إذا مرةً أخرى لإلغاء الطلب إن كانت "الإجابة = إلغاء" وأضف داخلها كتل إلغاء الطلب التالية:

ستبدو الكتل لديك كما يلي:

خامسًا، التحقق من قيمة الفاتورة:

أضف كتلة إذا… وإلا للتحقق من قيمة الفاتورة، فإذا كانت قيمة الفاتورة أكبر من الصفر سينفِّذ البرنامج الكتل البرمجية، وإلا سيظهر البرنامج رسالةً للزبون لتذكيره باختيار البضائع التي يود شراءها، كما يلي:

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

سادسًا، اختبر المشروع وتأكد من تشغيل المؤثر الصوتي عندما يدفع الزبون، ومن تصفير الفاتورة بعد الدفع أو إلغاء الطلب.

تصحيح الأخطاء

قد تجد بعض الأخطاء في مشروعك والتي تحتاج إلى إصلاح، فيما يلي بعض الأخطاء الشائعة التي قد تواجهها:

• لا يحدث شيء عند النقر على البائع: تأكد من أنك أضفت كتلة عند النقر على هذا الكائن للبائع، فإذا أضفتها لكائن آخر، فاسحبها إلى الكائن الصحيح ثم احذفها من الكائن الآخر.
• لا يخبرنا البائع بقيمة الفاتورة: تأكد أنك أضفت متغير الفاتورة وليس كلمة الفاتورة.

• تظهر الكلمات مندمجة ببعضها: لا تنسى وضع مسافة بعد النص الأول في كتلة اربط أو قبل النص الثاني.
• لا تُصفّر قيمة الفاتورة بعد دفع الحساب: تحقق من إضافة كتلة تغيير قيمة الفاتورة، وليس كتلة اجعل قيمة الفاتورة.

• لا يستجيب البائع عند النقر عليه: تأكد من إضافة إشارة "الأكبر >" من كتل العمليات في كتلة إذا، كما يلي:

ميزات إضافية

إليك بعض الميزات التي يمكنها تحسين تجربة التسوق لعملائك. اطلع عليها وأضف منها ما تراه مناسبًا لمتجرك.

سؤال الزبون عن تجربته

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

كما يمكنك إضافة عدة أسئلة لجعل البائع يتفاعل ويتجاذب أطراف الحديث مع الزبون.

وضع البضائع في أكياس

يمكنك إضافة لمسة مميزة على متجرك بتعبئة بضائع الزبون في حقائب تسوق. أضف كائنًا مناسبًا ليكون بمثابة حقيبة أو هدية، أو استخدم الرسام وارسم الحقيبة التي تفضل وضع البضائع فيها، ُثم أضف الكتل التالية لتظهر الحقيبة في المقدّمة:

بعدها، أضف الكتل التالية على كل سلعة على حدى، كي تنزلق السلع إلى حقيبة التسوق وتوضع فيها:

كما يمكنك إخفاء الحقيبة وإظهارها فقط عندما يحاسب الزبون البائع:

انقر على العلم الأخضر واختبر المشروع، تأكد من أن جميع البضائع توضع في حقيبة التسوق وتختفي فيه.

تخصيص الكائنات

إليك طريقة فعّالة لتغيير مظهر الكائنات.

أولًا، أنشئ رسالة بث باسم المظهر الذي تريده:

ثانيًا، حدِّد الطريقة التي تريد أن يتفاعل بها الكائن عند استلام رسالة البث، كأن يظهر صوتًا ثم يغيِّر مظهره:

واختر المظهر الذي تريده من مظاهر سلعتك، كما يمكنك إخفاء المظهر أو تغييره عند قدوم زبون جديد:

يمكنك تكرار الخطوات السابقة لكل سلعة في متجرك.

منع الزبون من إضافة بضائع أخرى عند وصوله إلى طاولة البائع

يمكنك تحديد وقت للزبون تسمح له فيه بشراء البضائع ثم تمنعه من ذلك بعدها، كأن تمنعه من إضافة البضائع عند وصوله إلى طاولة البائع لدفع الحساب.

أولًا، أضف متغيرًا وسمِّه باسم مناسب، "متجر" مثلًا، إذ سوف نسند إلى هذا المتغير القيمة صح عندما يكون الزبون في المتجر، والقيمة خطأ عندما يكون على طاولة البائع.

ثانيًا، انقر على كائن البائع وأضف الكتلة التالية للسماح للزبون بالتبضع عند بدء المشروع:

ثالثًا، أضف الكتلة التالية لمنع الزبون من التسوق بعد نقره على كائن البائع:

رابعًا، أعد إضافة الكتلة التالية عند نهاية الكتل البرمجية للسماح للزبون الجديد بالتبضع:

خامسًا، لا تنسى تعديل كتل البضائع بإضافة كتلة إذا للتحقق فيما إذا كان الزبون في المتجر ويمكنه التبضع، كما يلي:

سادسًا، نفِّذ الخطوة السابقة لجميع البضائع في متجرك، ثم انقر على العلم الأخضر واختبر المشروع، هل تستطيع إضافة البضائع بعد الوصول إلى طاولة البائع؟

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

• مشروع متجر الفاكهة انقر لمشاهدة المشروع في نسخة المتصفح.
• مشروع القمصان الرائعة انقر لمشاهدة المشروع في نسخة المتصفح.
• مشروع متجر المثلجات انقر لمشاهدة المشروع في نسخة المتصفح.
• مشروع آلة البيع الالكترونية انقر لمشاهدة المشروع في نسخة المتصفح.

ترقية المشروع

حان الآن وقت ترقية المشروع، إليك بعض الاقتراحات الممكن تنفيذها:

• إضافة مزيدٍ من البضائع.
• إضافة مؤثرات رسومية وأصوات.
• رسم الخلفيات في الرسام.
• إنشاء متجر ثانٍ بجانب المتجر الاول.

كما يمكنك الإطلاع على معرض مشاريع المتجر التي نفذها أفراد مجتمع سكراتش لاستلهام الأفكار.

خاتمة

بهذا تكون قد أتممت مشروع إنشاء لعبة متجر تفاعلي باستخدام سكراتش.

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

إذا واجهت مشاكلًا مع برنامج سكراتش فيمكنك الحصول على الدعم والمساعدة عبر إضافة سؤالك في قسم الأسئلة والأجوبة في أكاديمية حسوب، ولا تنسى مشاركتنا مشروعك على مجتمع سكراتش في منصة حسوب IO.

ترجمة -وبتصرف- للمقال Next Customer please من الموقع الرسمي لراسبيري باي.

اقرأ أيضًا

• إنشاء لعبة الطبول الموسيقية باستخدام سكراتش
• برمجة مشروع عصا التعاويذ السحرية باستخدام سكراتش
• إنشاء مشهد متحرك يعتمد على عنصر المفاجأة باستخدام سكراتش
• إنشاء شخصية لها عيون ذات تأثير كرتوني باستخدام سكراتش

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

الأدوات التي يستخدمها المحترفون

• حاسوب: قد يبدو الأمر بديهيًا للبعض، لكن البعض الآخر لا يستخدِمه فعليًا، فهو يقرأ هذا المقال عن طريق الهاتف الجوال أو عبر حاسوب مكتبة عامة، أي لا بد من امتلاك حاسوب مكتبي أو محمول يعمل على ويندوز أو ماك أو لينوكس إذا قررت أن تكون مطور ويب حقيقي.
• محرر نصي: يساعدك في كتابة الشيفرة، وقد يكون نصيًا تمامًا مثل فجيوال ستديو كود Visual Studio Code أو نوت باد بلس بلس ++Notepad، أو هجينًا مثل دريم ويفر Dreamweaver وويب ستورم WebStorm، ولن تناسبك محررات النصوص المكتبية لأنها تعتمد على عناصر خفية تتداخل مع محركات التصيير التي تستخدِمها المتصفحات لتنفيذ الشيفرة.
• متصفح ويب: لتخابر شيفرتك من خلاله، وستجد الكثير من المتصفحات لكن أكثرها استخدامًا فايرفوكس وكروم وأوبِرا وسفاري وإنترنت إكسبلورر ومايكروسوفت إيدج، ولا بد أيضًا من اختبار أداء صفحاتك على متصفحات الهواتف الجوّالة وعلى المتصفحات القديمة التي لاتزال جمهورك يستخدِمها مثل إنترنت إكسبلورر 8 و 10، كما سيساعدك لينكس linux - وهو متصفح يعتمد على طرفية تُقاد بالأوامر النصية- في اختبار تجربة المستخدِمين ذوي المشاكل البصرية لموقعك.
• محرر صور: لإعداد الصور والرسوم البيانية لموقعك.
• نظام لإدارة الإصدارات version control system: لإدارة الملفات على الخوادم أو التعاون مع فريق من المطورين على مشروع ومشاركة الشيفرة والدعم وتحاشي التضارب في عملية تحرير الشيفرة، تُعد حاليًا غت Git أكثر هذه الأنظمة شعبية مع خدمتي الاستضافة جيت هاب GitHub وجيت لاب GitLab.
• برنامج لنقل الملفات عبر بروتوكول FTP: ويُستخدَم للتعامل مع حسابات خوادم الاستضافة القديمة لإدارة الملفات عليها، لهذا تستبدل جيت هذا البروتوكول بوتيرة متزايدة، كما توجد هناك مجموعة أخرى من البرامج التي تعتمد FTP و FTPS مثل سايبر دك Cyberduck أو فيتش Fetch أو فايلزيلا FileZilla.
• برنامج أتمتة المهام automation system: مثل Webpack و Grunt و Gulp لتنفيذ المهام المتكررة مثل اختزال أو تصغير الشيفرة وإجراء الاختبارات.
• مكتبات وأطر عمل وغيرها لتسريع كتابة شيفرات المهام الشائعة، فعادةً ما تكون المكتبات على هيئة ملفات جافاسكربت أو CSS جاهزة لتأمين وظائف جاهزة لاستخدامها في الشيفرات، في حين يمثِّل إطار العمل منظومةً متكاملةً نوعًا، إذ يقدِّم الوظائفية السابقة مع بعض الصيغ المخصصة لكتابة تطبيقات ويب بناءً عليها.
• أدوات إضافية أخرى.

الأدوات التي يحتاجها المطور المبتدئ

قد تبدو هذه القائمة مخيفةً، لكنك في الواقع قادر على البدء دون استخدام أيٍّ منها، إذ تحتاج في الحد الأدنى إلى محرر نصي ومتصفح حديث.

تثبيت المحرر النصي

قد يكون المحرر مثبتًا أصلًا على حاسوبك مع نظام التشغيل مثل "نوتباد" Notepad في ويندوز و"تيكست إديت" TextEdit مع ماك أو إس macOS، كما تختلف المحررات النصية التي تأتي مع لينكس حسب النسخة، فيأتي مثلًا "غيت إديت" gedit مع أوبونتو، وقد تستفيد أكثر من محررات أفضل من المحررات السابقة لتطوير ويب، إذ ننصحك البدء بالمحرر "فيجوال استوديو كود" Visual Studio Code، وهو محرر مجاني يزودك بعروض مباشرة لنتائج شيفرتك وبعض التلميحات المتعلقة بكتابتها.

تثبيت متصفح ويب حديث

حاول تثبيت متصفحين مما سنعرض في هذه القائمة وفقًا لنظام التشغيل لديك، وجهزهما للاختبار:

• لينكس: فايرفوكس Firefox أو كروم Chrome، أو أوبرا Opera أو بريف Brave.
• ويندوز: فايرفوكس أو كروم أو أوبرا أو إنترنت إكسبلورر أو مايكروسوفت إيدج أو بريف، علمًا أنه يأتي إيدج افتراضيًا مع ويندوز 10، كما يمكنك تثبيت هذا المتصفح أو إكسبلورر 11 لنسخ ويندوز 7 وما بعد.
• ماك أو إس: فايرفوكس أو كروم أو أوبرا أو سفاري أو بريف، علمًا أنه يأتي سفاري افتراضيًا مع ماك أو إس أو نظام آي أو إس.

ملاحظة: لا يتوافق إنترنت إكسبلورر مع بعض الميزات الحديثة لويب، وقد لا يتمكن من تنفيذ مشروعك، فلا داعي لأن تقلق بهذا الشأن أو أن تجعل مشروعك متوافقًا معه وخاصةً وأنت في مرحلة التعلم، لأن قلة قليلة من الأشخاص فقط هم من يستخدموه، وقد يتطلب التوافق مع هذا المتصفح في بعض المشاريع دعمًا خاصًا.

تثبيت خادم ويب محلي

لتجريب بعض المشاريع ستحتاج إلى خادم ويب لتحصل على النتيجة الصحيحة، اطلع على مقال "إعداد خادم اختبار محلي" لتفاصيل أكثر.

ترجمة -وبتصرف- للمقال Installing basic software.

اقرأ أيضًا

• المقال السابق: عالم الويب ومعاييره
• مدخل إلى خادم الويب
• دليل إعداد خادم ويب محلي خطوة بخطوة

سنتعلم في هذا المقال كيف ننشئ أسرابًا من الحشرات أو الطيور أو الأسماك، أو أي نوع آخر من الحيوانات، باستخدام كتل النُسخ، لتصميم لعبة بسيطة باستخدام سكراتش.

سنعمل في هذا المشروع على:

• استخدام النُسخ لتوليد مجموعة من الحيوانات.
• استخدام الأعداد العشوائية لجعل النُسخ تتصرف بشكل متفرد.
• استخدام النُسخ لتصميم لعبة بسيطة.

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

شغّل المشروع وتحكم بحركة الخفافيش بتحريك مؤشر الفأرة، أطعمها الفراشات ليزداد عددها، وتجنب الأسد والديناصور المجنح كي لا تخسر وتنتهي اللعبة.

معلومة: تتحرك بعض الحيوانات في مجموعات تدعى أسرابًا، أو قطعانًا، قد تبدو حركتها للوهلة الأولى عشوائيةً، لكنها في غاية التنظيم.

استلهم أفكارك

يجب عليك اختيار تصميم مناسب وقصة مناسبة للعبتك. فكر ما هي الحيوانات التي تود استخدامها؟ و ما الذي ستفعله؟ استلهم أفكارك من المشاريع التالية:

• مشروع القرش وسرب الأسماك

• مشروع هجوم الطيور

تحريك المشهد باستخدام تأثير التمرير Scrolling

سننشئ في هذه الخطوة خلفية للعبة ونحركها باستخدام مؤشر الفأرة.

أولًا، افتح نسخة سطح المكتب من برنامج سكراتش، واستعمل النسخة الأولية المرفقة بملف مشروع أسراب الحيوانات بعد تنزيلها؛ أو انقر للانتقال إلى العمل في نسخة المتصفح من سكراتش.

ثانيًا، قرر ما هو المشهد الذي تود إنشائه، أضف عدة حيوانات من مكتبة الكائنات ثم اعتمد أحدها واختر خلفيةً مناسبةً له.

إليك تذكرةً ببعض الأمور المفيدة التي تعلمناها في مشاريع سابقة.

إضافة خلفية من مكتبة الخلفيات

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

ستظهر الخلفيات مصنفةً في مجموعات، تصفّحها واختر منها، أو استخدم مربع البحث للبحث عن خلفية محددة.

تحريك الخلفيات والكائنات

يمكننا جعل الخلفيات تتحرك بتحريك مؤشر الفأرة أو بالنقر على الأزرار وذلك بطريقتين: إما عن طريق تحريك الكائنات الموجودة فيها، أو عن طريق تحويل الخلفية إلى كائن وتحريكها.

تحويل الخلفية إلى كائن وتحريكها

أولًا، انقر على الخلفية ثم على علامة تبويب الخلفيات، استخدم أداة التحديد لتحديد كامل الخلفية ثم انقر على خيار النسخ:

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

ثانيًا، أضف الكتل التالية على كائن الخلفية لجعله يتحرك:

تذكر أنه بإمكانك تحريك الخلفية عند النقر على أحد مفاتيح لوحة المفاتيح أو بتحريك مؤشر الفأرة وذلك باستخدام كتلة عند النقر على مفتاح أو كتلة عند النقر على العلم الأخضر بدلًا من رسالة البث في مثالنا.

تحريك الكائنات باستخدام الفأرة

يمكنك تحريك الكائنات بتحريك مؤشر الفأرة نحو اليمين أو اليسار للحصول على تأثير "التمرير" أو الحركة المستمرة كما في الصورة التالية:

أضف الكتل التالية على الكائن للحصول على تأثير التحريك أو التمرير:

يمكنك تعديل القيم المستخدمة لتغيير سرعة الحركة، كما يمكنك استخدام الطريقتين، وتحريك الخلفية والكائنات معًا! لتحصل على نتيجة مشابهة لما يلي:

إضافة نسخ من الكائنات

سنضيف في هذه الخطوة عدة نسخ من الكائنات لنحصل على أسراب من الحيوانات تتجمع وتتحرك معًا.

معلومة: تدعى الحيوانات التي تعيش في مجموعات بحيوانات اجتماعية، كالنحل والنمل، ومعظم أنواع الطيور والأسماك، والثدييات كالأبقار والأغنام.

أولًا، اختر حيوانًا مناسبًا، وذلك بإضافته من مكتبة الكائنات، أو باستخدام صورة موجودة على جهازك، أو برسمه باستخدام الرسام في سكراتش.

إضافة كائن من ملف على جهازك

انقر على أيقونة إضافة كائن ثم انقر على خيار تحميل كائن للانتقال إلى مستعرض الملفات:

اختر صورةً ما من جهازك ثم انقر على خيار "افتح" أو "Open" لإضافة الصورة إلى سكراتش:

إضافة كائن من مكتبة الكائنات

انقر على أيقونة إضافة كائن للانتقال إلى مكتبة الكائنات:

لاحظ أن الكائنات مصنفة ضمن فئات، تصفّحها واختر منها أو استعن بمربع البحث للبحث عن كائن معين، ثم انقر عليه لإضافته إلى مشروعك:

إنشاء الخلفيات والكائنات باستخدام الأشكال

يمكنك إنشاء خلفيات ومظاهر للكائنات في الرسام باستخدام أشكال بسيطة.

أولًا، انقر على خيارالرسام من أيقونة اختيار خلفية أو من أيقونة اختيار كائن:

ثم اختر أداةً مما يلي لإنشاء الأشكال التي ترغب بها:

• الأداة الدائرية: اضغط على رمز الأداة لرسم دائرة، اضغط باستمرار على مفتاح Shift لمساعدتك بالرسم.

• الأداة المستطيلة: استخدم هذه الأداة لرسم مستطيل، واضغط باستمرار على مفتاح Shift لرسم مربع.

• الأداة المثلثة: يمكنك استخدام هذه الأداة لرسم مستطيلاتٍ أو مربعاتٍ أولًا، ثم الضغط على أداة تغيير الشكل لاختيار جزءٍ من الشكل وحذفه والحصول على شكل المثلث!

انقر على أداة تغيير الشكل ثم انقر على الزاوية اليمنى العليا للمربع واسحبها إلى منتصف الشكل للحصول على مثلث.

استخدم أداة ملء اللون لتغيير لون الشكل:

قد تحتاج لاستخدام أداتي طبقة إلى الأمام و طبقة إلى الخلف لتغيير موضع الشكل في الخلفية:

كما يمكنك تحديد عدة أشكال ومعاملتها كشكل واحد باستخدام أداة التجميع Group وبذلك يسهل عليك تحريك الأشكال وتعديلها:

إليك مثالًا عن كائنٍ أنشأناه باستخدام الأداة الدائرية والمستطيلة، كما يمكنك الانتقال إلى محرر سكراتش للتعديل عليه:

لا تنسى تسمية الأشكال والخلفيات التي أنشأتها في الرسام بأسماء مناسبة.

ثانيًا، عدّل حجم الكائنات والنُسخ بما يتناسب مع المنصة والمشهد الخاص بك، من نافذة الكائن، أو باستخدام كتل الهيئة:

ثالثًا، أضف الكتل التالية لإنشاء النُسخ عند النقر على العلم الأخضر، وعدّل عدد النُسخ كما يحلو لك:

تحريك الكائنات

عليك الآن إضافة الكتل اللازمة لتحريك الكائنات باستخدام مؤشر الفأرة:

تحريك الكائنات عشوائيًا

أضف الكتل التالية لجعل النُسخ تتبع حركة مؤشر الفأرة خلال أزمنة عشوائية، أي بسرعات متفاوتة:

تحريك الكائنات إلى موضع قريب من موضع مؤشر الفأرة

أضف الكتل التالية لجعل النُسخ تنتقل إلى موضع عشوائي قريب من موضع مؤشر الفأرة، وذلك بإضافة أعداد عشوائية على إحداثيات المحور س لمؤشر الفأرة:

رابعًا، شغّل المشروع واختبر حركة النُسخ، هل تحتاج إلى تعديل حركتها، أو عددها؟

إضافة الغذاء

سنضيف في هذه الخطوة مصدرًا للغذاء لتتغذى عليه الكائنات.

أولًا، اختر نوع الغذاء الذي تريد أن تتغذى عليه الحيوانات، أضفه من مكتبة الكائنات أو من جهازك كما تعلمنا سابقًا، أو ارسمه باستخدام محرر الرسام في سكراتش.

ثانيًا، اختر الطريقة المناسبة لتحريك الغذاء الذي اخترته، هل تريد إظهار الغذاء في مواضع عشوائية، أم تحريكه عشوائيًا حول الشاشة، أم تفضل تحريكه بحركة مستمرة مع باقي عناصر المشهد.

تحريك الغذاء

إظهار الكائنات في مواضع عشوائية بسرعات متفاوتة

أضف الكتل التالية لإظهار وإخفاء الكائنات في مواضع عشوائية وبسرعات عشوائية، لتبدو وكأنها تتحرك:

تحريك الغذاء عشوائيًا

أضف الكتل التالية لجعل الغذاء ينتقل إلى مواضع عشوائية خلال أزمنة عشوائية، أي بسرعات متفاوتة:

عدّل القيم في كتل الأعداد العشوائية لتغيير تواتر ظهور الغذاء.

كما يمكنك الاستعانة بفقرة تحريك الكائنات باستخدام الفأرة، في الفقرة السابقة، لتحريك الغذاء باستخدام مؤشر الفأرة نحو اليمين أو اليسار.

ثالثًا، شغّل المشروع واختبر سرعة حركة الكائنات، وتحقق من ظهورها على الشاشة إذ قد تحتاج لتعديل القيم وفقًا لحجم الكائن.

تناول الطعام

رابعًا، بعد أن أضفنا الغذاء، يجب علينا جعل الحيوانات تأكله، أي يجب أن يختفي عند ملامسته للحيوانات أو أحد النُسخ، وذلك بإضافة الكتل التالية:

أضف الكتل التالية على الحيوان بحيث يرسل رسالة بث عندما يلامس الغذاء:

ثم أضف الكتل التالية على كائن الغذاء ليختفي عند تلقيه رسالة البث:

خامسًا، عليك الآن أن تقرر ماذا تريد أن يحدث بعد تناول الحيوانات للطعام، هل تريد أن يزداد حجمها؟ أم أن يزداد عددها؟ أم تريد إضافة عداد لحساب النقاط كلما تناولت الحيوانات الطعام؟

زيادة حجم النُسخ

أضف الكتل التالية لزيادة حجم الحيوانات عند تناولها الطعام:

زيادة عدد النُسخ

أضف الكتل التالية لزيادة عدد الحيوانات عند تناولها الطعام:

زيادة عدد النقاط

أنشئ متغيرًا جديدًا، كما تعلمنا سابقًا، وسمّه "النقاط"، ثم أضف الكتل التالية لزيادة عدد النقاط عند تناول الحيوانات الطعام:

إضافة حيوان مفترس

سنضيف في هذه الخطوة حيوانًا مفترسًا ليأكل بعض الحيوانات ويزيد من صعوبة اللعبة.

أولًا، حدد ما هو المفترس الذي تريد إضافته، هل تريده حيوانًا بريًا، أم طائرًا، وحدد نوع حركته بناءًا على ذلك. ثم أضفه من مكتبة الكائنات أو من جهازك، أو ارسمه باستخدام الرسام في سكراتش.

تحريك الحيوان المفترس

اختر الحركة المناسبة للحيوان الذي اخترته مما يلي، فإذا اخترت حيوانًا مفترسًا بريًّا فالأفضل أن تحركه ذهابًا وإيابًا على الأرض، أما إذا أضفت حيوانًا طائرًا فاجعله يطير حول المنصة بحركة عشوائية.

تحريك الحيوان المفترس يمنةً ويسرة باستخدام تأثير التمرير

أضف الكتل التالية لتحريك المفترس يمنةً ويسرة عند تحريك مؤشر الفأرة والحصول على تأثير التمرير:

يمكنك تغيير سرعة الكائن بتغيير قيمة الإحداثيات على المحور س.

إضافة حيوان مفترس طائر

أضف الكتل التالية لجعل الحيوان المفترس يطير حول المنصة بحركة عشوائية، وعدّل القيم لتغيير سرعة الكائن:

تحريك الحيوان المفترس عشوائيا

أنشئ متغيرًا للتحقق من اتجاه الحيوان المفترس وسمّه "يمين-يسار"، ثم أضف الكتل التالية لتحريك المفترس عشوائيًا على المحور س الشاقولي:

شغّل المشروع وتحقق من حركة المفترس، عدّل القيم لتغيير سرعته، إن احتجت لذلك.

ثانيًا، قرر ما الذي سيحدث للنُسخ عندما تواجه الحيوان المفترس، هل تريد إنقاص قيمة متغير النقاط؟ أم تريد تصغير حجم النُسخ؟ أم حذفها عندما تلامس المفترس؟ ثم استخدم الكتلة الموافقة مما يلي:

ترقية المشروع

يمكنك ترقية مشروعك حين يتسنى لك ذلك، عن طريق إضافة بعض التفاصيل والتعديلات عليه. إليك بعض المقترحات:

• إضافة تأثيرات صوتية ورسومية لإضفاء الحيوية على المشروع.
• إضافة مؤقت لإنهاء اللعبة بعد دقيقة وعرض النقاط، لزيادة الحماس لدى اللاعب.
• إضافة متغير لعرض عدد النُسخ عند البدء وانقاصه كلما أُكِلت نسخة وإنهاء اللعبة عند وصول عدد النُسخ إلى الصفر.
• جعل النُسخ غير قابلة للأكل عندما تصل إلى حجم معين.

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

مشاركة المشروع

ألهم مستخدمي سكراتش عبر مشاركة مشروعك باتباع الخطوات التالية واحرص على عدم مشاركة أي معلومات شخصية:

أولًا، سمّي مشروعك باسم مناسب.

ثانيًا، انقر على خيار المشاركة لجعل المشروع متاحًا للجميع.

ثالثًا، أضف إرشادات للاعبين، إن أحببت، في مربع الإرشادات. كما يمكنك إضافة ملاحظة في مربع الملاحظات والملكية إذا كان مشروعك أصليًا، أو يمكنك ذكر المشروع الأصلي الذي عدلت عليه.

أخيرًا، انقر على خيار نسخ الرابط لمشاركته مع الأصدقاء عبر وسائل التواصل الاجتماعي.

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

ولا تنسى مشاركتنا مشروعك على مجتمع سكراتش في منصة حسوب IO.

خاتمة

بهذا تكون قد أتممت مشروع إنشاء أسراب من الحيوانات باستخدام سكراتش؛ ويمكنك تنزيل المشروع كاملًا من الملف مشروع أسراب الحيوانات.

ننصحك بتنفيذ مشروع برمجة لعبة إلكترونية من منظور اللاعب باستخدام سكراتش كخطوتك التالية.

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

ترجمة -وبتصرف- للمقال Swarms, schools, and flocks من الموقع الرسمي لراسبيري باي.

اقرأ أيضًا

• المقال السابق: تصميم وتنفيذ برنامج لإنشاء رسومات الماندالا باستخدام سكراتش
• برمجة لعبة اليعسوب آكل الحشرات باستخدام سكراتش
• إنشاء لعبة البحث عن الحشرات باستخدام برنامج سكراتش

يقدِّم لك هذا المقال خلفيةً مفيدةً حول عالم الويب وظهوره والتقنيات المعيارية له وكيف تعمل معًا، كما يطلعك على تمّيز مهنة مطوري الويب وعن الممارسات العملية الأفضل التي عليك تعلّمها.

موجز عن تاريخ ويب

سنختصر الأمر قدر المستطاع لوجود الكثير من المعلومات المفصّلة عن تاريخ ويب خارج إطار هذا المقال والتي سنشير إليها لاحقًا، ويمكنك أيضًا البحث باستخدام أحد محركات البحث المفضلة لديك إذا كنت مهتمًا بتفاصيل أكثر.

طوّر الجيش الأميريكي في ستينيات القرن الماضي شبكة اتصال دُعيت آربانت ARPANET، إذ يمكن عدّ هذه الشبكة هي البداية المبكرة لويب، وقد استخدمت تقنية تحويل أو تبديل حزم البيانات وشهدت أول تنفيذ لمجموعة بروتوكولات TCP/IP، كما تُشكِّل التقنيتين السابقتين البنية التحتية التي قامت عليها شبكة الإنترنت.

كتب تيم برنرز-لي Tim Berners-Lee -ويشار إليه عادةً بالاسم TimBL- عام 1980 برنامجًا نصيًا دُعي "ENQUIRE" والذي مهَّد لمفهوم الربط بين العقد المختلفة، أيبدو مألوفًا؟ وبتسريع الوقت حتى عام 1989، إذ كتب تيم عملَين أحدهما بعنوان "مقترح لإدارة المعلومات Information Management: A Proposal" والآخر بعنوان النص التشعبي HyperText خلال عمله مستشارًا في المنظمة الأوروبية للطاقة النووية CERN، وقد قدّم هذان العملان خلفيةً معرفيةً عن الكيفية التي يفُتَرض أن تعمل بها ويب، كما وتلقى العملان كمًا لا بأس به من الاهتمام، وكان هذا كافيًا ليسمح له مديروه بمتابعة العمل نحو إنشاء منظومة نصوص تشعبية عالمية؛ أما بحلول عام 1990، فقد كان تيم قد أنشأ كل الأشياء الضرورية اللازمة لتشغيل النسخة الأولى لويب.بروتوكول HTTP ولغة HTML، بالإضافة إلى متصفح ويب الأول والذي دُعيَ حينها WorldWideWeb وخادم HTTP وبعض صفحات ويب لاستعراضها.

توسّع عالم الويب بشدة في السنوات التي تلت مع ظهور عدد من المتصفحات الجديدة وإعداد آلاف خوادم ويب وكتابة ملايين الصفحات، ولا بد من الإشارة في هذه العجالة إلى تأسيس تيم لمجمّع World Wide Web Consortium واختصارًا W3C، وهي منظمة تجمع ممثلين عن شركات تقنية عالمية مختلفة للعمل معًا لوضع مواصفات ومعايير للويب، وبعد ذلك ظهرت تقنيات مثل CSS ومن ثم جافاسكربت وأخذت تبدو الويب بعدها شبيهةً بما هي عليه اليوم.

معايير ويب

تُعَدّ معايير ويب Web standards التقنيات التي نستخدِمها لبناء مواقع الويب، إذ تظهر هذه المعايير على هيئة مستندات تقنية طويلة تُدعى التوصيفات specifications والتي تفصّل تمامًا الطريقة التي ينبغي لتقنية ما العمل وفقها، كما لا تقدِّم هذه المستندات فائدةً كبيرةً في تعلّم استخدام التقنية التي تصفها ولذلك وُجِدت مواقع مثل موسوعة حسوب وتوثيق MDN التي تعرض التوثيقات بطريقة مختصرة ومبسطة، وإنما هي موجَّهة إلى مهندسِي البرمجيات لتطبيق هذه التقنيات، إذ يصف المستند HTML Living Standard على سبيل المثال كيفية تطبيق شيفرة HTML تمامًا، أي جميع عناصر اللغة، والواجهات البرمجية المرتبطة بها، وغير ذلك من التقنيات المحيطة بها.

تُنشَأ معايير ويب من قِبَل هيئات قياسية مثل المنظمات والمعاهد التي تدعو تِقنيين من شركات مختلفة للاتفاق على أفضل الطرائق التي ينبغي أن تعمل وفقها التقنيات لتلبي احتياجاتهم، إذ تُعَدّ W3C من أهم هذه الهيئات، ونجد أيضًا WHATWG التي تصون وتطوِّر المعايير المستخدم للغة HTML، و ECMA التي تنشر معايير ECMAScript التي تُبنى عليها جافاسكربت، و Khronos التي تنشر تقنيات الرسوميات ثلاثية الأبعاد مثل WebGL وغيرها من الهيئات.

المعايير مفتوحة المصدر

لا بد أن تبقى الويب وتقنياتها مجانيةً للمساهمين في بنائها ومستخدِميها وغير خاضعة لبراءات الاختراع أو رخص الاستخدام، وهذا الموضوع هو الميزة الأساسية لمعايير ويب والتي وافق عليها تيم-لي ومجمّع W3C منذ البداية، لذلك يمكن لأيّ كان كتابة الشيفرات مجانًا لبناء موقع ويب، كما يمكن لأيّ كان المساهمة في عملية تطوير وإنشاء معايير ويب.

لا يمكن لأي شركة التحكم بتقنيات الويب لأنها بُنيَت لتكون مفتوحة المصدر بالتعاون بين شركات مختلفة، وهذا أمر جيد حقًا، فلن ترغب مطلقًا أن تضع أيّ شركة قيودًا ماليةً على تقنيات ويب فجأة، أو أن تصدر نسخةً مدفوعةً من HTML عليك شرائها لتستمر في استخدامها، أو أن تقرر الشركة -في أسوأ سيناريو- أنّ الموضوع لم يَعُد يهمها ثم توقف العمل به، وبالتالي يسمح هذا الأمر ببقاء الويب وتقنياتها متاحةً مجانًا للجميع.

لا تفكك الويب

قد تسمع بمصطلح آخر يتعلق بمعايير ويب هو "لا تفكك الويب"، ويعني ذلك أنّ أيّ تقنية جديدة في عالم الويب لا بد وأن تكون متوافقةً مع ما بُني سابقًا -أي يجب استمرار مواقع الويب القديمة بالعمل-، ومع ما سيُبنى لاحقًا -أي أن التقنيات التي ستظهر لاحقًا لا بد أن تبقى متوافقة مع التقنيات الحالية-، ومع تقدمك في مسيرتك في التعلم ستعرف كيف يتحقق ذلك من خلال التصميم والتنفيذ الذكي لهذه المفاهيم.

من الجيد أن تكون مطور ويب

تُعَدّ صناعة الويب سوقًا ملفتًا ومهمًا إذا كنت تبحث عن عمل، وتشير الأرقام الحالية إلى وجود أكثر من 19 مليون مطور ويب في العالم، وسيتضاعف هذا العدد في العقد القادم، وفي الوقت ذاته، هناك نقص في الخبرات ضمن هذه الصناعة، لذلك فالوقت الآن مناسب جدًا من أجل تعلم تطوير مواقع ويب.

لا تتعلق صناعة الويب فقط بأمور الترفيه والألعاب، وإنما يزداد تعقيد بناء مواقع الويب عما كان عليه، إذ عليك قضاء المزيد من الوقت في دراسة التقنيات المختلفة التي ستستخدِمها، وجميع الأساليب والممارسات العملية التي يجب تعلمها، والنماذج التقليدية التي سيطلب منك إنجازها، فقد تحتاج أشهرًا عدة لتبدأ باستيعابها، وبعد ذلك عليك الاستمرار في تعلم المزيد لكي تبقى معلوماتك مواكبةً لآخر التطورات بما في ذلك الأدوات والميزات الجديدة التي تظهر على منصات عمل ويب، كما عليك التمرن أكثر لصقل مهاراتك في هذه المهنة.

هل يبدو الأمر صعبًا؟ نسعى في هذا السياق إلى منحك كل الإمكانات لتنطلق ومن ثم ستسهل بقية الأمور عليك، فحالما تعتنق مفهومَي التغيُّر والشك في عالم ويب، فستستمتع بما تفعله، وعلى أساس أنك فرد في مجتمع ويب، فستجد شبكةً كاملةً من المعارف والمواد القيّمة التي ستساعدك وسترى الإمكانات الإبداعية التي يوفّرها هذا العمل، كما ستغدو مبدعًا في العالم الرقمي، فاستمتع إذًا بهذه التجربة وبالمكاسب المحتملة التي ستحققها في تجربتك في تطوير الويب.

نظرة على بعض تقنيات ويب العصرية

لا بد أن تتعلم عددًا من التقنيات إذا قررت أن تصبح مطورًا للواجهات الأمامية، لذلك سنصف في هذه الفقرة هذه التقنيات باختصار.

المتصفحات

ربما تستخدِم الآن متصفحًا لقراءة هذا المقال، فالمتصفحات هي برمجيات يستخدِمها الناس ليستعرضوا محتويات الويب ويتفاعلوا معها مثل فايرفوكس وكروم وأوبرا وسفاري وإيدج.

بروتوكول HTTP

يُعَدّ بروتوكول نقل النص التشعبي Hypertext Transfer Protocol واختصارًا HTTP بروتوكولًا لنقل الرسائل التي تسمح للمتصفح بالتواصل مع خوادم ويب (المكان الذي تُثبت عليه مواقع الويب)، إذ تجري المحادثة النمطية بين المتصفح والخادم بصورة تشبه التالي:

"Hello web server. Can you give me the files I need to render bbc.co.uk"?

"Sure thing web browser — here you go"

[Downloads files and renders web page]

لا يمكن للبشر بالطبع قراءة الصيغة الفعلية لرسائل التواصل والتي تُدعى طلبات واستجابات، لكن قد يعطيك مثالنا السابق تصوّرًا عن العملية.

HTML و CSS وجافاسكربت

وهي التقنيات الرئيسية الثلاث التي سنستخدِمها لبناء مواقع ويب:

• HTML لغة ترميز النصوص التشعبية Hypertext markup language: وهي لغة ترميزية تتكون من عناصر مختلفة يمكن أن تُغلِّف محتوى ويب ضمنها وتوضِّح معناها وهيكليتها، إذ تبدو شيفرة HTML البسيطة قريبة من التالي:

<h1>This is a top-level heading</h1>

<p>This is a paragraph of text.</p>

<img src="cat.jpg" alt="A picture of my cat">

يمكنك تشبيه اللغة إذا وازنتها مع بناء سكني بأساسات وجدران المنزل التي تعطيه شكله وتجعله متماسكًا.

• CSS التنسيقات المورثة Cascading Style Sheets: وهي لغة مبنية على قواعد مخصصة لتطبيق تنسيقات معينة على عناصر HTML مثل ضبط ألوان النصوص والخلفيات وإضافة الأطر وتحريك الأشياء أو تخطيط الصفحة بطريقة معينة، وإليك مثالًا بسيطًا يحوِّل نصوص الفقرات <p> في HTML إلى اللون الأحمر:

p  {
  color: red;
}

ووفقًا لتشبيه المنزل السكني، فستكون CSS بمثابة الطلاء وورق الجدران والسجاد واللوحات التي تضعها داخل المنزل.

• جافاسكربت JavaScript: هي لغة البرمجة التي تستخدِمها لإضافة التفاعل في مواقع الويب، ابتداءً بالتغيير الديناميكي للتنسيق إلى إحضار البيانات من الخادم مرورًا بتنفيذ الرسوميات ثلاثية الأبعاد، إذ ستخزِّن شيفرة جافاسكربت التالية على سبيل المثال مرجعًا إلى عنصر الفقرة <p> ومن ثم تغيّر النص الموجود ضمنه:

let pElem = document.querySelector('p');
pElem.textContent =  'We changed the text!';

وبالعودة لتشبيه المنزل السكني، فستكون جافاسكربت بمثابة الطباخ أو التلفاز أو مجفف الشعر، أي الأشياء التي تزيد من إمكانات منزلك.

الأدوات

حالما تتعلم التقنيات الأساسية التي تُستخدم في بناء صفحات الويب، فستبدأ بالتعرف على أدوات عديدة تُسهِّل عملية بناء الصفحات وتجعلها أكثر فاعليةً، وإليك بعض الأمثلة:

• أدوات مطوري ويب الموجودة في المتصفحات العصرية والتي تُستخدم في تنقيح شيفرتك.
• أدوات الاختبار التي تُستخدم في تنفيذ اختبارات تظهر سلوك شيفرتك إذا حققت المطلوب أم لا.
• المكتبات وأطر العمل frameworks المبنية على أساس جافاسكربت والتي تسمح بتطوير أنواعًا مختلفةً من مواقع الويب بطرق أسرع وأكثر فاعليةً.
• المنقِّحات Linters التي تحدِّد مجموعةً من القواعد وتدقق شيفرتك بحثًا عن أيّ خرق لهذه القواعد.
• المُصغِّرات Minifiers التي تزيل المساحات الفارغة من الشيفرة لتبدو أقل حجمًا، وبالتالي ستزداد سرعة تنزيلها من خوادم الويب.

اللغات التي تنفذ ضمن الخوادم وأطر العمل المتعلقة بها

تُعَدّ HTML و CSS وجافاسكربت لغات تعمل في الواجهة الأمامية (من جهة العميل)، أي أنها تُنفَّذ باستخدام المتصفحات لتظهر صفحة الويب كما يراها المستخدِم.

هناك أيضًا مجموعة أخرى من لغات البرمجة تُدعى لغات الواجهة الخلفية (من جهة الخادم) أي أنها تُنفّذ على الخادم قبل أن تًرسل نتيجة التنفيذ إلى المتصفح لعرضها، إذ يقتصر الاستخدام النمطي لهذه اللغات على الحصول على بعض البيانات من قواعد البيانات ومن ثم توليد شيفرة HTML لاحتواء هذه البيانات وإرسالها إلى المتصفح ليعرضها للمستخدِم، ونذكر من هذه اللغات ASP.NET و Python و PHP و NodeJS.

أفضل الممارسات عند تطوير مواقع الويب

تحدثنا بإيجاز عن التقنيات التي ستستخدِمها في بناء مواقع الويب، وسنتحدث الآن عن أفضل الممارسات العملية التي عليك تبنيها لتتأكد من استخدام تلك التقنيات بأفضل طريقة ممكنة.

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

• قد يستخدِم أحدهم جهاز آيفون بشاشة صغيرة وضيقة.
• قد يستخدِم آخر حاسوبًا محمولًا بنظام ويندوز له شاشة عرض واسعة.
• أما الثالث فقد يكون ضريرًا ويستخدم قارئًا آليًا لمحتوى الشاشة.
• وقد يستخدم الرابع حاسوبًا مكتبيًا قديمًا لا يستطيع تشغيل أية متصفحات حديثة.

عليك تصميم موقعك وفق الآلية الدفاعية بما أنك لا تعرف ببساطة كيف سيتصفحه المستخدِم، ف، لذا اجعل موقعك مرنًا قدر الإمكان لكي يتمكن جميع المستخدِمين من الوصول إلى محتواه بصرف النظر عن اختلاف تجربتهم له، أي عليك باختصار إفادة الجميع من الويب قدر المستطاع، كما ستصادف في مرحلة ما من رحلتك التعليمية المفاهيم التالية:

• التوافق مع متصفحات مختلفة Cross-browser compatibility: وهو أسلوب يحاول التأكد من عمل صفحة الويب بالصورة المطلوبة ضمن أكبر عدد ممكن من المتصفحات، ويتضمن ذلك استخدام تقنيات تدعمها معظم المتصفحات، وتقديم تجربة تصفح أفضل في المتصفحات القادرة على التعامل مع هذه التقنيات (تحسين مستمر)، وكتابة شيفرة يمكن اختزالها بسهولة إلى صيغة أبسط تستطيع المتصفحات القديمة عرضها لإعطاء تجربة تصفح مفيدة (تراجع رشيق graceful degradation)، كما يتضمن الأمر الكثير من الاختبارات لمتابعة أي مشاكل على متصفح محدد، ومن ثم العمل أكثر على إصلاح تلك المشاكل.
• تصميم متجاوب للصفحات Responsive web design: وهو أسلوب لخلق مرونة من الناحية الوظيفية والتخطيطية للصفحات بحيث تتلاءم تلقائيًا مع المتصفحات المختلفة، ومثالنا على ذلك صفحة ويب تُعرَض بتخطيط معيّن على شاشة واسعة لمتصفح حاسوب ومن ثم تأخذ تخطيطًا متجاوبًا مع حجم الشاشة مثل تخطيط العمود الواحد على متصفح هاتف محمول، إذ يمكنك تجريب أيّ موقع على الأحجام الصغيرة بتصغير حجم نافذة المتصفح وملاحظة سلوكه المتجاوب مع الأحجام الصغيرة
• الأداء Performance: ويستهدف تحميل صفحة ويب بالسرعة الممكنة مع المحافظة على وضوحها وسهولة استخدامها لكي لا يشعر المستخدِم بالإحباط ويغادرها.
• سهولة الوصول Accessibility: ويعني إمكانية استخدام الموقع من قِبَل أكبر عدد ممكن من الأشخاص المختلفين من جميع النواحي وترتبط بمفاهيم مثل التنوع، والشمولية، والتصميم الشمولي، كما يتضمن ذلك أشخاصًا ذوي إعاقة بصرية أو سمعية أو إدراكية أو حركية، ويتعدى الأمر مفهوم الإعاقة إلى السن والثقافة والتجهيزات المستخدَمة والمحدودية التقنية مثل الاتصال البطيء بالإنترنت.
• التدويل Internationalization: ويعني ذلك إمكانية استخدام موقع الويب من قِبَل أشخاص ينتمون إلى ثقافات مختلفة أو يتكلمون لغات مختلفة عن لغتك، وهنالك اعتبارات تقنية للموضوع مثل تبديل تخطيط الصفحات ليتلاءم مع اللغات التي تُكتَب من اليمين إلى اليسار أو مع اللغات التي تكتب عموديًا، واعتبارات إنسانية مثل استخدام لغة بسيطة وواضحة بعيدة عن اللهجات، ليزداد احتمال فهم الأشخاص الذين يتكلمون لغتك على أساس لغة ثانية أو ثالثة لما تعرضه.
• الخصوصية والأمان Privacy & Security: يرتبط المفهومان ببعضهما لكنهما مختلفان، إذ تعني الخصوصية السماح للأشخاص بتنفيذ ما يريدونه دون أن تتجسس على نشاطاتهم أو تجمع أية بيانات أكثر مما تحتاجه فعلًا، بينما يعني الأمان بناء موقعك بطريقة لا تُمكّن المستخدِمين المشبوهين من سرقة المعلومات التي يضمها الموقع عنك أو عن عملائك.

الانطلاق في عالم ويب

سنعرض في هذا المقال بعض المهارات العملية اللازمة لتنطلق في عالم تطوير ويب مثل اختيار البرمجيات التي تعمل عليها والأدوات اللازمة لبناء صفحات ويب بسيطة ونشرها وكتابة شيفرتها، كما سنفرد لاحقًا لكل العناوين التي نمر عليها مقالات خاصةً لشرح مستفيض أكثر.

عليك الكثير لتتعلمه وتفعله حتى تصل إلى مرحلة تطوير موقع ويب احترافي، فإذا كنت حديث العهد في هذا المجال، فسنشجِّعك على البدء بموقع بسيط، ولن تكون جاهزًا مباشرةً لتبني موقع فيسبوك جديد، لكنك ستكون قادرًا على بناء مواقع بسيطة ونشرها، وبالاطلاع على المقالات التي سنشير إليها باختصار والعمل بمضمونها، ستنتقل من الصفر إلى نشر أول موقع بسيط لك على الإنترنت، فلنبدأ جولتنا.

تثبيت البرمجيات الأساسية

هناك الكثير من الأدوات والبرمجيات التي تُستخدَم في بناء وتطوير مواقع ويب، وقد تربكك بالفعل كثرة محررات الشيفرة وإطارات العمل وأدوات الاختيار، إذ سنرشدك في مقال تثبيت البرمجيات الأساسية خطوةً بخطوة إلى تثبيت البرمجيات التي تحتاجها لتبدأ عملية بناء مواقع ويب بسيطة.

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

عليك التخطيط لمظهر ومحتوى موقعك قبل الشروع في كتابة الشيفرة، فما هي المعلومات التي سيعرضها؟ وما هي خطوط الكتابة والألوان التي ستستخدِمها؟

التعامل مع الملفات

يتكون موقع ويب من ملفات عدة: نصية وشيفرات وأوراق تنسيق ووسائط متعددة وغيرها. لا بد إذًا من تنظيم هذه الملفات وفق هيكلية منطقية عندما تبدأ بناء موقعك وأن تتأكد من ترابط هذه الملفات مع بعضها.

أساسيات HTML

تُستخدَم شيفرة HTML في هيكلة محتوى ويب وتعطيه المعنى والغاية، أي هل المحتوى الذي تقدِّمه على سبيل المثال سيكون مقطعًا نصيًا أم قائمة نقطية؟ هل ستزوِّد صفحتك بالصور؟ هل ستعرض جداول تضم بيانات؟

أساسيات CSS

تُعَدّ التنسيقات المورثة Cascading Style Sheets واختصارًا CSS شيفرةً خاصةً بتنسيق صفحات ويب، فهل سيكون نص ما مثلًا أسود أم أحمر؟ في أيّ مكان من الصفحة ستعرض محتوًى معينًا؟ ما الصورة التي ستضعها في خلفية الصفحة؟ أو ما الألوان التي ستختارها لموقعك؟

أساسيات جافا سكربت

جافا سكريبت هي لغة البرمجة التي تستخدمها لإضافة ميزات تفاعلية إلى موقعك مثل الألعاب أو الأشياء التي تحدث عند النقر على زر أو عندما تُدخل نصًا في نموذج أو عندما تُحدث تأثيرات حركية في تنسيق العناصر أو عند تصميم الرسوميات المتحركة وغيرها الكثير.

نشر موقعك على شبكة الإنترنت

عندما تُنهي كتابة شيفرة موقعك وتنظيم جميع الملفات التي يضمها، سيحين الوقت لنشره على شبكة الإنترنت ليطَّلع عليه الناس.

كيف يعمل الويب

قد لا تكون لديك فكرة عن الأشياء المعقدة التي تجري خلف الستار عندما تتصفح مواقعك المفضلة، لكننا سنختصر ما يحدث في جزئية لاحقة من هذه السلسلة عندما تستعرض صفحة ويب في متصفح حاسوبك.

ختامًا، قد يهمك مقال آلية عمل شبكة الإنترنت؟، وقد ترغب بالاطلاع أكثر على تاريخ الشبكة العنكبوتية العالمية، وننصحك أيضًا بالرجوع إلى مقالة المدخل الشامل لتعلم تطوير الويب

ترجمة -وبتصرف- للمقال The web and webstandards.

اقرأ أيضًا

• الفرق بين صفحة الويب وموقع الويب وخادم الويب ومحرك البحث
• الحماية من مواقع الإنترنت في العالم الرقمي
• التأثير النفسي للألوان في تصميم الويب

سنعمل في هذا المشروع على إنشاء لعبةٍ بسيطة تعتمد على النقر بهدف للحصول على طبول وإيقاعات جديدة والانتقال للعزف في مواقع أكبر، باستخدام سكراتش scratch.

سننفذ في هذا المشروع ما يلي:

• استخدام المتغيرات لتخزين الأرقام والنصوص.
• استخدام كتلة إذا .. وإلا لاتخاذ القرارات.
• استخدام كتلة اسأل وكتلة الإجابة لجعل اللاعب يتفاعل مع اللعبة.

وذلك لنحصل على نتيجة مشابهة لما يلي:

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

ما هو عدد النغمات الذي تحصل عليه عندما تقرع الطبلة الجديدة؟

معلومة: توجد عدة ألعاب تعتمد على النقر وتسمى الألعاب النقرية Clicking games، ويتوجب فيها على اللاعب النقر باستمرار، كما يمكنه شراء تطويرات تمكِّنه من زيادة فاعلية النقر والتقدم بسرعة أكبر؛ ويوجد نوع آخر من الألعاب تسمى الألعاب الخاملة Idle games، وتختلف عن سابقتها بأن تقدّم اللاعب يزداد حتى عند إغلاقها.

لا شك في أن هذه الألعاب ممتعة، لكن احرص ألا تقضي الكثير من الوقت في لعبها.

إعداد المنصة

ستعمل في هذه الخطوة على إعداد منصة لحفلتك الموسيقية الأولى، كما ستختار اسمك الموسيقي.

أولًا، انقر للانتقال إلى النسخة الأولية من المشروع في المتصفح، كما يمكنك تنزيل النسخة الأولية من ملف Drum star - starter، والعمل في نسخة سطح المكتب من سكراتش.

ثانيًا، انقر على أيقونة اختيار خلفية واختر الخلفية التي تفضّلها، اخترنا في هذا المشروع الخلفية "Bedroom 3".

ثالثًا، انقر على المنصة وأضف عليها الكتل التالية:

لا بُد لكل موسيقي من اسم فني يليق به، ولذلك سنستخدم المتغيرات لتخزين اسمك الفني لنستخدمه عند السؤال عنه في لعبتنا.

رابعًا، انقر على قائمة كتل المتغيرات، ثم انقر على خيار إنشاء متغير، سمِّ المتغير "الاسم الفني":

لاحظ أن المتغير سيظهر على المنصة وفي قائمة كتل المتغيرات.

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

خامسًا، أضف كتلة اسأل من كتل الاستشعار للسؤال عن الاسم الفني للاعب:

ثم أضف الكتلة التالية للإجابة عن السؤال:

سادسًا، انقر بالزر الأيمن للفأرة على متغير الاسم لتغيير مظهره:

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

الآن، شغل المشروع وتحقق من أن متغير الاسم الفني يكون مجهولًا في البداية ؟؟؟، ثم يظهر الإجابة التي أدخلتها.

بعد أن تحققت من عمل الكتل، يمكنك سحب الكتلتين الأخيرتين بعيدًا حتى لا تضطر لإدخال إجابة كلما أردت اختبار المشروع.

إضافة الطبول

سنضيف في هذه الخطوة صنجةً -وهي إحدى أنواع الطبول- بحيث ينقر اللاعب عليها ليعزف النغمات ويزداد عدد النقاط التي يكسبها.

أولًا، انقر على أيقونة اختيار كائن، ثم اكتب "Cymbal" في مربع البحث، وأضف الصنجة إلى مشروعك.

ثم ضعها في المكان المناسب على المنصة.

ثانيًا، أضف ملحق الموسيقى بالنقر على أيقونة الإضافات أسفل الزاوية اليمنى للشاشة.

انقر على ملحق الموسيقى لإضافته.

ستظهر كتل الموسيقى في أسفل قائمة المقاطع البرمجية:

ثالثًا، أضف الكتل التالية لتغيير مظهر الصنجة عند النقر عليها وجعلها تصدر الصوت:

ثم شغِّل المشروع واختبر عمل الصنجة، تأكد من أنها تصدر الصوت وتغير مظهرها عند النقر عليها.

رابعًا، أنشئ متغيرًا لعدد النقاط كما تعلمنا في خطوة سابقة، وسمّه النقاط:

خامسًا، أضف كتلة غيِّر النقاط التالية لزيادة عدد النقاط عند قرع الصنجة بمقدار 1:

اختبر عمل الصنجة، و تأكد من أن عدد النغمات يزداد عند قرع الصنجة.

سادسًا، أضف كتلة "اجعل النقاط مساويًا 0" إلى المنصة لجعل عدد النغمات مساويًا للصفر عند بدء المشروع:

انقر على العلم الأخضر واختبر عمل المشروع.

ترقية الطبول

سنضيف في هذه الخطوة طبلًا جانبيًا إضافيًا يُدعى Snare، وسنضيف زرًا يوضح للاعب متى يمكنه الحصول على هذا الطبل.

أولًا، أضف كائن الطبل الجانبي إلى مشروعك، ثم ضعه في مكان مناسب على المنصة، اكتب "snare" في مربع البحث للحصول عليه بسرعة.

ثانيًا، اسحب الكتل الخاصة بكائن الصنجة "Cymbal" وأفلتها فوق أيقونة الطبل الجانبي لنسخ الكتل إليه، وبهذه الطريقة يصبح لدى الكائنين نفس الكتل.

ثالثًا، غيّر عدد النقاط التي تحصل عليها عند نقر الكائن إلى القيمة 2، وعدِّل مظاهر الكائن كما يلي:

افحص عمل المشروع، هل تحصل على نقطتين كلما نقرت على الطبل؟

رابعًأ، انقر على الطبل الجانبي وأضف كتلة اختفِ لإخفاء الطبل عند بداية المشروع، إذ يجب على اللاعب جمع النقاط للحصول عليه.

خامسًا، أعد تسمية الزر، ثم انقر عليه لمضاعفته.

ثم غيّر وضع العرض إلى إظهار، واسحب الزر إلى أسفل الزاوية اليمنى للمنصة:

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

سابعًا، انقر على كائن زر الترقية، ثم الصق فيه مظهر الطبل الجانبي، عدّل حجمه بحيث يتناسب مع أبعاد الزر:

ثامنًا، انقر على نافذة المقاطع البرمجية وأضف كتلة الإظهار لعرض زر الترقية عند بدء تشغيل المشروع:

سنستخدم كتلة *إذا … وإلا، كما في مشروع لعبة اليعسوب أكل الحشرات، ليحصل اللاعب على طبلة جديدة إذا كان مجموع نقاطه أكبر من القيمة 9، وإلا إذا كان المجموع أقل ستظهر له رسالة "عذرًا لا تملك نقاطًا كافية!"

سننشر رسالةً لنُخبر الكائنات والمنصة بأننا حصلنا على طبل جانبي جديد.

تاسعًا، أضف رسالة بث من كتل الأحداث، ثم انقر على النافذة المنزلقة للكتلة وانقر خيار رسالة جديدة، ثم اكتب اسم الكائن "Drum-Snare":

عاشرًا، انقر على كائن الطبل الجانبي وأضف الكتل التالية:

والآن، بما أننا حصلنا على آلة جديدة، أصبح بإمكاننا الانتقال للعزف في مكان أكبر، ولتحقيق ذلك، أضف الخلفية "Chalkboard" من مكتبة الخلفيات كي نعزف في حفلتنا الموسيقية الثانية في المدرسة وندخل البهجة على وجوه الطلاب.

أضف الكتل التالية للمنصة لتغيير الخلفية عند استلام رسالة الترقية:

ننصح بمراعاة الحجم عند اختيار الخلفية،إذ أنه عليك اختيار أماكن أكبر فأكبر تدريجيًا.

أخيرًا، اختبر المشروع وجرب النقر على زر الترقية قبل حصولك على نقاط كافية، ما الذي سيحدث؟

تحقق أن الطبل الجانبي يظهر على المنصة، وأن زر الترقية يختفي وأن الخلفية تتغير ويتناقص عدد النقاط بمقدار 10 نقاط.

معلومة: نستخدم في حياتنا اليومية المحاكاة المنطقية إذا … وإلا باستمرار، فمثلًا عندما نستيقظ من النوم نتحقق هل أتى الصباح لننهض، وإلا نكمل نومنا حتى يحين وقت الاستيقاظ.

إضافة مزيد من الطبول

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

أولًا، انقر على كائن الطبل الجانبي لمضاعفته.

ثانيًا، انقر على كائن الطبل الثنائي، ثم انتقل إلى نافذة المظاهر، ستلاحظ وجود عدة مظاهر، اختر منها مظهرين لنفس الآلة واسحبهما إلى الكائن الذي ضاعفناه في الخطوة السابقة، ثم أفلتهما. اخترنا في مثالنا الطبل الثنائي "Conga".

ثالثًا، أعد تسمية الطبل الجديد باسمٍ مناسب.

رابعًا، انقر على نافذة المقاطع البرمجية وعدّل عدد النقاط التي تحصل عليها عند النقر على الطبل الجديد واجعلها تساوي القيمة 5:

لاحظ أننا اخترنا المظاهر والصوت المناسب للآلة التي اخترناها، يمكنك اختيار المظاهر والصوت الذي تفضله.

خامسًا، ضع الطبل الجديد في موقع مناسب على المنصة:

سادسًا، ضاعف زر الترقية القديم وسمّه باسم مناسب، "ترقية 2" مثلًا، ثم ضعه أسفل الزاوية اليمنى للمنصة:

بعد ذلك، احذف مظهر الطبل الجانبي من مظاهر زر الترقية، ثم انسخ المظهر الأول للطبل الثنائي، والصقه في زر الترقية الجديد، كما فعلنا في خطوة سابقة، ثم استخدم أداة النص لتغيير عدد النقاط اللازمة للحصول على الطبل الجديد، اجعلها مساويةً 30 نقطة، ليبدو الزر كما يلي:

سابعًا، يجب أن يظهر هذا الزر فقط بعد أول ترقية، ليوضح للاعب ما هي الترقية التالية المتاحة، لذلك يجب علينا إضافة كتلة الإخفاء التالية:

ثم أضف الكتلة التالية على زر الترقية الثاني كي يظهر بعد استخدام زر الترقية الأول:

ثامنًا، عدِّل عدد النقاط اللازمة للحصول على هذا الطبل، وعدد النقاط التي ستنقص من مجموع اللاعب عند استخدام زر الترقية، وأضف رسالة بث جديدة باسم الآلة:

أضف رسالة النشر التالية على كائن الطبل الجانبي ليظهر على المنصة بعد النقر على زر الترقية:

أضف خلفية الحفلة "Party" على المنصة، وأضف الكتل التالية كي تتغير الخلفية عند الترقية إلى الطبل الجديد:

انقر على العلم الأخضر واختبر مشروعك، ما الذي سيحدث عند نقر زر الترقية قبل الحصول على نقاط كافية للترقية؟

معلومة: يمكنك حذف كتلة عند طريق إفلاتها فوق قائمة الكتل البرمجية، أو بالنقر عليها بزر الفأرة الأيمن واختيار حذف الكتلة أو باستخدام مفتاح Delete من لوحة المفاتيح.

تخصيص اللعبة

حان الآن وقت تخصيص اللعبة وإعدادها للعمل. اختبر لعبتك واستمتع باللعب فيها. هل يوجد شيءٌ ما تود تغييره؟

راقب متغير النقاط، لاحظ أن قيمته تزداد عندما تُقرع الطبول وتنقص عندما تحصل على طبل جديد، بإمكانك تغيير عدد النقاط اللازمة للحصول على طبل جديد.

لا تنسى إرجاع كتلة السؤال عن الاسم الفني وضمّها إلى باقي الكتل في حال كنت فصلتها عنها، كما ننصحك باختبار المشروع بعد كل خطوة لضمان خلوه من الأخطاء.

ترقية المشروع

حان الآن وقت ترقية المشروع عن طريق إضافة مزيد من الطبول والخلفيات.

إليك بعض التحسينات الممكن إضافتها على مشروعك لترقيته:

• إضافة مزيدٍ من أزرار الترقية للطبول.
• إضافة مزيدٍ من الطبول.
• إضافة مزيدٍ من الخلفيات على مشروعك.

لا تتردد في مراجعة الخطوات السابقة إن احتجت لذلك.

تصحيح الأخطاء

قد تجد بعض الأخطاء في مشروعك والتي تحتاج إلى إصلاح، ولتفادي ظهورها ننصحك بفهم آلية عمل الطبول والأزرار وكيفية عمل متغير النقاط مما يسهل عليك إصلاحها.

فيما يلي بعض الأخطاء الشائعة التي قد تواجهها في مشروعك:

• لا يظهر الطبل على المنصة أو لا يختفي: تأكد من إضافة كتلة "الإخفاء بعد كتلة عند النقر على العلم الأخضر، و تأكد من إضافة كتلة الإظهار بعد كتلة استلام رسالة البث، وتأكد أن زر الترقية يرسل رسالة بث صحيحة ومطابقة للرسالة المستلمة في الطبل.

انتبه أننا لسنا بحاجة تطبيق هذه الخطوات في الطبل الاول.

• لا يظهر زر الترقية على المنصة أو لا يختفي: يجب أن يحتوي زر الترقية على كتلة الإخفاء بعد كتلة عند النقر على العلم الأخضر، وكتلة الإظهار بعد كتلة استلام رسالة البث، لكن لا ينطبق ذلك على زر الترقية الأول، إذ يجب أن يظهر في البدء ليعلم اللاعب ما هي الترقية التي سيحصل عليها.
• الحصول على طبل جديد حتى عند عدم وجود نقاط كافية: تحقق من عدد النقاط اللازمة للحصول على الطبل الجديد في الكتل البرمجية الخاصة بزر الترقية، واحرص على كونه مطابقًا للنقاط المطلوبة في مظهر زر الترقية.
• لا يتغير عدد النقاط بدقة عند الحصول على طبل جديد: تأكد من إضافة إشارة السالب - عند كتلة تغيير عدد النقاط في الكتل البرمجية الخاصة بزر الترقية، واحرص على أن يكون العدد مطابقًا للنقاط المطلوبة .

تذكر أنه إذا استعصى عليك إيجاد المشكلة وحلها، فلا بأس في حذف الطبل وزر الترقية الخاص به ثم إعادة إضافة الكتل الخاصة بهما.

يمكنك الإطلاع على المشروع كاملًا في نسخة المتصفح أو تنزيل النسخة الكاملة من ملف Drum star - complete لفتحها في نسخة سطح المكتب.

خاتمة

تهانينا، فقد أتممت مشروع إنشاء لعبة الطبول الموسيقية باستخدام سكراتش، وننصحك بتنفيذ مشروع بإنشاء لعبة متجر تفاعلي باستخدام سكراتش في خطوتك التالية.

إذا واجهت مشاكلًا مع برنامج سكراتش، فيمكنك الحصول على الدعم والمساعدة عبر إضافة سؤالك في قسم الأسئلة والأجوبة في أكاديمية حسوب، ولا تنسى مشاركتنا مشروعك على مجتمع سكراتش في منصة حسوب IO.

ترجمة -وبتصرف- للمقال Drum Star من الموقع الرسمي لراسبيري باي.

اقرأ أيضًا

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

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

إذ ستستخدم في مشروعنا برنامج سكراتش والفن المُولد من الحاسوب Computer generated art، أو الفن الإلكتروني، وهو أي نوع من الرسوم المُولَّدة باستخدام الحاسوب، سواءًا يدويًا أو آليًا باستخدام الذكاء الاصطناعي، لخلق أعمال فنية ساحرة، مشابهة لما يلي:

ستعمل في هذا المشروع على:

• استخدام النسخ لإنشاء أنماط متكررة.
• استخدام كتل لبناتي لتخصيص التصاميم.
• استخدام معاملي الجمع + والطرح- لتغيير مظهر الكائن وموضعه. لنحصل على نتيجة مشابهة لما يلي:

انقر على العلم الأخضر للتشغيل، ثم اختر الشكل الذي تفضله ولونه بالنقر عليه مرةً أو عدة مرات لتحصل على لون مختلف، انقر بعدها على مفتاح المسافة Space وشاهد ماذا سيحدث!

اختر شكلًا آخر وانقر على مفتاح المسافة، ماذا تلاحظ؟ هل يتحرك الشكل وفقًا لنفس النمط السابق؟

معلومة: كلمة ماندالا mandala هي سنسكريتية الأصل وتعني "دائرة"، وتتكون عادةً تصاميم الماندالا من دوائر متحدة المركز، وأشكال وأنماط متكررة.

تصميم الماندالا

سنُصمم في هذه الخطوة شكل الماندالا وذلك بنسخ الكائنات عدة مرات لإنشاء نمط خاص بنا.

أولًا، افتح نسخة سطح المكتب من برنامج سكراتش مع ملف Mandala-project، أو انقر هنا لعرض النسخة الأولية من المشروع في المتصفح، ولاحظ وجود كائن يشبه بتلة الزهرة على المنصة.

سنستخدم في هذه الخطوة كتلة لبناتي لإنشاء نمط معين باستخدام كائن ما، وذلك عن طريق كتابة الكتل مرةً واحدةً ثم إعادة استخدامها، لتوليد النمط. وكنا قد استخدمنا كتل لبناتي في مشروع نزهة في الطبيعة لتنظيم الكتل البرمجية، وفي مشروع تحدي إنقاذ السفينة الفضائية لإعادة استخدام الكتل.

ثانيًا، انقر على كتل لبناتي من القائمة، ثم انقر على خيار إنشاء لبنة، وسمّي اللبنة باسم مناسب، "نمط هندسي" مثلًا، انقر بعدها على خيار إضافة حقل وسمّه كرّر.

كما يمكنك إضافة وصف على اسم الكتلة ليشرح للمستخدم عملها كأن تسمّها "نمط هندسي: تكرار"، إذ يستخدم المبرمجون هذا الوصف لتعريف المدخلات أو ما يسمى بالمعاملات Parameters.

ستحصل على الكتلة التالية، إن لم تجدها في الجزء المخصص للكتل البرمجية فانقر على زر تصغير الشاشة واسحب الشريط أسفل الشاشة باتجاه اليمين أو اليسار لتجد الكتلة:

الآن، علينا تصميم النمط الخاص بنا، وذلك "بتعريّفه" أي بإضافة الكتل اللازمة إلى كتلة عرّف.

ثالثًا، أضف كتلة تكرار ثم اسحب المعامل كرّر من كتلة التعريف إلى كتلة التكرار، كما يلي:

لتحصل على الكتل التالية:

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

تعطينا كتلة التعريف الشكل العام للنمط، ويمكننا تشبيه ما فعلناه في هذه الخطوة بصنع مسطرة الأشكال الهندسية أو "مسطرة سبيروجراف" أي أننا صنعنا الأداة التي سنستخدمها فيما بعد لتشكيل النمط.

خامسًا، حان الآن وقت إنشاء النمط باستخدام كتلة لبناتي التي أنشأناها، اسحب كتلة النمط الهندسي وحدد عدد مرات التكرار واختر الموضع الذي تريد أن تظهر فيه البتلات، وحجمها، باستخدام الكتل التالية:

الآن، انقر على العلم الأخضر لمشاهدة النمط. قد يبدو النمط الآن بسيطًا وباهتًا، لا تقلق سنضيف عليه المزيد من الحيوية في الخطوات التالية.

تصميم الماندالا

سنعمل في هذه الخطوة على تصميم شكل الماندالا.

أولًا، انقر على كتلة تعريف النمط الهندسي بالزر الأيمن للفأرة وانقر على خيار التعديل لإضافة المزيد من المعاملات على الكتلة:

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

لتحصل على الكتل التالية:

انقر على العلم الاخضر لتشغيل البرنامج ومعاينة الماندالا. فكّر ما الذي ينقص التصميم ليبدو كماندالا حقيقية؟ كيف يمكنك جعل التصميم دائريًا؟

ثانيًا، أضف معاملًا جديدًا لتدوير التصميم وسمّه "استدر" أو "استدارة، ثم أضف الكتل التالية على برنامجك:

يكون تصميم الماندالا عادةً معقدًا، إذ تحوي على عدة دوائر وأسطر، وأشكال تتكرر دوريًا، إذًا، سننشئ الآن نمطًا أساسيًا للتصميم والذي سيتكرر في باقي أسطر الماندالا.

ثالثًا، عدّل على قيم الحجم والموضع في النمط لتحصل على النتيجة التي تحلو لك، والتي ستعتمدها كتصميم أساسي للماندالا.

والآن بعد أن حصلنا على التصميم الأساسي، أصبح بإمكاننا إعادة استخدامه عدة مرات لإنشاء النمط الكامل للماندالا، أو "صفوف الماندالا".

لاحظ أنه باستخدامنا نفس الكتل البرمجية مرارًا وتكرارًا نكون قد أنشأنا برنامجًا محسنًا.

التحسين أو Optimization باللغة الإنجليزية، يعني تنفيذ أمر ما بأكثر الطرق فعالية. إليك المثال التالي: للانتقال منA إلى E، يمكننا سلوك الطريق A-> B-> C-> D->E، أو يمكننا سلوك الطريق A->D->E، والذي يُعد طريقًا محسَّنًا أو أكثر فعاليةً لاحتواءه على تنقلات أقل.

رابعًا، استدعِ كتلة النمط الهندسي عدة مرات وغيّر قيم معاملاتها:

انقر على العلم الأخضر لمعاينة النمط الذي حصلت عليه، غيّر قيم المعاملات أو كرر استدعاء النمط الهندسي حتى تحصل على الشكل الذي ترغب به!

تصميم شكل الكائن

سنصمم في هذه الخطوة شكل الكائن الذي سيكون أساسًا للنمط خاصتنا.

أنشأنا في الفقرة السابقة نمطًا يتغير في كل مرة، اعتمادًا على قيم المعاملات التي نستخدمها. الآن،سننشئ كتلةً جديدةً ليرسم البرنامج تصميمًا من شكل ثابت.

أولًا، أنشئ كتلةً جديدةً من كتل لبناتي كما تعلمنا سابقًا وسمّها "تهيئة" وأضع عليها المعاملات الأربعة التالية: الحجم، والشفافية، والمحور الشاقولي "ص"، وتحرك أو عدد الخطوات:

تفيد كتلة الشفافية في جعل لون الشكل شفافًا، وبذلك نحصل على مزيج من الألوان عندما تتداخل الأشكال مع بعضها.

ثانيًا، حدد التأثيرات الخاصة بكتلة التهيئة عن طريق إضافة الكتل التالية تحتها:

ثالثًا، بعد أن عرّفنا كتلة التهيئة، عليك الآن إضافة الكتلة نفسها تحت كتلة عند النقر على العلم الأخضر لتعمل:

بإمكانك إخفاء الكائن عند الإنتهاء من رسم الماندالا، وذلك بإضافة كتلتي الإظهار والإخفاء كما يلي:

انقر على العلم الأخضر لمعاينة النمط الذي حصلت عليه، وغيّر قيم المعاملات حتى تحصل على الشكل الذي ترغب به!

تلوين الماندالا

سنبعث الحيوية في الماندالا بإضافة الألوان إليها، أطلق العنان لإبداعك وأضف الألوان والبهجة!

كما يمكنك طباعة الماندالا وتلوينها يدويًا.

سنضيف في الفقرة التالية كتلةً لسؤال المستخدم عن الشكل الأساسي الذي يريد استخدامه لإنشاء الماندالا، وسينشئ البرنامج نسخًا عن الشكل الأساسي وفقًا لإجابة المستخدم، بحيث يتغير لون الشكل عند النقر عليه.

أولًا، أضف كتلة غيّر المظهر ثم اسحب إليها كتلة معامل الجمع من كتل العمليات واسحب داخلها كتلة الإجابة من كتل الاستشعار، ثم أضف كتلة تغيير مؤثر اللون لتحصل على الكتل التالية:

أي أنه عند النقر على الكائن سوف يتغير مظهره إلى المظهر التالي في نافذة المظاهر، وسوف يتغير لونه.

ثانيًا، انقر على العلم الأخضر، ثم انقر على الأشكال لتغيير لونها، ثم عدّل مؤثر الشبح أو الشفافية، الذي أضفناه في الخطوة السابقة، وفق ما يحلو لك. إذا أردت لونًا شفافًا كالألوان المائية فعليك تكبير قيمة مؤثر الشبح، أما للحصول على لون مشبع فعليك اختيار قيمة صغيرة.

لاحظ كيف نحصل على لون جديد كلما تداخلت الألوان مع بعضها! يمكنك النقر على المنصة بالزر الأيمن للفأرة لحفظ صورة عن الماندالا التي أنشأتها بالنقر على خيار "حفظ الصورة باسم" أو "Save image as" إذا كانت لغة حاسوبك هي الإنجليزية:

ترقية الماندالا

سنعمل في هذه الخطوة على ترقية التصاميم التي ينشأها البرنامج وذلك باستخدام الكتل المحسَّنة التي نفذناها سابقًا.

سنضيف الآن المزيد من المظاهر ليختار منها المستخدم.

أولًا، أضف مظهرًا مناسبًا من مكتبة الكائنات، واحرص على اختيار كائن ذو رسم شعاعي وليس نقطي.

بعد إضافة المظهر، سيظهر لك خيار تحويل إلى رسم نقطي عند اختيارك كائنًا أو مظهرًا ذو رسم شعاعي، وبذلك تتأكد من خيارك.

اخترنا في مثالنا مظهر الكرة الأرضية "Earth":

ثانيًا، امسح الألوان من الشكل بحيث تحصل على المخطط فقط،وذلك بتحديد الشكل كاملًا وتغيير قيمة تشبع اللون من مربع ملء اللون إلى القيمة 0، وتغيير السطوع من مربع الإطار إلى القيمة 0، كما يلي:

ثالثًا، ضاعف المظهر ثم املأه بلون من اختيارك:

رابعًا، أضف المزيد من المظاهر وكرر العملية السابقة، ثم رتب المظاهر بوضع المظاهر غير الملونة في الأعلى، والمظاهر الملونة أدناها ولكن بنفس ترتيب الأولى.

خامسًا، احرص على جعل العدد في كتلة تغيير المظهر مماثلًا لعدد المظاهر غير الملونة (أو الملونة)، وذلك لتحصل على الشكل الصحيح ملونًا عند النقر عليه:

كما يمكنك تعديل الرقم للحصول على مزيج من الأشكال وتصاميم جديدة!

أخيرًا، شغّل البرنامج واستمتع بمشاهدة تصميمك ينبض بالحياة!

اختيار التصميم

سنعمل في هذه الخطوة على إرضاء ذوق المستخدم بجعله يشارك في عملية التصميم واختيار الشكل الأساسي للماندالا.

بما أنه لدينا الآن تصميمان أساسيان، على الأقل، للماندالا، سنضيف كتلةً لسؤال المستخدم عن الشكل الذي يفضله، عند بداية البرنامج.

أولًا، أضف كتلة اختفِ ثم كتلة إسأل وانتظر لتخيير المستخدم بين الأشكال المتاحة:

احرص على إضافة كتلة اختفِ قبل كتلة السؤال ليظهر السؤال في شاشة البدء منفصلًا عن الكائن، وليس كفقاعة حوار، واحرص على ترتيب الأشكال في السؤال كما في نافذة المظاهر.

ثانيًا، أضف كتلة تغيير المظهر إلى الإجابة كما يلي:

شغّل البرنامج واختبر مشروعك!

ترقية المشروع

ما رأيك بإضافة موسيقى لطيفة تبعث على الاسترخاء، أو تحريك التصميم لتبدو الأشكال وكأنها تتراقص على الأنغام المبهجة؟ فكّر في الكتل اللازمة لتحقيق ذلك.

إليك الكتل اللازمة:

لا تنسى أنه بإمكانك اختيار المفتاح والصوت الذي تفضله.

ختامًا

بهذا تكون قد أتممت مشروع تصميم وتنفيذ برنامج لإنشاء رسومات الماندالا باستخدام سكراتش.

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

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

ولا تنسى مشاركتنا مشروعك على مجتمع سكراتش في منصة حسوب IO.

ترجمة -وبتصرف- للمقال Mandala من الموقع الرسمي لراسبيري باي.

اقرأ أيضًا

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

سنعمل في هذا المشروع على إنشاء لعبة بسيطة يزداد فيها حجم حشرة اليعسوب عندما تأكل الحشرات الصغيرة، وذلك باستخدام سكراتش scratch.

سننفذ في هذا المشروع ما يلي:

• استخدام كتل الاستشعار وكتل العمليات الرياضية مع كتل إذا الشرطية.
• استخدام أعداد عشوائية لتحريك الكائنات.
• استخدام المحرر لتعديل الأصوات.

وذلك لنحصل على نتيجة مشابهة لما يلي:

انقر على زر العلم الأخضر، ثم حرك الفأرة كي يأكل اليعسوب الحشرات الأخرى، ولاحظ ما الذي سيحدث لليعسوب، ونمط حركة الحشرات.

معلومة: نستخدم الشروط دائمًا في حياتنا اليومية عند اتخاذنا القرارات، كأن نقول "إذا كان قلم الرصاص غير حاد، فاشحذه باستخدام المبّراة". يمكننا في سكراتش استخدام كتلة إذا الشرطية لتنفيذ أمر مختلف عند تحقق الشرط وعند عدم تحققه.

إعداد المشهد

سنختار في هذه الخطوة خلفيةً مناسبةً للعبتنا، كما سنضيف حشرة اليعسوب والكتل اللازمة لجعلها تتبع حركة مؤشر الفأرة.

اقتباس

هل تعلم أن حشرة اليعسوب منتشرةٌ في جميع أنحاء العالم وهي موجودةٌ منذ أكثر من 300 مليون سنة؟

أولًا، افتح نسخة سطح المكتب من برنامج سكراتش، أو انقر هنا لعرض المشروع في المتصفح.

ثانيًا، انقر على أيقونة اختيار خلفية واختر خلفيةً مناسبةً للمشهد. للحصول على الخلفية التي استخدمناها في هذا المقال، واكتب "Jurassic" في مربع البحث.

ثالثًا، انقر على أيقونة اختيار كائن واكتب "dragonfly" في مربع البحث للحصول على كائن اليعسوب Dragonfly.

رابعًا، أضف الكتل التالية لجعل اليعسوب يتبع حركة مؤشر الفأرة:

انقر على العلم الأخضر واختبر هل يتبع اليعسوب حركة مؤشر الفأرة بسلاسة. لاحظ أن رأس اليعسوب لا يتبع حركة مؤشر الفأرة، سنعمل على إصلاح ذلك.

خامسًا، انقر على نافذة المظاهر واستخدم أداة التحديد ذات شكل السهم لتحديد كائن اليعسوب، ثم استخدم أداة التدوير أسفل المستطيل المحيط باليعسوب لإمالة اليعسوب باتجاه اليمين.

انقر على العلم الأخضر ولاحظ الفرق في حركة اليعسوب الآن.

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

سابعًا، اختر الصوت الذي تراه مناسبًا من خلال وضع مؤشر الفأرة على الصوت لسماعه. اخترنا في مثالنا الصوت Crank المماثل لصوت رفرفة أجنحة اليعسوب. اكتب "Crank" في مربع البحث ثم انقر على الصوت لإضافته للكائن.

انقر بعدها على زر التشغيل لسماع الصوت. لاحظ أن الصوت بحاجة إلى تعديل.

ثامنًا، حدِّد نهاية مقطع الصوت باستخدام مؤشر الفأرة، ثم انقر على خيار النسخ إلى صوت جديد للحصول على مقطع صوتي جديد:

ثم سمِّ المقطع باسمٍ مناسب.

تاسعًا، انقر على خيار تسريع عدة مرات لتسريع الصوت حتى تحصل على نتيجة مناسبة.

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

عاشرًا، أضف كتلة ابدأ الصوت من كتل الأصوات لتشغيل صوت الأجنحة، كما يلي:

أخيرًا، انقر على العلم الأخضر واختبر حركة اليعسوب، ولا تنسى حفظ المشروع.

إضافة الحشرات الصغيرة

سنضيف في هذه الخطوة ذبابةً كي يأكلها اليعسوب ويتغذى عليها.

هل تعلم أن الشخصيات المتحركة في الألعاب تدعى mobs اختصارًا لكلمة mobile باللغة الانجليزية، أي متحرك. ما هي الألعاب التي تعرفها والتي تحتوي على شخصيات المتحركة؟

أولًا، أضف كائن الضفدع من مكتبة الكائنات بكتابة "Frog 2" في مربع البحث.

ثانيًا، انقر على نافذة المظاهر ثم حدِّد الذبابة باستخدام أداة التحديد وانقر بعدها على خيارالنسخ:

ثالثًا، انقر على خيار الرسام من أيقونة الكائنات، ثم انقر على خيار اللصق واسحب الذبابة إلى المنتصف فوق المؤشر الرمادي.

رابعًا، أعد تسمية المظهر باسمٍ مناسب، واحذف المظهر الآخر الذي يحتوي على الضفدع.

خامسًا، كبِّر حجم الذبابة كي يسهل عليك رؤيتها والتقاطها.

سادسًا، انتقل إلى نافذة المقاطع البرمجية لإضافة الكتل اللازمة لتحريك الذبابة:

تُوجِّه كتلة ارتد إذا كنت عند الحافة الكائن نحو اتجاهٍ آخر عندما يصل إلى حافة المنصة.

سابعًا، أضف كتلة إذا التالية لإخفاء الذبابة عندما يأكلها اليعسوب:

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

سابعًا، اسحب كتلة ملامس ل من كتل الاستشعار وضعها شرطًا لكتلة إذا، واختر كائن اليعسوب من النافذة المنسدلة للكتلة، ثم اسحب كتلة اختفِ وضعها داخل كتلة إذا.

انقر على العلم الأخضر واختبر البرنامج، هل تختفي الذبابة عندما يأكلها اليعسوب ؟

لن يكبر اليعسوب إذا أكل ذبابة واحدة فقط.

ثامنًا، أضف الكتل التالية إلى مشروعك ليبدو وكأننا حصلنا على ذبابةٍ جديدة بعد أن أكل اليعسوب الأولى، وذلك بالاستعانة بكتلة اذهب إلى موضع عشوائي، وجعل الكائن ينتظر عدة ثوان ثم يظهر، ولا تنسى إضافة كتلة الإظهار بعد كتلة عند النقر على العلم الأخضر كي تظهر الذبابة الأولى على المنصة.

انقر على العلم الأخضر واختبر البرنامج، هل يزداد عدد الذباب على المنصة؟

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

لا تنسى حفظ المشروع.

زيادة حجم اليعسوب

سنعمل في هذه الخطوة على جعل حجم اليعسوب يزداد عندما يأكل الذباب حتى يصل إلى حجم معين.

هل تعلم أن أكبر حشرات اليعسوب توجد في أمريكا الوسطى ويبلغ طول جناحيها 19 سم (أي أكبر من حجم يدك بقليل)، وأن أكبر حشرةٍ معروفةٍ في التاريخ هي حشرة يعسوب تدعى Meganeuropsis permiana ويبلغ طول جناحيها حوالي 75 سم (أي بحجم خطوة كبيرة).

يجب علينا إضافة كتلة بث كما في مشروع التعاويذ السحرية، والتي تعمل على إرسال رسالة إلى الكائن لينفذ بعدها أمرًا ما، ففي مثالنا تُضاف كتلة بث إلى الذباب كي يستلم اليعسوب الرسالة ويزداد حجمه عندما يأكل الذباب.

أولًا، أضف كتلة بث من كتل الأحداث على كائن الذبابة Insect، وانقر على النافذة المنسدلة للكتلة لإضافة رسالةٍ جديدة، سمِّ الرسالة باسمٍ مناسب، "طعام"، أو "Food"مثلًا:

ثانيًا، أضف الكتل التالية إلى اليعسوب كي يزداد حجمه عندما يستلم رسالة البث، أي عندما يأكل الذباب:

ثالثًا، أضف الصوت "Chomp" إلى اليعسوب كي يصدر صوتًا عندما يأكل الذباب:

شغِّل المشروع واختبر هل يكبر اليعسوب عندما يأكل الذباب؟ وهل يصدر صوتًا؟

رابعًا، تنتهي لعبتنا عندما يصل اليعسوب إلى حجم معين، أي عندما يصبح الحجم مساويًا 100%، لذلك أضف كتلة إذا لتحقيق ذلك. اسحب كتلة المساواة = من كتل العمليات إلى داخل معيَّن شرط إذا:

ثم اسحب متحول الحجم من كتل الهيئة إلى شرط إذا وغير قيمة الحجم إلى 100:

خامسًا، أضف الكتل التالية بحيث يُظهر اليعسوب رسالة "لقد أصبت بالتخمة!" عندما يتحقق شرط كتلة إذا ويصل إلى الحجم الكامل:

لا تنسى إضافة كتلة أوقف واختر إيقاف المقاطع البرمجية الأخرى في الكائن من القائمة المنسدلة للكتلة.

سادسًا، أضف الكتل التالية ليتوقف الذباب عن الحركة عند انتهاء المشروع:

وأخيرًا، انقر على العلم الأخضر والعب حتى يصل اليعسوب إلى حد الشبع، ولا تنسى حفظ المشروع.

تحسين حركة اليعسوب

لاحظ أن اليعسوب "يرتجف" ويغير اتجاهه بسرعة كبيرة إذا كان مؤشر الفأرة يلامس جسم اليعسوب. سنعمل في هذه الخطوة على تحسين حركة اليعسوب باستخدام كتلة إذا.

أولًا، أضف كتلة إذا على كائن اليعسوب، بحيث تصبح الكتل الموجودة في كتلة التكرار داخل كتلة إذا، لتحصل على النتيجة التالية:

ثانيًا، أضف كتلة ليس من قائمة كتل العمليات وكتلة ملامس لمؤشر الفأرة من كتل الاستشعار على شرط إذا، كما يلي:

إذا لم يكن اليعسوب ملامسًا لمؤشر الفأرة، سيصدر صوت الأجنحة ويتحرك اليعسوب 5 خطوات باتجاه مؤشر الفأرة.

شغِّل المشروع واختبر هل أصبح اليعسوب يتحرك بسلاسة؟

يمكنك تجريب الكتلة التالية لتحسين حركة اليعسوب:

والتي تجعل اليعسوب يتحرك عندما يكون بعيدًا عن مؤشر الفأرة.

لا تنسى أنه بإمكانك سحب الكتل بعيدًا عوضًا عن حذفها، عند تجريب عمل الكتل الأخرى.

إضافة مزيد من الحشرات

سنعمل في هذه الخطوة على إضافة مزيدٍ من الحشرات كي يتغذى عليها اليعسوب.

أولًا، انقر بزر الفأرة الأيمن على كائن الذبابة، ثم انقر على خيار المضاعفة.

ثانيًا، غيّر شكل الذبابة إما بإضافة كائن آخر من مكتبة الكائنات، أو بالنقر على نافذة المظاهر، واستخدام أداة ملء اللون لتغيير لون الذبابة، أو التعديل على شكلها في محرر الرسام.

لاحظ أن اليعسوب يأكل الذبابة حتى عندما تلامس رأسه أو جناحه، ولإضفاء عنصر الواقعية على لعبتنا علينا إصلاح ذلك، بجعل اليعسوب يأكل الذباب فقط عندما يلامس فمه، وذلك باستخدام كتل الاستشعار.

ثالثًا، انقر على كائن اليعسوب ثم انقر على نافذة المظاهر ثم غيّر لون فم اليعسوب باستخدام أداة ملء اللون إلى اللون الأرجواني:

رابعًا، انقر على كائن الذبابة الجديدة، ثم أضِف كتلة و من كتل العمليات على كتلة إذا، وكذلك أضف كتلة ملامس لـ من كتل الاستشعار، وعدِّل الخيار من النافذة المنسدلة إلى اليعسوب:

خامسًا، أضف كتلة ملامس للون إلى شرط كتلة إذا وعلى يمين كتلة و :

إذا لم يُحدَّد لون فم اليعسوب ، استخدام أداة القطارة Eyedropper لتحديد لونٍ له.

انقر على أداة اختيار اللون الموجودة أسفل الشرائط اللونية الثلاثة، ثم انقر على فم اليعسوب لتحديد اللون الأرجواني، كما يمكنك تكبير حجم اليعسوب لسهولة التحديد.

نفِّذ الخطوتين السابقتين على كائن الذبابة الأولى.

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

 إضافة حركة عشوائية للذباب

سنضيف في هذه الخطوة تأثير حركة عشوائية على الذباب لنحاكي حركته في الطبيعة، وذلك باستخدام كتلة الأعداد العشوائية من كتل العمليات.

أضف الكتل التالية لجعل الذبابة الثانية تتحرك عشوائيًا خلال فترات متفاوتة من ثانية إلى ثلاث ثوان:

شغِّل المشروع واختبر حركة الذباب، غيِّر الأرقام حتى تحصل على تأثير الحركة الذي تريد وزيادة أو إنقاص سرعة الحركة، كما يمكن تغيير سرعة اليعسوب، ويمكنك أيضًا نسخ تأثير الحركة إلى كائن الذبابة الأولى.

ترقية المشروع

أضف مزيدًا من الحشرات إلى لعبتك وغيِّر مظهرها وزد من سرعتها، عدّل على مظهر المشروع، وطوّر لعبتك كما يحلو لك.

يمكنك إضافة الرموز التعبيرية على مشروعك، بالنقر على أداة النص في نافذة المظاهر ثم الاستعانة بالاختصارات التالية وفقًا لنظام التشغيل المستخدم في جهازك:

• نظام ويندوز: انقر من لوحة المفاتيح على مفتاح الويندوز ومفتاح رمز النقطة "."
• نظام ماك أو إس MacOS: انقر على مفتاح المسافة ومفتاحي cmd و ctrl.
• نظام لينكس: انقر على مفتاحي ctrl والنقطة ".".

ثانيًا، انقر على الرمز التعبيري للذبابة لإضافته إلى الرسام. ثم استخدم أداة التحديد لتغيير موضع وحجم رمز الذبابة.

قد تختلف الرموز التعبيرية من جهازٍ لآخر، وخاصةً بين الحواسيب المكتبية واللوحية، وقد لا تتوفر بعض الرموز على الحواسيب القديمة على عكس الحواسيب الحديثة.

احرص على تسمية الكائنات والمظاهر بأسماء معبِّرة ليسهل عليك التعامل مع المشروع وفهم عمله لاحقًا.

اضغط بزر الفأرة الأيمن على نافذة المقاطع البرمجية، ثم انقر على خيار ترتيب الكتل للحصول على نافذة عمل مرتبة.

يمكنك الاطلاع على المشروع كاملًا في نسخة المتصفح ومشاهدة الكتل المستخدمة.

خاتمة

بهذا تكون قد أتممت مشروع إنشاء لعبة اليعسوب أكل الحشرات باستخدام سكراتش.

ننصحك بتنفيذ مشروع إنشاء لعبة الطبول الموسيقية باستخدام سكراتش في خطوتك التالية. وإذا واجهت مشاكلًا مع برنامج سكراتش، فيمكنك الحصول على الدعم والمساعدة عبر إضافة سؤالك في قسم الأسئلة والأجوبة في أكاديمية حسوب، ولا تنسى مشاركتنا مشروعك على مجتمع سكراتش في منصة حسوب IO.

ترجمة -وبتصرف- للمقال Find the Bug من الموقع الرسمي لراسبيري باي.

اقرأ أيضًا

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

من الجيد الاطلاع على التخطيطات layouts الأكثر استخدامًا لصفحات الويب قبل البدء بتصميمها، وهناك سبب يدفعنا في الواقع للخوض في تصميم الصفحات، إذ ستبدأ العمل عادةً انطلاقًا من صفحة فارغة، ومن ثم يأخذك العمل إلى نواحٍ عدة، فإذا لم تمتلك بعض الخبرة، فستشعر بالقلق عندما تبدأ من نقطة الصفر، ولهذا السبب سنرشدك في هذا المقال إلى قواعد عامة وجوهرية تساعدك في تصميم موقعك بناءً على خبرة طويلة تمتد 25 عامًا.

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

• الترويسة Header: وهي الجزء الذي يظهر أعلى الصفحة ويحتوي على معلومات مكررة في كل الصفحات مثل اسم الموقع وشعاره بالإضافة إلى منظومة سهلة الاستخدام لأغراض التنقل بين الصفحات.
• المحتوى الرئيسي Main Content: وهي المنطقة الأوسع من الصفحة، وتحتوي على المعلومات الخاصة التي ينبغي عرضها في هذه الصفحة تحديدًا.
• إضافات ولوحات على الجوانب Stuff on the side: وتضم أيّ شيء لا يجب أن يتواجد في القسم الرئيسي، أي ما يلي:

1. معلومات مشتركة بين مجموعة فرعية من الصفحات.
2. معلومات مكملة لما ورد في المحتوى الرئيسي.
3. منظومة تنقل بديلة.

• التذييل Footer: يُشاهَد في أسفل الصفحة ويتضمن كما الترويسة معلومات عامة تتعلق بالموقع لكنها أقل أهمية.

تشترك الكثير من الصفحات بهذه الأقسام، لكن قد تختلف بطريقة توضعها، وإليك بعض الأمثلة، إذ يمثل 1 الترويسة، ويمثل 2 التذييل، في حين يمثل A المحتوى الرئيسي؛ أما B1 و B2 فهما بعض الأقسام على جانبي الصفحة:

1. تخطيط أحادي العمود: وهو تخطيط مفيد جدًا لمتصفحات الهواتف الجوّالة لتجنب الفوضى في الشاشات الصغيرة.

2. تخطيط ثنائي الأعمدة: ويستهدف عادةً الأجهزة اللوحية لأن شاشاتها أكثر عرضًا من الهواتف الجوالة.

3. تخطيط ثلاثي الأعمدة: ويناسب متصفحات الحواسب المكتبية التي تتميز بشاشات كبيرة على الرغم من أنّ عرض المحتوى ضمن شاشات أصغر هو ما يفضله العديد من مستخدمي الحواسب المكتبية.

لكن المتعة الحقيقية ستبدأ عندما تمزج بين التخطيطات الثلاث السابقة في الصفحة نفسها، ويبقى ما عرضناه مجرد أمثلة قد تأخذ بها أو لا.

قد تلاحظ كيف يمكن أن يتغير موقع المحتوى الرئيسي في الصفحة إلا أنّ الترويسة (1) تبقى في الأعلى، كما يبقى التذييل (2) في الأسفل، وطالما أنّ المحتوى الرئيسي (A) هو الأكثر أهميةً، فامنحه المساحة الأكبر من الصفحة.

إذًا سنعرف في مقالنا على أقسام صفحة الويب والمكان الأفضل لوضعها، وننصحك قبل إكمال قراءة المقال أن تعرف تمامًا ما تريد إنجازه عندما تفكر في تصميم موقع ويب، وسنناقش في مقالات أخرى التصميم المتجاوب للمواقع أي المواقع التي تتغير تخطيطات صفحاتها بناءً على حجم الشاشة.

تخطيط أحادي العمود

يقدم التخطيط وحيد العمود جميع محتويات الصفحة تقديمًا متتابعًا ومباشرًا، وتذكَّر أنّ الكثير من متابعيك يستعرضون موقعك من خلال الحواسب المكتبية، فاحرص أن يكون المحتوى مقروءًا وسهل الاستعمال على تلك الأجهزة أيضًا.

تخطيط ثنائي الأعمدة

تُصمَّم المدونات عادةً وفق تخطيط العمودين، إذ يُستخدَم العمود العريض لنشر المحتوى الرئيسي والآخر الضيق لعرض بقية الأشياء مثل بعض المكوّنات الخاصة وأدوات التنقل الإضافية والروابط الإعلانية.

انظر إلى الصورة (B1) في الشكل السابق تحت الترويسة مباشرةً، إذ تتعلق هذه الصورة بالمحتوى الرئيسي، لكن المحتوى يبدو معقولًا أكثر دونها، لذلك بالإمكان أن تعدها جزءًا من المحتوى الرئيسي أو من المحتوى الجانبي، وليس الأمر بهذه الأهمية، لأن ما يهم فعلًا هو وضع المحتوى الرئيسي فقط أو ما يتعلق به مباشرةً تحت الترويسة.

حالة قد تخدعك

إليك هذه الصفحة من موقع MICA التي تبدو وكأنها تستخدِم ثلاثة أعمدة لكنها ليست كذلك:

تعوم Float اللوحتين B1 و B2 حول المحتوى الرئيسي، وتذكر المصطلح "يعوم" عندما تبدأ بتعلم التنسيقات المورثة CSS.

لِمَ قد نظن أنّ الصفحة منسقة في ثلاثة أعمدة؟ لأن الصورة في أعلى يمين الصفحة لها شكل الحرف "L" ولأن القسم B1 يبدو وكأنه عمود يدعم المحتوى الرئيسي المنزاح، ولأن حرفي "M" و"I" للشعار "MICA" يُشكِّلان خطان عموديان يعطيان انطباعًا قويًا بوجود ثلاث أعمدة، وهذا مثال جيد عن تخطيط كلاسيكي لصفحة ويب مع لمسة إبداعية، فالتخطيط البسيط أسهل تنفيذًا، لكن امنح نفسك مع ذلك فرصةً للاستكشاف والتعبير عن إبداعاتك في هذا المجال.

حالة أخرى ستخدعك أكثر

تعتمد هذه الصفحة من موقع The Opera de Paris على تخطيط العمودين، لكنك ستلاحظ العديد من الحيل هنا وهناك قد تشوش نظرتك إلى تخطيطها، فالترويسة تحديدًا تتداخل مع صورة المحتوى الرئيسي، وطريقة انحناء قائمة الترويسة التي تتماشى مع الانحناء أسفل الصورة تجعلنا نتوقع أنهما شيء واحد علمًا أنهما تقنيًا مختلفان تمامًا، كما تبدو الصورة السابقة المأخوذة لموقع "Opera" أكثر تعقيدًا من الصورة التي تسبقها من موقع "MICA"، لكنها أسهل تنفيذًا مع الانتباه إلى نسبية الكلمة "سهل".

وهكذا نرى إمكانية إبداع مواقع ويب رائعة بتخطيطات بسيطة، وألق نظرةً إذًا على مواقع الويب التي تفضِّلها ثم اسأل نفسك أين الترويسة؟ أين المحتوى الرئيسي والجانبي والتذييل؟ سيلهمك ذلك إلى تصاميم خاصة بك ويمنحك تلميحات عما يفيدك في عملك وعما لا يفيد.

ترجمة -وبتصرف- للمقال ?What do common web layouts contain.

اقرأ أيضًا

• المقال السابق: البدء بتصميم موقع ويب
• التحكم في تخطيط الصفحة وضبط محاذاة العناصر في CSS

سنتعلم في هذا المقال كيفية إنشاء مشروع نستخدم فيه عصًا سحرية لتحويل الكائنات إلى ضفادع وتكبير حجمها وتقليصه باستخدام سكراتش scratch.

لنحصل على نتيجة مشابهة لما يلي: انقر على العلم الأخضر واستخدم العصا السحرية للضغط على الأزرار وإلقاء التعاويذ السحرية، وشاهد تأثيرها على الكائنات:

سنعمل في هذا المشروع على:

• إنشاء أزرار لبث broadcast رسائل إلى عدة كائنات.
• جعل عدة كائنات تستجيب معًا عندما تصلها نفس الرسالة.
• استخدام كتل الصوت لتشغيل الأصوات وعكسها.

اقتباس

معلومة: تُستخدم طريقة بث الرسائل لعدة أشخاص أيضًا في الموسيقى عندما يغني المغني الرئيسي وتردّد خلفه فرقته مقطع اللازمة.

اختيار العصا السحرية

سنُعد المشهد في هذه الخطوة، ونختار العصا والتعاويذ السحرية التي سننفذها بمساعدة التأثيرات المُولدة من الحاسوب Computer Generated Imagery -أو اختصارًا CGI-، والتي تستخدم لخلق تأثيرات خاصة تُستخدم في أفلام الخيال والرسوم المتحركة.

أولًا، افتح نسخة سطح المكتب من برنامج سكراتش مع الملف Broadcasting spells - starter، أو انقر هنا لعرض النسخة الأولية من المشروع في المتصفح، إذ ستظهر لك جنيةٌ ذات أجنحة، لكن أين عصاها السحرية؟

ثانيًا، سنضيف العصا السحرية وذلك بالنقر على أيقونة إضافة كائن، ثم كتابة "wand" أي عصا سحرية في مربع البحث:

ثالثًا، سنضيف الكتل البرمجية اللازمة لجعل العصا السحرية تتبع حركة مؤشر الفأرة وتبقى أمام الأزرار:

انقر على رمز العلم الأخضر واختبر مشروعك، ولاحظ كيف تتبع العصا حركة مؤشر الفأرة.

سنعدل الآن حجم وشكل العصا لتبدو حقيقيةً.

رابعًا، عدِّل حجم العصا من نافذة الكائنات بتغيير قيمة خاصية الحجم Size إلى 200 لتكبير العصا:

ثم انقر على نافذة المظاهر Costumes لتعديل شكل العصا في محرر الرسام، وانقر على أداة التحديد ذات شكل السهم، وحدِّد العصا برسم مستطيل حولها باستخدام الأداة.

انقر بعدها على أداة التجميع لدمج أجزاء العصا.

استخدم بعدها أداة التدوير الموجودة أسفل المستطيل المحيط بالعصا لإمالتها قليلًا، وإذا لم تجد أداة التدوير صغّر الشاشة باستخدام أداة التصغير ذات شكل المكبرة.

خامسًا، حّرك العصا بحيث يلامس طرفها المؤشر الرمادي الموجود في منتصف شاشة محرر الرسام، وذلك كي لا تعيق العصا حركة مؤشر الفأرة عند النقر على الأزرار فيما بعد.

انقر على العلم الأخضر واختبر هل تتبع العصا حركة مؤشر الفأرة بسلاسة.

احفظ المشروع

سمِّ المشروع باسمٍ مناسب في مربع الاسم أعلى الزاوية اليمينية:

انقر على نافذة ملف ثم انقر على خيار الحفظ إلى حاسوبك:

وإذا كنت متصلًا بالإنترنت وتملك حسابًا على موقع سكراتش، سيظهر لك خيار الحفظ الآن كما يمكنك الضغط على زر الدمج الأخضر Remix لحفظ المشروع في حسابك: 

تعويذة التقليص

سنعمل في هذه الخطوة على جعل الجنية تتقلص عند الضغط على زر التقليص.

أولًا، انقر على أيقونة اختيار كائن واكتب "Button" في مربع البحث، ستحصل على ثلاثة أشكال من الأزرار، اختر منها الشكل الذي تفضِّله.

ثانيًا، انقر على نافذة المظاهر لتعديل مظهر الزر وإضافة اسم التعويذة المستخدمة فيه باستخدام أداة النص:

ثالثا، انقر على زر التقليص وأضِف كتلتي "عند النقر على هذا الكائن" و"بث" من كتل الأحداث لإرسال رسالة بث لتفعيل تعويذة التقليص عندما تستلمها الجنية:

انقر على النافذة المنزلقة لكتلة البث ثم على خيار رسالة جديدة، سمّ الرسالة باسمٍ مناسبٍ للتعويذة:

ستبدو الكتل كما يلي:

لاحظ أنه عند الضغط على زر التقليص لا يحدث شيء على الرغم من أن البرنامج قد أرسل رسالة التقليص.

رابعًا، أضف الكتل التالية إلى كائن الجنية كي تستجيب عندما تصلها رسالة التقليص:

انقر على العلم الأخضر واختبر المشروع بالنقر على زر التقليص، لاحظ أنه بإمكانك تصغير الحجم كما يحلو لك.

هل يزداد حجم الجنية بدل أن ينقص؟ لا تقلق، تأكد من أنك أضفت إشارة السالب - قبل الرقم 10 لإنقاص الحجم.

خامسًا، أضف الكتل التالية إلى كائن الجنية لإعادتها إلى الحجم الطبيعي عند بدء المشروع:

سادسًا، سنضيف صوتًا إلى العصا السحرية لتشغيله عند تفعيل تعويذة التقليص، لذلك انقر على نافذة الأصوات ثم اكتب "Slide Whistle" في مربع البحث، أو اختر الصوت الذي تفضله، ثم أضف الكتل التالية:

انقر على النافذة المنزلقة لكتلة شغّل الصوت واختر منها الصوت الذي أضفته.

أخيرًا، اختبر المشروع وتحقق من تشغيل الصوت عند نقر زر التقليص للتأكد من نجاح التعويذة.

تعويذة التكبير

نحتاج في مشروعنا إلى تعويذة لإعادة الجنية إلى حجمها الطبيعي أو تكبيرها.

أولًا، أنشئ زرًا لتعويذة التكبير وعدِّل مظهره كما تعلمنا في الخطوة السابقة:

ثم أضف الكتل التالية:

لاحظ أنه عليك إنشاء رسالة بث جديدة كما تعلمنا سابقًا.

ثانيًا، أضف الكتل التالية إلى الجنية لزيادة حجمها عندما تتلقى رسالة التكبير:

لاحظ أننا استخدمنا أرقامًا موجبةً لزيادة الحجم.

ثالثًا، انقر على العصا السحرية ثم على نافذة الأصوات، ثم انقر بالزر الأيمن للفأرة على الصوت واختر مضاعفة، أعد تسمية الصوت الجديد باسمٍ مناسب.

ثم انقر على خيار العكس، لتشغيل الصوت عكسيًا إلى الخلف. شغّل الصوت، هل تلاحظ الفرق بين الصوتين؟

رابعًا، أضف الكتل التالية على العصا السحرية لتشغيل الصوت عند تفعيل تعويذة التكبير:

انقر على العلم الأخضر واختبر عمل تعويذتي التكبير والتقليص.

اقتباس

معلومة: تتضمن بعض مسابقات الترفيه اختبار الأغاني المعكوسة، إذ يستمع المتنافسون للأغنية معكوسةً ويتوجب عليهم تخمين الأغنية الأصلية، قد يبدو الأمر سهلًا، لكنه ليس كذلك.

تعويذة التحويل

سنستخدم تعويذةً مختلفةً في هذه الخطوة لتحويل الجنية إلى ضفدع.

لا تنسى أنه بإمكانك تحويل الجنية إلى كائن آخر من اختيارك، بإتباع الخطوات التالية.

أولًا، أنشئ زرًا لتعويذة التحويل وعدّل مظهره كما تعلمنا في الخطوة السابقة:

ثانيًا، أنشئ رسالة بث جديدة لتعويذة التحويل، ثم أضف الكتل التالية لبث الرسالة:

إذا كنت تستخدم النسخة الأولية من المشروع، فستلاحظ أن للجنية ثلاثة مظاهر، سنستخدم تعويذتنا للتحويل إلى مظهر الضفدع ذي الأجنحة. تذكر أنه بإمكانك إضافة المظهر التي تريده.

ثالثًا، انقر على كائن الجنية وأضف الكتلة التالية لتظهر الجنية بمظهرها الأصلي عند بداية المشروع:

رابعًا، أضف الكتلة التالية لتحويل الجنية إلى ضفدع:

خامسًا، أضف الصوت "Croak" من مكتبة الأصوات إلى العصا السحرية.

سادسًا، أضف الكتل التالية على العصا السحرية لتشغيل الصوت عند تفعيل تعويذة التحويل:

أخيرًا، اختبر المشروع وتحقق من تشغيل الصوت عند نقر زر التحويل لتتأكد من نجاح التعويذة، انقر بعدها على العلم الأخضر للتأكد من عودة الجنية إلى شكلها الأصلي.

تعويذة العودة إلى الشكل الطبيعي

نحتاج الآن إلى تعويذة لإرجاع الجنية إلى شكلها الأصلي.

أولًا، أنشئ زرًا جديدًا، أو عدّل على الزر الموجود وسمّه باسمٍ مناسب لاستخدامه لتعويذة الإرجاع أو عكس التحويل.

ثانيًا، أضف الكتل التالية إلى الزر الجديد لبث رسالة عكس التحويل:

ثالثًا، أضف الكتل التالية إلى الجنية لإرجاعها إلى شكلها الطبيعي:

رابعًا، انقر على العصا السحرية ثم على نافذة الأصوات، ثم انقر بالزر الأيمن للفأرة على الصوت "Croak" واختر مضاعفة، أعد تسمية الصوت الجديد باسمٍ مناسب وليكن "untoad". ثم انقر على خيار عكس الصوت.

خامسًا، أضف الكتل التالية على العصا السحرية لتشغيل الصوت:

أخيرًا، جرّب التعاويذ الأربع لاختبار مشروعك.

إضافة شخصية ثانية

سنضيف في هذه الخطوة شخصيةً إضافيةً، ونعمل على تعديل مظهرها وتهيئتها للاستجابة للتعاويذ بإضافة الكتل اللازمة، بحيث يتغير المظهر عند بث التعويذة.

أولًا، ضاعف كائن الجنية، وأبقِ على مظهر الضفدع العادي، ثم أضف مظهرًا من اختيارك.

اخترنا مظهر الضفدع الساحر "Wizard-toad-a" من مكتبة الكائنات.

لا تنسى أنه بإمكانك اختيار الكائن والمظهر الذي تريده.

قد تحتاج لتغيير اتجاه الكائن أو نمط الدوران في نافذة خصائص الكائن للحصول على الاتجاه المطلوب.

ثانيًا، استخدم أداة التحديد لتحديد المظهر كاملًا، ثم انقر على أداة التجميع وحرّك الكائن ليصبح فوق المؤشر الرمادي لتثبيت الكائن في مكانه عند تكبير حجمه وتصغيره:

ثالثًا، يمكنك التعديل على المظهر الذي اخترته بإضافة تفاصيل أو أزياء من مظاهر أخرى في الرسام، انقر على الشكل الذي ترغب به، مثل قبعة أو نظارات شمسية، ثم انقر على أداة النسخ ثم على أداة اللصق لإضافته إلى المظهر:

نصيحة: يمكنك تجميع كل الكائنات في مظهرٍ ما، عن طريق تحديدها (باستخدام أداة التحديد أو "Ctrl-a") ثم النقر فوق "تجميع".

أضفنا في مثالنا الأجنحة على مظهر الضفدع الساحر، وتُدعى هذه العملية بالدمج Mash-up.

رابعًا، عدِّل جميع كتل تغيير المظهر للكائن الجديد إلى المظهر الجديد لتفادي الأخطاء، كما يمكنك تعديل القيمة في كتلة تغيير الحجم.

أخيرًا، انقر على العلم الأخضر واختبر مشروعك، هل تعمل جميع التعاويذ بدقة؟

ترقية المشروع

إليك بعض الاقتراحات لتطوير عالمك السحري:

• إضافة مزيدٍ من الشخصيات.
• إضافة أصوات وتأثيرات رسومية للعصا السحرية.
• إضافة مزيدٍ من التعاويذ، مثل تعويذة الإختفاء والظهور، أو تعويذةً لقلب الشخصيات رأسًا على عقب، أو تطبيق مؤثر بصري ما عليها.

شارك مشروعك مع الأصدقاء واستلهم من أفكارهم وأبهرهم بإبداعاتك، إذ يمكنك تنزيل الكائنات وحفظها في حاسوبك بالنقر بالزر الايمن للفأرة على الكائن، ثم النقر على خيار تصدير:

كما يمكنك تحميل كائن من جهازك إلى مشروعك بالنقر على أيقونة اختيار كائن ثم على خيار تحميل كائن:

كما يمكنك الإطلاع على المشروع كاملًا في نسخة المتصفح.

خاتمة

بهذا تكون قد أتممت مشروع التعاويذ السحرية باستخدام سكراتش.

ننصحك بتنفيذ مشروع إنشاء لعبة اليعسوب أكل الحشرات باستخدام برنامج سكراتش في خطوتك التالية. وإذا واجهت مشاكلًا مع برنامج سكراتش، يمكنك الحصول على الدعم والمساعدة عبر إضافة سؤالك في قسم الأسئلة والأجوبة في أكاديمية حسوب.

ولا تنسى مشاركتنا مشروعك على مجتمع سكراتش في منصة حسوب IO.

ترجمة -وبتصرف- للمقال Broadcasting spells من الموقع الرسمي لراسبيري باي.

اقرأ أيضًا

• مشروع تحدي إنقاذ السفينة الفضائية من الخطر باستخدام سكراتش
• إنشاء كتاب إلكتروني تفاعلي باستخدام سكراتش
• إنشاء شخصية لها عيون ذات تأثير كرتوني باستخدام سكراتش
• إنشاء لعبة البحث عن الحشرات باستخدام برنامج سكراتش
• تنفيذ مشروع حافلة مدرسة متحركة باستخدام برنامج سكراتش