تعلم كيفية التعامل مع DOM من خلال بناء لعبة جافا سكريبت ملونة بسيطة

ما هو DOM؟

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

تمثيل DOM لملف .html بسيط

رسم تخطيطي لطيف ونظيف لملفك القبيح .html - ليس رائعًا! لكن الآن أنت تفكر ، كيف يساعدني هذا؟ ما هي حالة الاستخدام؟ لماذا أحتاج لمعرفة هذا؟

ببساطة ، يمكّنك DOM من جلب ديناميكيات إلى موقع الويب الثابت الخاص بك. مع استخدام DOM ، يمكنك القيام بمجموعة من الأشياء المفيدة على صفحة الويب مثل:

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

وهذا هو بالضبط ما ستتعلمه خلال هذه المقالة.

لإعطائك فكرة عما سنحققه بنهاية هذه المقالة ، راجع هذا الرابط.

ابدء

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

فيما يلي مخطط تقريبي لما سنقوم ببنائه:

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

نموذج بالحجم الطبيعي

الجزء 1

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

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

  • index.html و

<رئيس>
<عنوان> لعبة ملونة 

The Great
RGB
لعبة اللون


 


هذا بسيط كما يحصل. يمكننا ببساطة فصل صفحة الويب بالكامل في ثلاث كتل أساسية.

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

التالي هو لوحة التحكم ، التي تحتوي على أزرار لإعادة ضبط اللعبة والتبديل بين أوضاع اللعبة.

الثالث - والأكثر إثارة للاهتمام - هو مجال اللعبة الرئيسي ، الذي يضم ستة فرق. تعمل divs كخيارات لكل رمز ألوان RGB عشوائي يمكن اختياره من خلال بعض المنطق الهائل (الذي سنراه في فترة من الوقت).

  • app.css
الجسم {
لون الخلفية: # 232323 ؛
الهامش: 0
عائلة الخط: "مونتسيرات" ، "أفينير" ؛
}
h1 {
محاذاة النص: المركز ؛
ارتفاع الخط: 1.1 ؛
وزن الخط: عادي ؛
اللون الابيض؛
الخلفية: steelblue.
الهامش: 0
تحويل النص: أحرف كبيرة ؛
الحشو: 20px 0 ؛
}
#حاوية {
الهامش: 20px auto ؛
أقصى عرض: 600 بكسل ؛
}
.ميدان {
العرض: 30 ٪ ؛
الخلفية: الأرجواني.
الحشو أسفل: 30 ٪.
تعويم: اليسار؛
الهامش: 1.66 ٪ ؛
نصف قطرها الحدود: 15 ٪ ؛
الانتقال: الخلفية 0.6 ثانية ؛
-webkit-الانتقالية: الخلفية 0.6s.
الانتقال -moz: الخلفية 0.6s؛
}

تمت إضافة بعض الأنماط الأساسية للجسم والنص والمربعات التي تعمل كخيارات لعبة.

  • app.js
var numSquares = 6؛
فار الألوان = [] ؛
var pickedColor.
var squares = document.querySelectorAll (". square")؛
var resetButton = document.querySelector ("# reset")؛
var modeButtons = document.querySelectorAll (". mode")؛

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

في الحقيقة ، دعنا نقسم كل من هذه المتغيرات ونرى ما هي أهميتها:

  • يقوم متغير numSquares بتخزين عدد المربعات التي ستكون متاحة في اللعبة حسب الوضع. من أجل البساطة ، قمت بترميز القيمة دائمًا لستة دائمًا - يمكننا العودة إلى ذلك وإضافة بعض المنطق للحفاظ على التغيير.
  • تعد الألوان صفيفًا فارغًا يحتوي على ستة ألوان أو ثلاثة رموز RGB عشوائية يتم إنشاؤها في كل مرة يتم فيها إعادة تعيين اللعبة أو تغيير الوضع.
  • pickedColor هو كتلة اللون / الخيار المحددة من قبل المستخدم عند كل نقرة.
  • المربعات هي مجموعة من جميع المربعات في الصفحة المتاحة كخيارات. قد تحتوي هذه المجموعة على ثلاثة أو ستة عناصر حسب وضع اللعبة.
  • متغير إعادة الضبط هو زر "لعبة جديدة" في لوحة التحكم.
  • modeButtons هو مرة أخرى صفيف يحتوي على أزرار وضع سهل وصعب فيه.

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

الجزء 2

في هذا القسم ، سنعمل في الغالب مع ملف JavaScript ومرات قليلة مع ملف CSS.

توليد ألوان عشوائية

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

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

