Ví dụ về các trò chơi dựa trên Javascript / HTML5 tốt [đã đóng]


37

Giờ đây, Flash phần lớn được thay thế bằng các yếu tố HTML5 (video, âm thanh, canvas, v.v.) có ví dụ hay nào về các trò chơi dựa trên web được xây dựng trên các tiêu chuẩn hoàn toàn mở (có nghĩa là Javascript, HTML và CSS) không? Tôi thấy rất nhiều ví dụ về các triển khai HTML5 thuần túy của những gì đã từng chỉ có trong Flash (như nội dung ở đây: http://www.html5rocks.com/ ) nhưng không có nhiều trò chơi, một miền dường như vẫn bị Flash chi phối. Tôi tò mò những gì có thể và những hạn chế là gì.


6
Tôi khuyên bạn nên bỏ dòng đầu tiên - câu trả lời được xếp hạng hàng đầu không trả lời câu hỏi của bạn nhưng bị xúc phạm bởi tiền đề của bạn;)
oberhamsi

Câu trả lời:


14

Có rất nhiều sự cường điệu xung quanh HTML5 nhưng để nói rằng Flash phần lớn được thay thế bởi nó là một sự cường điệu hóa. Mặc dù thẻ video và âm thanh có thể tăng sức kéo, chơi game sẽ là một lĩnh vực tồn tại trong một thời gian dài, không chỉ vì công cụ và hiệu suất tốt hơn mà còn bởi vì có một cơ sở hạ tầng kinh doanh được xây dựng xung quanh việc phân phối các tệp Swf, điều đó sẽ không dễ dàng thích ứng với HTML và js. Các trò chơi html5 mà tôi đã thấy sử dụng canvas gần như là flash cách đây 7 năm và vào thời điểm tức là 9 được phân phối rộng rãi đủ để canvas là một tùy chọn khả thi, Flash sẽ giới thiệu tính năng tăng tốc phần cứng 3d và có thể là phần cứng.


12
Nếu Adobe không thực hiện hành động của họ, Flash sẽ được thay thế bằng HTML5 và cá nhân tôi sẽ không rơi nước mắt.
Simurr

@Simuri - Tôi đồng ý. Tôi đã sử dụng công cụ Flex của họ một cách chuyên nghiệp và so với cách Sun quản lý Java, tôi nói rằng Adobe còn ... cẩu thả hơn nhiều (vì không có từ nào hay hơn).
weiji

2
Tôi chắc chắn đồng ý rằng Adobe cần phải có được hành động của họ với nhau. Nhưng HTML5 rõ ràng chỉ là từ thông dụng mới nhất (như AJAX, Web2.0 trước đây) và không phải là một công nghệ thực sự mà bạn muốn ra ngoài và sử dụng ngay bây giờ.
Iain

1
Tôi không đồng ý. Với các thông báo gần đây của Microsoft về IE9 bao gồm các công nghệ HTML5, điều duy nhất thực sự thiếu là một IDE tốt. Và tôi đảm bảo với bạn rằng những người đứng sau cả Dreamweaver và Visual Studio đang cố gắng tìm ra điều đó. Đây có thể là những ngày đầu, nhưng đã đến lúc bắt đầu suy nghĩ về việc sử dụng các công nghệ này - và thiết lập các thực tiễn tốt nhất - bây giờ.
Rylee Corradini

@Simuri quan tâm giải thích tại sao? Adobe không hoàn hảo nhưng dường như có sự thù địch không đáng có đối với Flash (theo cách mà một số người mang theo bạn sẽ nghĩ Flash đã đánh cắp tiền ăn trưa của họ ở trường). Nắm bắt lớn nhất mà tôi có với HTML5 là sự thiếu nhất quán giữa các broswers, thiếu hiệu năng và tôi không phải là người hâm mộ JavaScript (tôi thích các ngôn ngữ nghiêm ngặt)
Allan

12

