DOM-Walker
حوّل أي صفحة ويب إلى لعبة زنزانة بأسلوب البكسل. تقرأ DOM-Walker بنية HTML للصفحة وتحوّل العناوين والقوائم والروابط والفقرات إلى غرف وكنوز وبوابات وأعداء، وكل ذلك يُحلل داخل متصفحك دون رفع أي شيء.
واجهة الأداة نفسها باللغة الإنجليزية حاليًا، وتعمل بالكامل داخل متصفحك.
جارٍ تحميل الأداة…
كيف تصبح صفحة الويب زنزانة
كل مستند HTML شجرة أصلًا. للصفحة جذر، وفروع لأقسامها ومقالاتها، وأوراق لفقراتها وعناصر قوائمها وروابطها. وخريطة الزنزانة شجرة أيضًا: غرف تربطها ممرات، وبعض الغرف أعمق من غيرها. وتستغل DOM-Walker هذا التشابه: تحلل الصفحة بمحلل DOMParser المدمج في المتصفح، وتمشي في النتيجة بـ TreeWalker، وتمنح كل عنصر دورًا في عالم اللعبة.
الوسوم البنيوية تصبح عمارة. فالوسم <h1> يصبح غرفة الزعيم، و<main> غرفة العرش، و<section> و<div> قاعات، و<aside> غرفة سرية، و<footer> سراديب. ووسوم المحتوى تصبح أشياء داخل تلك الغرف: الفقرات تولّد أعداء جوّالين، وعناصر القوائم تصبح غنائم، والاقتباسات تصبح لفائف معرفة تقرؤها، والنماذج والجداول غرف فخاخ، وكل <a href> يصبح بوابة تشير إلى الرابط الذي يربط إليه فعلًا.
والتخطيط نفسه مولّد إجرائيًا لكنه ليس عشوائيًا. فالبذرة مشتقة من الرابط، فينتج العنوان نفسه دائمًا الزنزانة نفسها؛ يمكنك مشاركة بذرة فيمشي صديقك في الخريطة المطابقة. وحجم الغرف يتبع عمق التداخل، وعددها يتبع عدد العناصر البنيوية، والشكل العام يتبع طبيعة الصفحة: صفحة وثائق كثيفة تنتج متاهة مترامية، ومقال ينتج سلسلة خطية من الغرف، وفهرس روابط ينتج شبكة متكررة، وصفحة هبوط من شاشة واحدة تنتج حلبة ضيقة.
لماذا قد يريد أحد هذا
جزئيًا لأنها ممتعة، وجزئيًا لأنها تجعل البنية مرئية بطريقة لا يفعلها المخطط أبدًا. حمّل صفحة كتبتها فترى بنظرة هل هي مبنى متماسك أم جحر من أغلفة <div> الفارغة. فالصفحات ذات الترميز الدلالي النظيف تنتج خرائط تُقرأ كزنازين حقيقية؛ والصفحات المبنية من أغلفة متداخلة دون عناوين تنتج بضعة صناديق بلا ملامح. وهذه إشارة لإمكانية الوصول ولتحسين محركات البحث معروضة كمستوى لعبة.
وهي أيضًا عرض لما يستطيعه المتصفح وحده. لا محرك ألعاب، ولا ورقة رسوم، ولا ملف صوتي، ولا خادم: البلاطات والشخصيات تُرسم كصور نقطية بحجم 8×8 بكسل على لوحة رسم، والمؤثرات الصوتية تولّدها مذبذبات Web Audio لحظة تشغيلها، والحفظ في التخزين المحلي لمتصفحك. والطلب الوحيد الذي ترسله DOM-Walker عبر الشبكة هو جلب الصفحة التي طلبتها، وحتى هذا يمكن تجاوزه بلصق HTML أو تحميل ملف .html محلي.
للاستفادة أكثر
- إن لم يُحمّل رابط، فالموقع يمنع الطلبات عبر المصادر. افتح الصفحة في تبويب آخر، واعرض مصدرها، وانسخ الترميز، واستخدم وضع اللصق؛ فهذا الطريق لا يلمس الشبكة إطلاقًا.
- البوابات روابط حقيقية. الدخول في إحداها يجلب ذلك الرابط ويولّد الزنزانة التالية، حاملًا شخصيتك ومستواها ومخزونها معك، فتستطيع ربط موقع كامل في حملة.
- احتفظ بالمستهلكات قبل دخول غرفة الزعيم. فالزعماء يأتون من
<h1>في الصفحة ويضربون أقوى بعدة أضعاف من الجوّالين المولودين من الفقرات. - العناصر مهمة في القتال: النار تغلب الطبيعة، والطبيعة تغلب الماء، والماء يغلب النار، والظل والسحر يتقابلان. وعنصر العدو يظهر في لوحة القتال قبل أن تلتزم.
- صعوبة roguelike تحذف حفظك عند الموت. استخدمها عن قصد، وصدّر ملف .dwsave أولًا إن أردت مخرجًا.
طريقة اللعب
- اكتب رابطًا في الحقل أعلاه، أو اضغط أحد أزرار الأمثلة، وادخل الزنزانة.
- تحرك بمفاتيح الأسهم أو W A S D، أو بالسحب والنقر على شاشة اللمس. كل خطوة دور، والأعداء يتحركون حين تتحرك.
- اصطدم بعدو لتبدأ قتالًا بالأدوار، ثم هاجم أو دافع أو ألقِ تعويذة أو استخدم غرضًا أو اهرب.
- اضغط Space للتفاعل مع الصناديق والأذرع والتماثيل ولفائف المعرفة، ولدخول البوابات.
- احفظ في إحدى الخانات الثلاث، أو صدّر ملف .dwsave لتنقل جولتك إلى متصفح آخر.
أدوات ذات صلة: ضاغط HTML لتقليص الترميز الذي استكشفته، وتحويل HTML إلى Markdown لاستخراج محتوى صفحة، ومحلل الروابط لتفكيك الروابط التي أصبحت بوابات.
ما الذي يصبحه كل وسم
التحويل هو الحيلة كلها، وهو حرفي عن قصد لا زخرفي:
| في الترميز | في الزنزانة |
|---|---|
<h1> |
غرفة الزعيم؛ فعنوان الصفحة هو الزعيم |
<h2> و<h3> |
بوابات القلعة وغرف الحراس |
<main> |
غرفة العرش |
<section> و<article> و<div> |
قاعات وعقد قصة وحجرات |
<aside> |
غرفة سرية |
<footer> |
السراديب |
<p> |
عدو جوّال، يُسمّى بأول كلمة فيه |
<li> و<span> |
غنائم قابلة للجمع |
<a href> |
بوابة إلى رابط ذلك الوسم |
<blockquote> و<figcaption> و<textarea> |
لفائف معرفة تقرؤها وتحتفظ بها |
<form> و<table> |
غرف فخاخ وألغاز |
<button> و<input> |
أذرع وصناديق مقفلة |
<code> و<pre> |
أشباح الرونية وحجارتها |
لا شيء مختلق من العدم. فالعدو الذي يسد طريقك في زنزانة ويكيبيديا يحمل اسم فقرة من ذلك المقال. واللفافة التي تلتقطها تحتوي اقتباس تلك الصفحة الفعلي. وادخل بوابة فتجلب الصفحة التي تشير إليها، وتولّد الزنزانة التالية، وتحمل شخصيتك عبرها؛ فيصبح موقع كامل حملة.
الخريطة إجرائية لا عشوائية
البذرة تأتي من الرابط. فالعنوان نفسه ينتج دائمًا الزنزانة نفسها، لذا فالبذرة قابلة للمشاركة: أرسل الرابط لأحدهم فيمشي في خريطتك لا في غيرها.
ومن الشجرة المحللة، يجري التوليد بترتيب ثابت. تُرتب العناصر البنيوية بحسب الأهمية والعمق، وأقواها تصبح غرفًا، وتُوضع الغرف مع إعادة محاولات عند التصادم فلا تتداخل أبدًا. وتربطها سلسلة ممرات بترتيب المستند، وهذا يضمن أن الخريطة قابلة للعبور بالكامل دائمًا، وتُضاف روابط إضافية في الصفحات الكثيفة بالروابط فيلتف التخطيط بدل أن يمتد في خط. ثم يُوزع المحتوى بترتيب المستند، فقائمة كانت تحت عنوان في الصفحة تنتهي كنزًا في الغرفة التي أنشأها ذلك العنوان.
والنتيجة أن شكل الصفحة ينجو إلى اللعبة:
- وثائق كثيفة ومتداخلة بعمق ← متاهة مترامية متعددة المستويات.
- مقال في مدونة ← سلسلة خطية من الغرف.
- فهرس روابط أو خلاصة اجتماعية ← شبكة متكررة.
- صفحة هبوط من شاشة واحدة ← حلبة ضيقة لا مخبأ فيها.
- صفحة متجر أو قوائم كثيرة ← خريطة كنوز.
وهذا يجعلها طريقة مزعجة قليلًا لمراجعة HTML لديك. فالصفحات الدلالية جيدة البنية تنتج زنازين تُقرأ كمبانٍ. والصفحات المجمّعة من أغلفة <div> متداخلة دون عناوين تنتج بضعة صناديق بلا ملامح ولا شيء تقريبًا تفعله فيها. اللعبة لا تحكم عليك؛ إنها فقط ترسم ما هو موجود.
كل شيء مولّد، لا شيء منزّل
لا محرك ألعاب هنا، ولا خط إنتاج للأصول.
الرسوم صور نقطية بحجم 8×8 مكتوبة كمصفوفات نصوص في الشيفرة، تُرسم على لوحة رسم بمستطيل مملوء لكل بكسل، مع تبديل لوحة الألوان لكل كيان فيتشارك عدو النار وعدو الظل الجسد نفسه ويختلفان في اللون. وضباب الحرب مصفوفة استكشاف لكل بلاطة مع فحص خط رؤية بخوارزمية Bresenham، فلا ترى إلا ما تستطيع شخصيتك رؤيته فعلًا.
والصوت مذبذبات Web Audio تُنشأ وتُتخلص منها لحظة تشغيل كل مؤثر: نبضة موجة مربعة للخطوة، وكنس موجة منشارية لضربة السيف، وضجيج مرشح للاصطدام، وتتابع صاعد لرفع المستوى. والموسيقى الخلفية الآلية نفسها على مؤقت، تمشي على سلّم خماسي تختاره السمة الحالية، وتنتقل إلى سلّم أسرع وأقتم حين يبدأ القتال. ولا يُجلب أي ملف صوتي.
القتال والشخصية والخسارة
القتال بالأدوار ونمطي: اصطدم بعدو فتفسح الخريطة المجال للوحة فيها صورة العدو وعنصره وإحصاءاته وسجل. هاجم، أو دافع، أو أنفق القدرة على حركة خاصة أو تعويذة، أو اشرب جرعة، أو حاول الهرب؛ والهرب فحص سرعة مقابل العدو، لا مخرج مجاني.
ويحسب الضرر بناءً على الهجوم والدفاع مع هامش عشوائي، والضربات الحاسمة تتناسب مع الحظ، والعناصر تشكّل مثلثًا. والخبرة ترفع مستواك، فتزيد الصحة والقدرة والهجوم والدفاع والسرعة. والمعدات تأتي من الصفحة: سلاح باسم عنصر قائمة، ودرع باسم رابط، وأثر باسم كتلة شيفرة، والندرة من العادي إلى الأسطوري تضاعف مكافآتها.
والموت ليس النهاية إلا إن اخترت ذلك. ففي الصعوبة العادية تستيقظ عند المدخل بنصف صحتك وذهب أقل. وفي صعوبة roguelike يحذف الموت الحفظ.
الحفظ والمشاركة والتصدير
ثلاث خانات حفظ تعيش في التخزين المحلي، مع حفظ تلقائي للخانة الأولى كل خمس دقائق ومرة أخرى عند مغادرة الصفحة. ويمكن أيضًا تصدير جولة كملف .dwsave واستيراده في أي متصفح آخر. والخرائط نفسها تُصدّر أيضًا: صورة PNG لمخطط الطابق كاملًا، أو ملف JSON لقائمة الغرف وأعداد الكيانات، وهو أثر مفيد فعلًا إن كان ما أردته صورة لبنية صفحة.
جرّبها على موقعك
حمّل صفحتك الرئيسية. عُدّ الغرف. وانظر هل تحتوي غرفة الزعيم على <h1> الحقيقي لديك، وهل توجد الغرفة السرية أصلًا، وهل تقود البوابات حيث تتوقع. فإن كانت الزنزانة متاهة مليئة باللفائف والكنوز، فترميزك يؤدي عمله. وإن كانت أربع قاعات فارغة وبابًا مقفلًا، فقد وجدت شيئًا يستحق الإصلاح، ووجدته وأنت تلعب في تبويب متصفح.