فار الألوان = [
    "rgb (255، 0، 0)"،
    "rgb (255 ، 0 ، 255)" ،
    "rgb (255 ، 225 ، 0)" ،
    "rgb (255 ، 0 ، 255)" ،
    "rgb (0 ، 255 ، 255)" ،
    "rgb (0 ، 255 ، 0)"
].
var squares = document.querySelectorAll (.squares)؛
لـ (i = 0 ؛ أنا 
  • أضفت ستة رموز ألوان RGB ثابتة إلى مجموعة الألوان
  • لقد استخدمت مجموعة المربعات التي تم إنشاؤها بالفعل لتشغيل حلقة عبر جميع المربعات الموجودة في المصفوفة.
  • لقد قمت بمطابقة لون الخلفية لكل مربع مع فهرسه المقابل في صفيف الألوان.

إذا أضفت هذا إلى ملف app.js وقمت بتحديث المتصفح ، فسترى أن كل مربع أصبح الآن لونًا فريدًا.

* لقطة شاشة من المتصفح

قد تلاحظ أن الأزرار لم يتم تصميمها بعد ، لكن اتركها الآن. سوف نأتي إلى هذا الجزء في وقت لاحق.

تمكين وظيفة النقر

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

لـ (i = 0 ؛ i <= squares.length؛ i ++) {
  المربعات [i] .addeventListeners ('click'، function () {
    alert ("تم النقر على الخيار") ؛
  })؛
}

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

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

التحقق من صحة اللون أم لا

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

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

لـ (i = 0 ؛ i <= squares.length؛ i ++) {
  المربعات [i] .addeventListeners ('click'، function () {
    / / إذا تم النقر على الكتلة الصحيحة ، قم بعمل شيء ....
    // إذا تم النقر على كتلة خاطئة فعل شيء ....
  })؛
}

كما تعلم بالفعل ، سنستخدم كتلة بسيطة إن لم تكن كذلك.

اختار اللون = الألوان [3] ؛

لـ (i = 0 ؛ i <= squares.length؛ i ++) {
 / / تطبيق لون الخلفية على جميع المربعات ...
 المربعات [i] .style.backgroundColor = الألوان [i]
   / / انقر فوق تمكين الحدث في كل مربع .....
     المربعات [i] .addEventListener ('click'، function () {
       // إذا اختار المستخدم اللون المناسب ....
         var clickedColor = this.style.backgroundColor؛
        // تحقق مما إذا كان اللون المحدد يطابق اللون الافتراضي ...
         إذا (pickedColor === clickedColor) {
             changeColors (pickedColor)؛
           }
         // إذا قام المستخدم بتحديد لون خاطئ ....
         آخر
           this.style.backgroundColor = "# 232323"؛
           messageDisplay.text = "اختيار خاطئ!"؛
         }
    })
}؛

أنا أعلم - إنه رمز كثير. ولكن دعونا نرى ما يعنيه حقا:

  • نبدأ بتحديد اللون الافتراضي الذي سيتم اختياره من قبل اللعبة ، مع متغير اللون المختار.
  • ثم نقوم بتشغيل حلقة for for والتي تتيح لنا الانتقال إلى مجموعة كتل / خيارات الألوان.
  • ثم نقوم بتمكين أحداث النقر على كل خيار / خيار لون. نحن نفعل هذا باستخدام وظيفة رد الاتصال. لا تعمل هذه الوظيفة سوى تحديد لون خلفية كتلة / خيار اللون المحدد ببساطة عن طريق تعيينه للمتغير المسمى clickedColour.
  • الآن لدينا كلا اللونين: واحد تم اختياره بواسطة اللعبة والآخر بواسطة المستخدم. كل ما تبقى هو مطابقة ومعرفة ما إذا كان الخيار صحيحًا أم لا.
  • يمكننا القيام بذلك بسهولة باستخدام كتلة if. إذا كان الخيار صحيحًا ، فقم بذلك ، أو قم بفعل شيء آخر
  • إذا تم تحديد اللون الصحيح ، فإننا نضيف بعض النص على الصفحة لتأكيد الاختيار الصحيح وإضافة بعض التأثير البصري للتأكيد. عدا ذلك ، نقوم بمطابقة لون خيار / كتلة لون معين لمطابقة لون خلفية الصفحة. ينتج عن ذلك تأثير كما لو أن كتلة / خيار اللون قد اختفى للتو.
  • لقد رأيت الآن أنه إذا تم تحديد اللون نفسه ، فسيتم تنفيذ الوظيفة. دعنا نرى ماذا تتكون هذه الوظيفة من:
وظيفة تغيير الألوان (اللون) {
 لـ (i = 0 ؛ i <= squares.length؛ i ++) {
  المربعات [i] .style.backgroundColor = color؛
  messageDisplay.text = "أنت جيد في التخمين!"؛
 }
}

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