Để khám phá xem bạn có thể sử dụng các trình duyệt mới nhất bao xa, tôi và một số đồng nghiệp đã biên dịch chéo cổng Java nguồn mở của Quake II sang Safari / Chrome (đôi khi nó cũng phải hoạt động trên Firefox mặc dù ban đầu nó không, phần lớn là vì lý do hiệu suất). Dự án ở đây: http://code.google.com.vn/p/quake2-gwt-port/

Nó vẫn cần một số sự chăm sóc và cho ăn để khởi động và chạy (ví dụ: WebGL vẫn không được bật theo mặc định trong bất kỳ trình duyệt giao hàng nào), nhưng chúng tôi đã tải lên một video ở đây: http://www.youtube.com/watch?v = XhMN0wlITLk (xin lỗi vì nó rất tối - vấn đề gamma vẫn còn) và bạn có thể xem cuộc trò chuyện Google I / O của chúng tôi tại đây: http://code.google.com.vn/intl/fr-FR/events/io/2010/simes/gwt -html5.html

Tôi không biết sẽ còn bao lâu nữa trước khi chúng ta thực sự phụ thuộc vào tất cả các tính năng trình duyệt mới này (WebGL, WebSocket, âm thanh / video, lưu trữ cục bộ, et al), nhưng nếu tất cả kết hợp với nhau thì nó có thể tạo ra sự khác biệt lớn trong khả năng gửi trò chơi trực tiếp trên web. Nhưng vẫn còn rất nhiều rào cản còn tồn tại (ví dụ: đừng nín thở để Microsoft triển khai WebGL trong IE10).


1
Đó là một bản demo rất tuyệt nhưng về mặt kỹ thuật không phải là một câu trả lời cho câu hỏi. Anh ấy hỏi về HTML5, không phải WebGL; trong khi cả hai thường bị
xáo trộn

6

Lord of Ultima của EA có lẽ là trò chơi dựa trên Javascript / HTML ấn tượng nhất mà tôi từng thấy.

Lưu ý: Đây là một trò chơi chiến lược và không phải là một tựa game hành động, vì vậy trong khi nó có một bản đồ cuộn mượt mà, không có gì ngoài việc nhấp vào các nút khi có tương tác trực tiếp.


Chỉ cần thử nó - khá ấn tượng!
Tim Holt

liên kết bạn cung cấp đưa tôi đến một chỉ mục của trò chơi.
expiredninja

5

"Tôi tò mò những gì có thể và những hạn chế là gì."

Những hạn chế là dựa trên trình duyệt. Nếu bạn đang sử dụng thứ gì đó hấp dẫn như màn đêm Webkit, về cơ bản, không có gì flash có thể làm mà trình duyệt không thể thực hiện được, chẳng hạn như:

  • Đồ họa 2d (thông qua canvas) với tính năng xoay, chia tỷ lệ, độ mờ, v.v.
  • 3d (thông qua canvas và WebGL)
  • Âm thanh (thông qua thẻ âm thanh, mặc dù hiện tại nó hút ngay cả trong các trình duyệt hỗ trợ nó)
  • HTTP (thông qua XMLHTTPRequest)
  • Lưu trữ cục bộ (thông qua API localStorage)
  • Ổ cắm (thông qua Ổ cắm web)
  • SVG
  • Video (thông qua thẻ video)

AFAIK cũng có thể có trong Google Chrome (và nếu không, nó sẽ sớm ra mắt). Âm thanh như một môi trường chơi game hoàn chỉnh với tôi :)

(Tôi đã bao gồm các liên kết đến tất cả nội dung này trong bản nháp đầu tiên của mình nhưng StackExchange sẽ không cho phép tôi đăng chúng vì tôi mới; xin lỗi!)


Tất cả các tính năng đều có, nhưng cách truy cập chúng, Javascript, còn thiếu khi so sánh với ActionScript 3
Bart van Heukelom

Làm sao vậy Hãy nhấn mạnh.
richtaur

1
ActionScript 3 có các lớp mà cá nhân tôi thấy trực quan hơn để sử dụng hơn là tạo mẫu. Nó có kiểu gõ tĩnh (nhưng có thể động như JS nếu cần) cho phép hiệu năng tốt hơn và cho phép IDE tuyệt vời với tự động hoàn thành, cũng như phát hiện nhiều lỗi tại thời gian biên dịch thay vì thời gian chạy. Các gói dễ dàng trộn mã từ nhiều dự án.
Bart van Heukelom

