CSSQuake

 (cssquake.com)
1 คะแนน โดย GN⁺ 4 시간 전 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • เดโม CSSQuake ที่รัน Quake ในเบราว์เซอร์ โดยหน้าเว็บแสดงทั้งสถานะเริ่มต้น cssQuake v0.230 และ coming soon!
  • การเรนเดอร์ทำโดย PolyCSS renderer v0.2.6 และสามารถตรวจสอบบันทึกการโหลดทรัพยากรอย่าง manifest, progs, definitions, weapon model และ id1/pak0.pak ได้
  • เกมที่รวมมาให้คือ Quake Shareware version 1.06 และมีการแสดงข้อความลิขสิทธิ์ Quake (C) 1996 id Software, Inc.
  • หน้าจอมัลติเพลเยอร์มีการตั้งค่าชื่อ สี แผนที่ fraglimit timelimit จำนวนผู้เล่นสูงสุด และการทำงาน Create, Join, Copy Link
  • มีทั้งคำแนะนำการควบคุมและตัวสลับดีบักให้เห็น ทำให้หน้าปัจจุบันอยู่ในสถานะที่แสดงทั้งเดโมการทำงานและ UI การตั้งค่า

เดโม Quake ที่เริ่มต้นในเบราว์เซอร์

  • ชื่อหน้าคือ cssQuake - Powered by PolyCSS และในเนื้อหามี v0.230 กับ coming soon! แสดงอยู่
  • ในบันทึกด้านล่างมี === cssQuake v0.230 initialized ===
  • สถานะการโหลดแสดงตามลำดับดังนี้
    • Host_Init
    • Loaded manifest
    • Loaded progs
    • Loaded definitions
    • Weapon model
    • Assets from id1/pak0.pak
  • พื้นที่แสดงประสิทธิภาพมี 0 FPS และ 0 MS
  • ลิงก์ที่เกี่ยวข้องคือ cssQuake GitHub, id Software Quake GitHub, Layoutit