في حالة عدم اختلاف الألوان ، فنحن ببساطة نضبط لون خلفية التحديد الحالي على أنه لون صفحة الويب.

آخر
  this.style.backgroundColor = "# 232323"؛
  messageDisplay.text = "اختيار خاطئ!"؛
}

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

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

index.html و

app.css

app.js

الخطوه 3

كل شيء على ما يرام. ولكننا نحتاج الآن إلى إنشاء رموز ألوان RGB جديدة تم إنشاؤها عشوائيًا في لعبتنا لا تمثل نفس مجموعة الألوان التي سيتم تعيينها في كتل / خيارات الألوان.

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

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

تساعدنا الطريقة المدمجة في JavaScript على إنشاء رقم عشوائي بين 0 و 1. ثم نقوم بإجراء بعض المعالجات للتأكد من أن نطاق هذا الرقم العشوائي يبقى بين الأرقام 0 و 255.

  • أولاً نطبق Math.random ، ونختار أي رقم عشوائي بين 0 و 1 ، ثم نضرب الرقم في 256 لأننا لا نريد أن يكون الرقم أكبر من 255. وبمجرد أن يكون لدينا رقم عشوائي ، نستخدم Math.floor و تأكد من أن لدينا فقط الرقم قبل القيم العشرية (عدد صحيح).
  • نقوم بتعيين هذه الأرقام العشوائية التي تم إنشاؤها لمتغيرات تسمى r و g و b. كل يشير إلى رقم RGB الخاص به لرمز اللون.
  • أخيرًا ، نقوم بإضافة كل هذه الأرقام أو المتغيرات لتشكيل سلسلة. نرجع السلسلة بحيث تبدو كالتالي: rgb (23 ، 45 ، 112).
  • كل ما تبقى هو تشغيل هذه الوظيفة وفقًا لوضع اللعبة ، وإنشاء ثلاثة أو ستة أكواد ألوان عشوائية RGB وتعيينها في صفيف الألوان.

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

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

اختر لونًا عشوائيًا من الصفيف

للقيام بذلك ، سنقوم بإنشاء وظيفة جديدة تسمى pickColor (). دعونا نرى كيف ستبدو الوظيفة ، وبعد ذلك سنقوم بتقسيمها.

وظيفة اختياراللون () {
  var random = Math.floor (Math.random () * colours.length)؛
  عودة الألوان [عشوائي] ؛
}

بهذه البساطة ، لنرى ما يفعله هذان الخطان القويان بالنسبة لنا.

  • كما رأينا بالفعل بسحر Math.random و Math.floor ، نستخدم نفس الوظيفة للحصول على رقم عشوائي يتم إنشاؤه بين 0 وطول الصفيف.
  • بعد ذلك ، نحصل على رمز RGB المقابل في صفيف الألوان باستخدام الرقم العشوائي في الفهرس

أضف ستة (أو ثلاثة) رموز RGB عشوائية في مجموعة الألوان

للقيام بذلك ، نستخدم الدالتين المذكورتين أعلاه ، وهما randomColors () و pickColors (). ما تقوم به وظيفة randomColors () على وجه الخصوص هو أنها تدير وظيفة randomColors () ست أو ثلاث مرات (اعتمادًا على وضع اللعبة) وتضيف العدد المقابل لرموز ألوان RGB إلى صفيف الألوان. سنقوم بتسمية هذه الدالة createRandomColor (num *). دعونا نرى كيف تبدو الشفرة وتقسيمها سطرا تلو الآخر.

* سيتم تحديد الأسطوانات على أساس وضع اللعبة.

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

الآن بعد كل هذه الوظائف الجديدة وكل معالجة الشفرة هذه ، تغيرت قاعدة الشفرة الخاصة بنا لـ app.js قليلاً. دعونا نرى ما يبدو الآن:

أعد اعداد اللعبة

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

كل ما نريد مع زر إعادة الضبط هو

  • توليد مجموعة من ستة ألوان عشوائية
  • اختيار لون عشوائي من مجموعة الألوان الجديدة التي تم إنشاؤها.

دعونا نرى كيف سيبدو الكود الزائف:

إعادة ضبط الوظيفة () {
  / / قم بإنشاء مجموعة جديدة من 6 ألوان عشوائية
  / / اختيار لون عشوائي جديد
  / / املأ المربعات بمجموعة جديدة من الألوان التي تم إنشاؤها
}

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

حسنًا ، نعود إلى زر إعادة الضبط: لنرى كيف ستبدو الوظيفة الفعلية:

دعنا نقسمها سطراً سطراً:

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

هذا هو ما يبدو عليه التطبيق المحدث بعد كل التعديلات التي أجريناها:

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

إليك الرابط الخاص بمستودع جيثب حيث يمكن العثور على الكود النهائي المحسن.

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