cssQuake. Quake-ը բրաուզերում աշխատում է HTML-ով ու CSS-ով՝ առանց canvas-ի

Layoutit Studio-ի cssQuake նախագիծը id Software-ի 1996 թվականի Quake հրաձիգը բրաուզերում է աշխատացնում, սակայն ոչ այնպես, ինչպես նման պորտերը սովորաբար։ Այստեղ ոչ WebGL կոնտեքստ կա, ոչ էլ canvas տարր. խաղի BSP աշխարհի երկրաչափությունը ներկայացված է իրական HTML տարրերով, որոնք տեղադրված են CSS matrix3d ձևափոխումներով՝ PolyCSS 3D շարժիչի միջոցով։ Նախագիծը հրապարակվել է Hacker News-ում և հավաքել 548 միավոր։

Իրական DOM՝ canvas-ի փոխարեն

cssQuake-ում աշխարհի մակերևույթները դառնում են DOM հանգույցներ. յուրաքանչյուրը տեղադրվում է CSS matrix3d ձևափոխմամբ, պատվում պիքսելացված CSS ֆոներով և խմբավորվում mesh-երի մեջ՝ canvas-ի վրա նկարելու փոխարեն։ Արդյունքը կարելի է դիտել բրաուզերի մշակողի գործիքներում՝ ինչպես ցանկացած սովորական էջ։ Պահոցը նախագիծը նկարագրում է որպես Quake-ի պորտ, որը BSP աշխարհները ներկայացնում է որպես իսկական HTML/CSS 3D երկրաչափություն և աշխատում TypeScript-ով։

Quake-ի տվյալների նախնական մշակում

Քանի որ նկարումը կատարում է CSS-ը, խաղը գալիս է պատրաստված ռեսուրսներով։ Նախամշակիչը Quake-ի բնօրինակ տվյալները վերածում է բրաուզերի համար պատրաստ JSON-ի, պատկերների և PolyCSS նկարման փաթեթների։ Տեքստուրաները վերծանվում են Quake-ի գունապնակով PNG ֆայլերի, անիմացված տեքստուրաների հաջորդականությունները դառնում են CSS անիմացիաների մուտքեր, իսկ դրվագների քարտեզները ստանում են նախապես հավաքված նկարման փաթեթներ, որպեսզի բրաուզերը միացնի պատրաստ աշխարհի DOM-ը՝ յուրաքանչյուր մակերևույթ զրոյից չկառուցելու փոխարեն։ Պահոցի նախապատրաստման քայլը կարդում է shareware կամ տեղական PAK ֆայլեր. Quake-ի բնօրինակ խաղային տվյալները պահոցում ներառված չեն։

Խաղալը և վրիպազերծումը

Խաղը աջակցում է ստեղնաշարի և մկնիկի ստանդարտ կառավարմանը՝ WASD շարժման, մկնիկ՝ դիտելու, սեղմում՝ կրակելու, space՝ ցատկելու, shift՝ վազելու, ctrl՝ կքանստելու համար, ինչպես նաև սլաքներով կառավարվող ընտրացանկին։ Վրիպազերծման բաժինը ցուցադրում է ուրվագծեր, վիճակագրության վահանակ և FPS հաշվիչ, իսկ անջատիչները ընդգրկում են դինամիկ լուսավորությունը, մասնիկները, հակառակորդներին, նշանոցը, վնասը և շարժումը, ինչը պորտը օգտակար է դարձնում և՛ խաղի, և՛ ցուցադրության համար։ Կա նաև բազմախաղացող ռեժիմի էկրան՝ քարտեզի, fraglimit-ի և խաղացողների սահմանի ընտրությամբ սենյակներ ստեղծելու, ինչպես նաև ձայնագրման ռեժիմ։

Ներկառուցումը և լիցենզիան

cssQuake-ը կարող է աշխատել iframe-ի ներսում. relayKeys=1 ավելացնելով՝ խաղը ծնող էջին ուղարկում է զտված խաղային ստեղների իրադարձությունները՝ որպես cssquake:key հաղորդագրություններ, որոնք կարդալուց առաջ ծնող էջը պետք է ստուգի event.origin-ը։ Կոդը տարածվում է GPL-2.0-only լիցենզիայով և գտնվում է GitHub-ում, որտեղ պահոցը հավաքել է 182 աստղ և 292 commit։ Քանի որ նկարողը բրաուզերի սեփական դասավորության շարժիչն է, նախագիծը նաև փորձություն է, թե որքան հեռու կարելի է տանել CSS ձևափոխումները. 1996 թվականի առաջին դեմքից հրաձիգ, որն աշխատում է որպես ոճավորված DOM հանգույցներ։