محرك لعب مخصص
حلقة قائمة على requestAnimationFrame لتنظيم تحديثات اللعبة والرسم.
JavaScript · لعبة على المتصفح
عودة إلى الأساسيات.
قطعة بعد قطعة.
لعبة متصفح بنيتها من الصفر باستخدام JavaScript وعناصر DOM، دون إطار عمل أو Canvas.
BROWSER EXPERIMENT/04
DOMNO CANVAS
JSNO FRAMEWORK
Visual study · DOM-rendered blocksرسم توضيحي للمشروع، وليس صورة من التطبيق
عن المشروع
لعبة بأسلوب Tetris مبنية باستخدام JavaScript وHTML وعناصر DOM، دون إطار عمل أو Canvas. يشمل العمل حلقة لعب مخصصة، وتحكمًا مستجيبًا، وإيقافًا واستئنافًا، ولوحة نتائج حية.
ما الذي بنيته؟
يركز المشروع على ما يمكن للمتصفح تقديمه بتنفيذ مباشر واهتمام بطريقة عرض العناصر وتحديثها.
التحكم بلوحة المفاتيح
تحكم سلس لا يكرر أحداث المفاتيح تلقائيًا، مع الإيقاف والمتابعة وإعادة اللعب.
لوحة نتائج حية
لوحة نتائج في المشروع الأصلي تعرض المؤقت والنقاط والمحاولات.
فحص أداء العرض
قياس الأداء باستخدام أدوات المتصفح وتحسين العرض، مع الاهتمام بطبقات التركيب.
الجانب التقني
يستخدم المشروع الأصلي عناصر DOM وrequestAnimationFrame مع استهداف ٦٠ إطارًا في الثانية. فحصت أداء العرض في المتصفح وقللت طبقات التركيب. هذا هدف للمشروع وعمل تطوير موثق، وليس ضمانًا للأداء نفسه على كل جهاز.
Inputأحداث لوحة المفاتيح
Game looprequestAnimationFrame
DOMعناصر يرسمها المتصفح
خريطة توضيحية للمكونات
الأساسيات قبل المكتبات. يركز المشروع الأصلي على JavaScript وأحداث المتصفح وتحديث DOM وفحص الأداء، بدل الاعتماد على واجهات إطار عمل.
اكتشف المزيد
لم يُستورد الكود الأصلي للمشروع إلى هذا الموقع. أضفت أدناه تجربة مكعبات مستقلة ومكتوبة حديثًا، حتى يقدم الموقع تفاعلًا حقيقيًا قابلًا للعب.
استراحة قصيرة. ولعبة حقيقية.
جرّب لعبة مكعبات بُنيت خصيصًا لهذا الموقع، باستخدام عناصر DOM وحلقة requestAnimationFrame. هذا كود تجريبي جديد، وليس الكود الأصلي لمشروع Tetris.
وصف المشاريع مستند إلى سيرتي الذاتية في أكتوبر ٢٠٢٦. الرسوم تشرح الأفكار، وليست صورًا للشاشات الأصلية للتطبيقات.