การตั้งค่ามัลติเพลเยอร์และการควบคุม

  • ในเมนู Multiplayer สามารถตั้งค่าชื่อ สี แผนที่ fraglimit timelimit และจำนวนผู้เล่นสูงสุดได้
    • แผนที่เริ่มต้นแสดงเป็น E1M1 the Slipgate Complex
    • ปุ่มการทำงานคือ Create, Join, Copy Link
  • รายการแผนที่มีรายการต่อไปนี้
    • E1M1 the Slipgate Complex
    • E1M2 Castle of the Damned
    • E1M3 the Necropolis
    • E1M4 the Grisly Grotto
    • E1M5 Gloom Keep
    • E1M6 The Door To Chthon
    • E1M7 The House of Chthon
    • E1M8 Ziggurat Vertigo
  • คำแนะนำการควบคุมแบ่งเป็น Gameplay และ Menu
    • Gameplay: เคลื่อนที่ด้วย WASD, มองด้วย Mouse, ยิงด้วย Click, กระโดดด้วย Space, วิ่งด้วย Shift, ย่อตัวด้วย Ctrl
    • Menu: ใช้ปุ่มลูกศรเพื่อนำทาง, Enter เพื่อเลือก, Esc เพื่อย้อนกลับ
  • ในการตั้งค่า Debug และ Gameplay มีตัวสลับดังต่อไปนี้
    • Show outlines, Show stats panel, Show FPS panel
    • การปรับ Crosshair
    • Dynamic lighting, Mute sounds, Show particles, Show enemies
    • Disable damage, Disable movement, Disable attacks, Invert mouse

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 4 시간 전
ความเห็นจาก Hacker News

  • เป็นผลงานที่ยอดเยี่ยมมาก แต่ก็อดรู้สึกขัดใจไม่ได้ที่ Quake บนพีซี Pentium-133 ยุค 90s ที่เคยเล่น ดูจะลื่นกว่าบน Mac M1 Pro ของฉันเสียอีก

    • เอนจินนี้ไม่ได้ถูกทำ ให้ปรับแต่งด้านประสิทธิภาพ มาอยู่แล้ว เพราะสุดท้ายมันก็ใช้ CSS
    • อ้างอิงไว้ว่า บน Chrome ของ M2 มันลื่นเหมือนเนย แต่บน Safari ดูกระตุกและเฟรมหลุดเยอะ
    • บน Firefox + Linux ไม่มีปัญหาเลย แต่ Gnome Web กระตุกและแปลก ๆ ดูเหมือนจะเป็น ปัญหาฝั่ง WebKit/Safari
    • ถ้าเป็น Quake ที่คอมไพล์ด้วย C ก็น่าจะรันบน M1 ได้เร็วมากแม้ที่ ความละเอียดเต็ม 8K
    • เดี๋ยวก่อนนะ Quake รันบน Pentium-133 ได้ด้วยเหรอ? ฉันใช้ Pentium MMX 233MHz และคิดว่ามันคงไม่ไหว เลยไม่เคยคิดจะหามาลองด้วยซ้ำ

  • เจ๋งมาก ออกยากกว่า vim อีก

    • ถ้าอยากดูเมนูให้กด Tab ถ้าอยากกลับเข้าเกมให้คลิกนอกเมนู
    • ออกยังไงเหรอ? ดูเหมือนไม่มีอะไรตอบสนองเลย

  • น่าประทับใจ นี่คือการ เขียนใหม่ทั้งเอนจินและเกมลอจิกทั้งหมด ไม่ใช่แค่เรนเดอเรอร์ที่ทำให้ใช้ CSS ได้ใช่ไหม? เพราะมีหลายจุดที่ทำงานต่างจากต้นฉบับเลย
    เช่น ปุ่มบางอันต้องยิงถึงจะทำงานแทนที่จะเดินไปแตะ และประตูลับบางบานกลับเปิดเมื่อไปแตะแทนที่จะต้องยิง

    • สวัสดี! ขอบคุณสำหรับรายงาน ตอนนี้ปุ่มน่าจะทำงานถูกต้องแล้ว
      ฝั่งเกมลอจิก ในขั้นตอนบิลด์จะรัน ตัวดึงข้อมูล JS ตัวเล็กบน QuakeC/progs.dat เพื่อสร้าง JSON ของข้อมูลต้นทางอย่าง state, model, attack, sound แล้วรันไทม์ในเบราว์เซอร์เป็น TypeScript ที่ใช้ข้อมูลเหล่านั้นเพื่อทำเกมเพลย์ให้คล้าย Quake
    • ไม่ใช่ แค่เรนเดอเรอร์เท่านั้น เกมจริง ๆ เป็น TypeScript

  • นี่เป็นสิ่งแรกในอินเทอร์เน็ตที่ทำให้ฉันหัวเราะออกมาจากใจจริงในรอบนานมาก
    ลองดู https://cssdoom.wtf/ แล้ว อันนั้นก็ดีเหมือนกัน ทั้งคู่เบาใจและเพลินกว่าข่าวบ้านเมืองทุกวันนี้มาก \o/

  • ดูเหมือนว่า CSS Quake อันนี้ต้องใช้ JS ถึงจะรันได้

    • หรืออาจทำได้ด้วย https://lyra.horse/x86css/?
    • CSS ใช้สำหรับเรนเดอริง ส่วนเกมลอจิกเป็น TypeScript

  • แม้ฉันจะไม่ชอบการที่ CSS เป็น การแฮ็กซ้อนบนการแฮ็ก และก็เกลียดเว็บสแต็กอย่าง CSS/JS/HTML แบบเข้าเส้น แต่ต้องยอมรับว่านี่เป็นกรณีใช้งาน CSS ที่ยอดเยี่ยมและสมเหตุสมผลจริง ๆ :)

  • อันนี้เอามาจาก https://github.com/NielsLeenheer/cssDOOM หรือเปล่า?

  • เจ๋งมาก อยากรู้จริง ๆ ว่าขีดจำกัดอยู่ตรงไหน เห็น หมาที่ถูกยิงลอยค้างอยู่กลางอากาศ ด้วย นี่เป็นเพราะ CSS หรือเป็นอะไรที่แก้ได้?

    • .dog { display: float; }

  • น่าประทับใจอยู่หรอก แต่รู้สึกว่าเรื่องแบบนี้ ไม่ควรเป็นสิ่งที่ภาษาสไตล์แบบประกาศเจตนา จะทำได้

    • CSS ถูกใช้แค่กับการเรนเดอริง ไม่ใช่กับเกมลอจิก

  • ว้าว เจ๋งมาก รันได้ลื่นจริง ๆ น่าทึ่งมากที่ผ่านไปราว 25 ปีแล้ว ความจำของกล้ามเนื้อก็ยังอยู่ครบ