2
Tất cả đều là những lợi thế chủ quan hoặc không liên quan đến chính ngôn ngữ ...
Rushyo

1
Imo, Javascript là một ngôn ngữ tuyệt vời và trôi chảy khi được sử dụng cho các phần hay của nó ^^ Btw, phần "âm thanh hiện đang bị hút" là một vấn đề lớn ngay bây giờ: 7
Oskar Duveborn


4

Một anh chàng ui jquery đang xây dựng một công cụ trò chơi tên là Aves bằng cách sử dụng javascript / html. Video này mô tả một số thách thức anh ấy gặp phải trong quá trình phát triển. Anh ấy đã nói rất nhiều về việc vải bạt chậm như thế nào và hiện tại nó không được tăng tốc.

Bạn cũng có thể tìm thấy cả đống trò chơi được phát triển bằng công cụ Trò chơi hiệu ứng. Mặc dù động cơ trông khá giống hộp cát vào trang web của anh ấy với tất cả các công cụ và tài sản hiện có ở đó.

IMO hạn chế lớn nhất của việc phát triển trò chơi js / html là âm thanh. Thẻ thực hiện các sự kiện khác nhau khôn ngoan trên safari / firefox / chrome tất cả đều phải là phiên bản mới nhất. Cuối cùng tôi đã kiểm tra safari chỉ hoạt động với MP3 và firefox chỉ hoạt động với OGG. Mặc dù nó hoàn toàn khả thi để khắc phục điều này với sự kết hợp của logic máy chủ.

Tôi hiện đang có sở thích viết các trò chơi Flash và không thể thấy tên miền đó bị khắc phục bởi HTML5 (js / css / html) cho đến khi các cổng bắt đầu chấp nhận chúng hoặc các cửa hàng ứng dụng web trực tuyến.


4

văn bản thay thế

Tương phản

Trò chơi này được tạo ra một cách tỉ mỉ bằng máu, mồ hôi, nước mắt và HTML5. Thư viện biến đổi ma trận lõi được tạo ra dưới dạng Matrix.js . Ngoài ra, nhiều phần mở rộng ngôn ngữ cốt lõi, các họa tiết, âm thanh và thư viện canvas đang hoạt động trên Nền tảng trò chơi Pixie .

Không có Flash, tất cả HTML5 Canvas và Audio. Hoạt động tốt nhất trong Chrome.


4

Bạn thực sự phải kiểm tra thư viện CAAT - thật tuyệt vời! Đó là một thư viện phối cảnh (ví dụ thing.addchild / thing2.removechild) cho canvas.

Bản demo này đã thổi tôi đi, cùng với trò chơi cũng có trên trang đó: http://labs.hyperandroid.com/animation

Đến nỗi tôi đã chuyển qua trò chơi của chúng tôi để sử dụng nó và tôi chỉ mất một đêm.

Tham gia, trận đấu bóng tuyết nhiều người chơi http://holiday2010.ogilvy.com

Vì vậy, tôi đã cố gắng cải thiện lirary và thêm lại vào đó: http://github.com/encedayitwillmake/CAAT-Hello

Có sẵn trên github: http://github.com/encedayitwillmake/CAAT-Hello/tree/circlepack



2

Google Pacman phải là một trong những trò chơi JS / HTML ấn tượng hơn mà tôi đã xem (được cấp, đó là trò chơi duy nhất tôi đã xem, nhưng nó vẫn thực sự ấn tượng :)

Vị trí mã nguồn


3
Tôi không tin là HTML5, chỉ là DHTML. Cộng với âm thanh được thực hiện thông qua Flash. Đây là tất cả để có được khả năng tương thích tối đa.
Iain



2

Tôi vừa hoàn thành việc chuyển trò chơi Chiến lược không gian của mình từ Silverlight / C # sang HTML5 / Javascript / Canvas thuần túy:

Astriarch - Người cai trị các vì sao

