cssQuake: Quake ბრაუზერში HTML-ითა და CSS-ით სრულდება — canvas-ის გარეშე

cssQuake — Layoutit Studio-ს პროექტი — 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 კომიტი დააგროვა. ვინაიდან რენდერერს თავად ბრაუზერის განლაგების ძრავა ასრულებს, პროექტი იმის გამოცდაცაა, თუ რამდენად შორს შეიძლება CSS ტრანსფორმაციების წაყვანა: 1996 წლის პირველი პირის შუტერი, რომელიც სტილიზებულ DOM კვანძებად სრულდება.