كيف تعمل لعبة ويب مثل Wordle؟ ما الذي تحتاج إلى معرفته لإنشاء لعبتك الخاصة؟
لا تتطلب كل لعبة فريقًا كبيرًا من المطورين وسنوات من التطوير لتحقيق نجاح كبير. اللعبةكلمةعلى سبيل المثال، تم إنشاؤه بواسطة جوش واردل لشريكه بالاك شاه في فترة زمنية قصيرة، وعلى الرغم من بساطته وعدد ميزاته المحدود للغاية، إلا أن شعبيته المذهلة أدت إلى شرائه من قبل صحيفة نيويورك تايمز.
إذا كانت لديك فكرة عن لعبة بسيطة ولكنها مسببة للإدمان يمكنها جذب انتباه العالم وجني أموال كبيرة، فاعلم أن برمجة تطبيق ويب مثل Wordle بنفسك أمر ممكن تمامًا.
إطار عمل موقع Wordle، مثل أي موقع ويب، هو لغة HTML ولغة ترميز النص التشعبي. هذا هو الكود الذي تعتمد عليه جميع المواقعإنترنت، أخبركbrowserمكان وضع العناصر عند تحميل الصفحة. الموقع الذي تقرأه الآن مشفر بتنسيق HTML، ولا يخدم المحتوى الفعلي فحسب، بل يقدم أيضًا الإرشادات الخاصة بعرض هذا المحتوى، بدءًا من مواضع القائمة وحتى أحجام الخطوط.
بالإضافة إلى HTML نجد CSS، Cascading Style Sheets: وهي إضافة إلى HTML لتسهيل تخطيط العناصر، سواء كانت خصائص صورة أو كتلة نصية. باستخدام CSS، إذا كان لديك صفحات متعددة على موقعك، فيمكنك تعيين خصائصها المرئية مرة واحدة، بدلاً من القيام بذلك لكل صفحة.
إذا كنت تريد أن تكون قادرًا على تصميم صفحات الويب، فأنت بحاجة إلى تعلم HTML وCSS، على الرغم من أن العديد من الخدمات تتيح لك القيام بذلك دون الحاجة إلى كتابة سطر واحد من التعليمات البرمجية. توفر هذه الخدمات القدرة على سحب وإسقاط العناصر الخاصة بك في واجهة متقدمة للغاية والعناية بإدارة كل HTML وCSS.
لكي يكون الموقع تفاعليًا بالكامل مثل Wordle، تحتاج أيضًا إلى JavaScript، الذي يحول صفحات HTML وCSS الثابتة إلى صفحات أكثر ديناميكية، سواء كان ذلك مربع بحث أو شريط أدوات. يمكن لـ JavaScript إدارة مقاطع الفيديو، ثنائية أو ثلاثية الأبعاد، وحفظ المعلومات التي أدخلها المستخدم، وتحميل البيانات من قاعدة البيانات، وإجراء العمليات الحسابية، وتنفيذ تعليمات برمجية محددة مسبقًا وفقًا لإجراء المستخدم هذا أو ذاك، وما إلى ذلك.
كما أوضح جوش واردل لـ TechCrunch، تمت كتابة Wordle بلغة JavaScript، وهو رمز يتم تنزيله عند تحميل الصفحة، مما يسمح بلعب اللعبة في وضع عدم الاتصال بمجرد تحميل الصفحة.تحميلتم الانتهاء الأولي. يمكن للمتصفحات الحديثة فهم جافا سكريبت وتنفيذها، والتي في حالتنا ستقوم بتحميل كلمة من قاعدة البيانات، وتحديد مدخلات المستخدم وتوفير المعلومات لكل حرف.
يعترف جوش واردل نفسه بأن كود اللعبة ليس معقدًا بشكل خاص، وهو ما يفسر سبب إمكانية تنزيل Wordle بالكامل، قبل أن تشتريه صحيفة نيويورك تايمز، بكل الكلمات الموجودة في قاعدة بياناتها. وكان من الممكن أيضًا العثور على الحلول ببساطة عن طريق فحص الكود المصدري للموقع.
ما الذي تحتاج إلى معرفته لإنشاء لعبتك الخاصة؟
ولكن بعد ذلك، كيف يمكنك بناء لعبة مثل Wordle بنفسك؟ عليك أن تتعلم البرمجة، لكنك لا تحتاج إلى معرفة كل شيء عن HTML وCSS وJavaScript لتصميم شيء على مستوى Wordle. كما هو موضح في Codecademy، إحدى تقنيات البرمجة المستخدمة هي حلقة for، للتحقق من كل حرف يتم إدخاله وعرضه باللون المقابل.
كودأكاديميهو أحد المواقع التي تتيح لك تعلم HTML وCSS وJavaScript والعديد من لغات تطوير الويب الأخرى مجانًا. تم تصميم التمارين بشكل جيد ويمكنك دائمًا التعلم من خلال الممارسة مباشرة في متصفحك. سترى كيفية القيام بذلك وستكون قادرًا على رؤية العواقب مباشرة. تتطلب بعض الميزات والبرامج التعليمية المتقدمة اشتراكًا مدفوعًا، ولكن هناك بالفعل الكثير مما يمكنك اكتشافه مجانًا.
بيت الشجرةيذهب إلى أبعد من Codecademy، ويتعين عليك دفع 25 دولارًا شهريًا لاستخدامه (تتوفر نسخة تجريبية مجانية). إنه مورد أكثر احترافية وكفاءة لتعلم HTML وCSS وJavaScript والمزيد، ولكنه يتجاوز ما ستحتاج إليه في لعبة مثل Wordle. للنظر في ما إذا كنت تريد الذهاب أبعد من ذلك.
على عكس تريهاوس،اندفاعة. يغطي الموقع فقط أساسيات HTML وCSS وJavaScript، ولكنه مجاني تمامًا، وهو جيد بشكل خاص للمبتدئين. تتم إدارة كل شيء مباشرةً في متصفحك، ومثل Codecademy، تتعلم من خلال القيام بالأشياء، للحصول على النطاق الكامل لما تقدمه هذه اللغات.
هذه القائمة ليست شاملة، بعيدة كل البعد عن ذلك، خاصة وأن هذه الموارد باللغة الإنجليزية فقط، ويمكنك العثور على بعضها باللغة الفرنسية بسهولة تامة، ولكنها قواعد جيدة لبدء تعلم HTML وCSS وJavaScript. الأمر متروك لك للعب... والبرمجة!
هل يعجبك المحتوى الخاص بنا؟
احصل على أحدث منشوراتنا كل يوم مجانًا ومباشرة في صندوق الوارد الخاص بك