CSSQuake

 (cssquake.com)
1 điểm bởi GN⁺ 4 giờ trước | 1 bình luận | Chia sẻ qua WhatsApp
  • Bản demo CSSQuake chạy Quake ngay trong trình duyệt, trên trang đồng thời hiển thị trạng thái khởi tạo cssQuake v0.230 và coming soon!
  • Phần dựng hình do PolyCSS renderer v0.2.6 đảm nhiệm, có thể thấy log tải các tài nguyên manifest, progs, definitions, weapon model và id1/pak0.pak
  • Trò chơi được bao gồm là Quake Shareware version 1.06, kèm dòng bản quyền Quake (C) 1996 id Software, Inc.
  • Màn hình nhiều người chơi cung cấp các thiết lập tên, màu sắc, bản đồ, fraglimit, timelimit, số người chơi tối đa cùng các thao tác Create, Join, Copy Link
  • Hướng dẫn điều khiển và cả các công tắc debug cũng được hiển thị, cho thấy trang hiện tại đang đồng thời trình bày bản demo chạy thử và giao diện thiết lập

Bản demo Quake khởi tạo trong trình duyệt

  • Tiêu đề trang là cssQuake - Powered by PolyCSS, phần nội dung hiển thị v0.230 và coming soon!
  • Ở phần log phía dưới xuất hiện === cssQuake v0.230 initialized ===
  • Trạng thái tải được hiển thị theo thứ tự sau
    • Host_Init
    • Loaded manifest
    • Loaded progs
    • Loaded definitions
    • Weapon model
    • Assets from id1/pak0.pak
  • Khu vực hiển thị hiệu năng cho thấy 0 FPS và 0 MS
  • Các liên kết liên quan gồm cssQuake GitHub, id Software Quake GitHub, Layoutit

Thiết lập nhiều người chơi và điều khiển

  • Trong menu Multiplayer có thể thiết lập tên, màu sắc, bản đồ, fraglimit, timelimit và số lượng người chơi tối đa
    • Bản đồ mặc định hiển thị là E1M1 the Slipgate Complex
    • Các nút thao tác là Create, Join, Copy Link
  • Danh sách bản đồ hiển thị các mục sau
    • 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
  • Hướng dẫn điều khiển được chia thành Gameplay và Menu
    • Gameplay: di chuyển bằng WASD, xoay nhìn bằng Mouse, bắn bằng Click, nhảy bằng Space, chạy bằng Shift, cúi bằng Ctrl
    • Menu: di chuyển bằng phím mũi tên, chọn bằng Enter, quay lại bằng Esc
  • Trong thiết lập Debug và Gameplay có các công tắc sau
    • Show outlines, Show stats panel, Show FPS panel
    • Điều chỉnh Crosshair
    • Dynamic lighting, Mute sounds, Show particles, Show enemies
    • Disable damage, Disable movement, Disable attacks, Invert mouse

Bài viết liên quan

1 bình luận

 
GN⁺ 4 giờ trước
Ý kiến trên Hacker News

  • Thành tựu rất ấn tượng, nhưng vẫn thấy lấn cấn vì hình như Quake chạy trên PC Pentium-133 của thập niên 90 còn mượt hơn trên Mac M1 Pro của tôi

    • Engine này không phải là thứ đã được tối ưu hiệu năng. Dù sao thì nó cũng dùng CSS mà
    • Tham khảo thêm, trên Chrome của M2 thì nó chạy mượt như bơ, nhưng trên Safari thì bị khựng và cắt hình khá nhiều
    • Trên Firefox + Linux thì hoàn toàn không có vấn đề. Chỉ là Gnome Web bị giật và kỳ lạ. Có vẻ là vấn đề phía WebKit/Safari
    • Nếu là Quake biên dịch bằng C thì trên M1 nó sẽ chạy cực nhanh kể cả ở độ phân giải toàn màn hình 8K
    • Khoan, Quake có chạy trên Pentium-133 à? Tôi dùng Pentium MMX 233MHz và nghĩ là nó sẽ không chạy nổi nên cũng chẳng buồn kiếm thử

  • Tuyệt thật. Còn khó thoát hơn cả vim

    • Nếu muốn xem menu thì nhấn Tab. Muốn quay lại game thì bấm vào bên ngoài các mục menu là được
    • Bạn thoát kiểu gì vậy? Có vẻ chẳng có gì nhận cả

  • Ấn tượng đấy. Đây có phải là không chỉ renderer được làm để dùng CSS, mà còn là toàn bộ engine và logic game được tái hiện lại không? Có khá nhiều chỗ hoạt động khác với bản gốc nên trông như vậy
    Ví dụ có nút phải bắn vào mới hoạt động thay vì chỉ chạm vào, còn có cửa bí mật thì lại mở khi chạm vào thay vì bắn

    • Xin chào! Cảm ơn bạn đã báo, giờ các nút chắc sẽ hoạt động đúng rồi
      Về phía logic game, ở bước build tôi chạy một trình trích xuất JS nhỏ trên QuakeC/progs.dat để tạo JSON chứa thông tin gốc như trạng thái, model, tấn công, âm thanh. Runtime trong trình duyệt là TypeScript, và dùng các thông tin đó để hiện thực lối chơi gần giống Quake
    • Không, chỉ renderer là như vậy thôi. Bản thân game là TypeScript

  • Đây là thứ đầu tiên trên Internet sau một thời gian dài khiến tôi thực sự bật cười thành tiếng
    Tôi cũng thử xem https://cssdoom.wtf/ và cái đó cũng hay. Cả hai đều nhẹ đầu và dễ chịu hơn tin thời sự mấy ngày nay nhiều \o/

  • Có vẻ CSS Quake này cần JS để chạy

  • Dù tôi ghét cay ghét đắng sự lan rộng của CSS như một hack chồng lên hack, cũng như cả web stack CSS/JS/HTML nói chung, nhưng cái này thì tôi thấy là một ca sử dụng CSS tuyệt vời và hoàn toàn chính đáng :)

  • Cái này lấy từ https://github.com/NielsLeenheer/cssDOOM à?

  • Rất ngầu. Tôi tự hỏi giới hạn của nó ở đâu. Tôi thấy con chó bị bắn đang lơ lửng trên không, không biết là do CSS hay là thứ có thể sửa được?

    • .dog { display: float; }

  • Dù ấn tượng thật, nhưng mấy thứ như thế này có vẻ không nên có thể làm được bằng một ngôn ngữ tạo kiểu khai báo

    • CSS chỉ được dùng cho render chứ không phải logic game

  • Wow, đúng là quá đỉnh. Chạy cực kỳ mượt. Thật khó tin là trí nhớ cơ bắp vẫn còn nguyên kể cả sau khoảng 25 năm