Đây là một trò chơi 2D và đồ họa rất đơn giản, vì vậy nó rất thích sử dụng khung vẽ vì không có nhiều bức tranh đang diễn ra. Điều đó đang được nói, tôi ấn tượng với những gì một số trò chơi hoạt hình khác đang làm ngoài kia với cùng một công nghệ. Giống như những chú chim giận dữ tại cửa hàng web chrome: Angry Birds , bạn cũng có thể muốn xem một số trò chơi khác trong cửa hàng Chrome Web để biết thêm ví dụ.

Một lý do khiến tôi chuyển trò chơi của mình là tôi muốn nó có thể chạy trên máy tính bảng / thiết bị di động mà không phải mã hóa lại toàn bộ trong Java hoặc Objective C. iOS và Android đều có các điều khiển 'WebView' để làm cho việc này dễ dàng hơn, nhưng Tôi đã gặp rắc rối trong một chút mày mò xung quanh tôi đã làm với nó (iOS yêu cầu tất cả tài sản của bạn phải ở trong một thư mục theo như tôi đã thấy).

Loại yêu cầu đa nền tảng này là một lý do chính đáng tại sao một số người chuyển khỏi Flash và hướng tới HTML5, nhưng nhược điểm là bạn phải thử nghiệm trên N trình duyệt và phiên bản khác nhau và có tất cả các vấn đề đau đầu liên quan đến phát triển web điển hình. Các vấn đề này được giảm bớt bởi các thư viện như jQuery và một số thư viện / nền tảng trò chơi HTML5 khác được đề cập ở đây ( ImpactJS là một trong những điều tôi đã thấy nhưng chưa thử). Ngoài ra, những vấn đề này sẽ không còn là vấn đề khi FireFox 7 không hoạt động và IE 9+ trở nên phổ biến hơn.

Nếu bạn quan tâm đến một số vấn đề tôi gặp phải khi chuyển từ Silverlight sang HTML5 Canvas, bạn nên xem bài đăng trên blog của tôi ở đây: Chuyển ứng dụng Silverlight sang javascript bằng thẻ HTML5 Canvas


2

Dưới đây là 3 trò chơi tuyệt vời sử dụng công cụ ImpactJS .

Impact là một Công cụ trò chơi JavaScript cho phép bạn phát triển các trò chơi HTML5 tuyệt đẹp cho trình duyệt trên máy tính để bàn và thiết bị di động.

Nếu bạn hiện không chắc chắn về những gì bạn có thể làm với HTML5, tôi sẽ nói đây là những ví dụ tốt nhất. Hãy ghi nhớ rằng vì đó là một chủ đề nóng, lĩnh vực này đang thay đổi nhanh chóng!


Loại Z

Một Space Shoot'em'Up nơi bạn gõ để bắn.

Biolab

Chiến đấu theo cách của bạn thông qua một Biolab bị nhiễm bệnh trong Jump'n'Run này. Sử dụng Súng Plasma của bạn để bắn mọi thứ di chuyển! Có 3 cấp độ để khám phá và 6 loại kẻ thù để chiến đấu.

Sinh vật và lâu đài

Một trò chơi giải đố hành động trong đó bạn giúp một thợ săn kho báu trẻ tuổi ăn cắp số lượng lớn kho báu từ một lâu đài thời trung cổ.




0

Một khung phát triển HTML5 thực sự thú vị mà tôi mới tình cờ phát hiện ra là Sencha. Nó chủ yếu dành cho các thiết bị cầm tay / cảm ứng, nhưng những gì sẽ không dựa trên cảm ứng một vài năm nữa? Dưới đây là một số bản demo hấp dẫn, bao gồm một trò chơi bài:

http://www.sencha.com/products/touch/demos.php


0

Dưới đây là một số trò chơi HTML5 trên Effects Games ... thậm chí có những dự án mà bạn có thể tham gia. Đã giết thời gian giữa các biên dịch chủ yếu với Crystal Galaxy Demo của họ



0

Hãy thử Private Joe cho một game bắn súng arcade 2d đầy đủ

nếu bạn muốn thử các trò chơi được tối ưu hóa cho thiết bị di động, hãy đến marketJS

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.