‏cssQuake: Quake רץ בדפדפן ב-HTML ו-CSS, בלי canvas

cssQuake, פרויקט של סטודיו Layoutit, מריץ בדפדפן את משחק היריות Quake של id Software מ-1996 — אבל לא בדרך שבה פורטים כאלה עובדים בדרך כלל. אין כאן הקשר WebGL ואין אלמנט canvas: גיאומטריית עולם ה-BSP של המשחק מיוצגת באלמנטי HTML אמיתיים, הממוקמים בטרנספורמציות matrix3d של CSS באמצעות מנוע התלת-ממד PolyCSS. הפרויקט פורסם ב-Hacker News וצבר 548 נקודות.

‏DOM אמיתי במקום canvas

ב-cssQuake פני השטח של העולם הופכים לצמתי DOM: כל אחד ממוקם בטרנספורמציית matrix3d של CSS, מצויר בטקסטורות רקע מפוקסלות ומקובץ ל-meshes במקום להיות מצויר על canvas. את התוצאה אפשר לבדוק בכלי המפתחים של הדפדפן כמו כל עמוד אחר. המאגר מתאר את הפרויקט כפורט של Quake שמציג עולמות BSP כגיאומטריית HTML/CSS תלת-ממדית אמיתית ורץ ב-TypeScript.

עיבוד מוקדם של נתוני Quake

מכיוון ש-CSS מבצע את הרינדור, המשחק מגיע עם נכסים מוכנים. שלב עיבוד מוקדם ממיר את נתוני Quake המקוריים ל-JSON מוכן לדפדפן, לקובצי תמונה ולחבילות רינדור של PolyCSS. הטקסטורות מפוענחות דרך הפלטה של Quake לקובצי PNG, רצפי טקסטורות מונפשות הופכים לקלט של אנימציות CSS, ומפות הפרקים מקבלות חבילות רינדור מוכנות מראש, כך שהדפדפן מצרף DOM עולם מוכן במקום לבנות כל משטח מחדש בזמן הטעינה. שלב ההכנה קורא קובצי shareware או PAK מקומיים; נתוני המשחק המקוריים של Quake אינם כלולים במאגר.

משחק וניפוי שגיאות

המשחק תומך בשליטה רגילה במקלדת ובעכבר — WASD לתנועה, העכבר להסתכלות, קליק לירי, רווח לקפיצה, shift לריצה ו-ctrl לכריעה — וכן בתפריט שנשלט בחצים. מדור ניפוי שגיאות מציג קווים מתארים, פאנל סטטיסטיקות ומונה FPS, ומתגים מכסים תאורה דינמית, חלקיקים, אויבים, כוונת, נזק ותנועה, מה שהופך את הפורט לשימושי להדגמה לא פחות מלמשחק. יש גם מסך מרובה משתתפים ליצירת חדרים עם בחירת מפה, fraglimit ומגבלת שחקנים, ומצב הקלטה.

הטמעה ורישיון

cssQuake יכול לרוץ בתוך iframe; הוספת relayKeys=1 גורמת למשחק לשלוח לעמוד האם אירועי מקשים מסוננים של המשחק כהודעות cssquake:key, ולפני קריאתן על העמוד לאמת את event.origin. הקוד מופץ ברישיון GPL-2.0-only ונמצא ב-GitHub, שם צבר המאגר 182 כוכבים ו-292 קומיטים. מכיוון שהמרנדר הוא מנוע הפריסה של הדפדפן עצמו, הפרויקט הוא גם מבחן לגבולות הטרנספורמציות של CSS: משחק יריות בגוף ראשון מ-1996 שרץ כצמתי DOM מעוצבים.