优秀的基于Javascript / HTML5的游戏示例[关闭]


37

现在,Flash已基本上被HTML5元素(视频,音频,画布等)取代了,是否有基于完全开放标准(即Javascript,HTML和CSS)构建的基于Web的游戏的良好示例?我看到了很多纯HTML5实现的示例,这些实现曾经只在Flash中出现过(例如此处的内容:http : //www.html5rocks.com/),但游戏数量却很少,而这个领域似乎仍然由Flash主导。我很好奇有什么可能,有什么限制。


6
我建议您删除第一行-评分最高的答案不能回答您的问题,但会因您的前提而冒犯;)
oberhamsi 2011年

Answers:


14

关于HTML5的炒作很多,但要说Flash很大程度上已被它取代,这是一种夸大其词。尽管视频和音频标签可能会受到关注,但游戏将成为一个长期存在的领域,这不仅是因为更好的工具和性能,而且还因为围绕分发Swf文件构建了业务基础架构,这并不容易适应HTML和js。我所见过的使用canvas的html5游戏大致上是7年前的Flash,而到那时ie9的分布范围足够广,以至于canvas是一个可行的选择,Flash将已经引入了计划中的3d以及可能的硬件加速功能。


12
如果Adobe不采取行动,Flash将被HTML5取代,我个人不会哭。
Simurr 2010年

@Simuri-我有点同意。我已经专业地使用了Flex的东西,并且与Sun管理Java的方式相比,我想说Adobe更加……草率(因为缺少更好的词汇)。
weiji

2
我当然同意Adobe需要采取行动。但是HTML5显然只是最新的流行词(例如以前的AJAX,Web2.0),而不是您现在想使用的真正技术。
伊恩

1
我不同意。随着Microsoft最近发布的有关IE9包含HTML5技术的公告,唯一真正缺少的是一个不错的IDE。我向您保证,Dreamweaver和Visual Studio背后的人们都在努力弄清楚这一点。这可能还处于初期,但是现在是开始考虑使用这些技术并建立最佳实践的时候了。
Rylee Corradini 2010年

@Simuri关心解释原因?Adobe远非完美,但似乎对Flash毫无道理的敌意(顺便提一句,有人会认为Flash在学校偷了他们的午餐钱)。我对HTML5的最大抱怨是浏览器之间缺乏一致性,性能不足,而且我也不喜欢JavaScript(我喜欢严格的语言)
艾伦(Allan

12

为了探究最新浏览器的使用范围,我和一些同事将Quake II的开源Java端口交叉编译为Safari / Chrome(它应该也可以在Firefox上运行, (最初并不是因为性能原因)。该项目位于:http : //code.google.com/p/quake2-gwt-port/

它仍然需要一些注意和投入才能启动和运行(例如,在任何运输浏览器中默认情况下仍未默认启用WebGL),但我们在此处上传了一个视频:http : //www.youtube.com/watch?v = XhMN0wlITLk(对不起,它太黑了-伽马问题仍然存在),您可以在此处查看我们的Google I / O对话:http : //code.google.com/intl/fr-FR/events/io/2010/sessions/gwt -html5.html

我不知道要花多长时间才能实际依赖所有这些新的浏览器功能(WebGL,WebSocket,音频/视频,本地存储等),但如果将它们全部整合在一起,则可能会产生巨大的变化可以直接在网络上发布游戏。但是仍然存在许多障碍(例如,不要让微软屏住呼吸在IE10中实现WebGL)。


1
这是一个非常酷的演示,但从技术上讲并不是该问题的答案。他问的是HTML5,而不是WebGL。尽管这两者通常是混用的,但它们是不同的(例如Internet Explorer正在实现HTML5,但不是WebGL。)
嘲笑2011

6

EA的《创世纪王》可能是我见过的最令人印象深刻的基于Javascript / HTML的游戏。

注意:这是一种策略游戏,而不是动作标题,因此,尽管它具有漂亮的平滑滚动地图,但就直接交互性而言,除了单击按钮之外,没有任何其他功能。


刚刚尝试过-令人印象深刻!
蒂姆·霍尔特

您提供的链接将我带到游戏索引。
expiredninja 2014年

5

“我很好奇这是可能的,局限性是什么。”

这些限制是基于浏览器的。如果您正在使用诸如Webkit夜间之类的热门产品,则Flash基本上无法提供浏览器无法做到的本机功能,例如:

  • 具有旋转,缩放,不透明度等的2d图形(通过画布)。
  • 3d(通过canvas和WebGL)
  • 音频(通过音频标签,尽管当前即使在支持该标签的浏览器中也很烂)
  • HTTP(通过XMLHTTPRequest)
  • 本地存储(通过localStorage API)
  • 套接字(通过Web套接字)
  • SVG
  • 视频(通过视频标签)

AFAIK在Google Chrome浏览器中也可以实现(如果不能,很快就会实现)。对我来说,这听起来像一个完整的游戏环境:)

(我在初稿中包含了所有这些东西的链接,但是由于我是新手,所以StackExchange不允许我发布它们;对不起!)


所有功能均已存在,但与ActionScript 3相比,缺少访问Javascript的方法
Bart van Heukelom 2010年

怎么会这样?请强调。
richtaur

1
ActionScript 3具有类,我个人认为它们比使用原型更直观。它具有静态类型(但可以根据需要与JS一样动态),可以实现更好的性能,并具有出色的自动补全功能,并且可以在编译时而非运行时检测到许多错误。包简化了多个项目中代码的混合。
Bart van Heukelom

2
所有这些都是主观的优势,或者与语言本身无关...
Rushyo 2010年

1
Imo,Javascript是一门很酷而流畅的语言,^^顺便说一句,“音频当前很烂”部分现在是一个主要问题:7
Oskar Duveborn 2012年


4

一个jQuery ui家伙正在使用javascript / html构建一个名为Aves的游戏引擎。该视频描述了他在开发过程中遇到的一些挑战。他谈到了画布的速度有多慢,目前还没有加速。

您还可以找到使用Effect Games引擎开发的大量游戏。尽管该引擎看上去相当沙箱化,但那里拥有所有工具和资产。

IMO开发js / html游戏的最大限制是声音。标记在safari / firefox / chrome中的事件执行方式不同,所有标记都必须是最新版本。最后,我检查了Safari仅适用于MP3,而firefox仅适用于OGG。尽管通过服务器端逻辑的组合来克服这一点是完全可行的。

我目前爱好编写Flash游戏,直到门户网站开始接受它们或Web应用程序商店上线之前,HTML5(js / css / html)才克服了这个领域。



4

您真的必须签出CAAT库-太棒了!这是用于画布的场景图库(例如,thing.addchild / thing2.removechild)。

这个演示使我震惊,页面上也包含了游戏:http : //labs.hyperandroid.com/animation

如此之多,以至于我转而使用自己的游戏来使用它,它只花了我一个晚上。

参加多人雪球大战 http://holiday2010.ogilvy.com

如此之多,以至于我试图改善图书馆,并重新添加内容:http : //github.com/onedayitwillmake/CAAT-Hello

在github上可用:http : //github.com/onedayitwillmake/CAAT-Hello/tree/circlepack



2

Google Pacman必须成为我见过的最令人印象深刻的JS / HTML游戏之一(当然,这是我见过的唯一一个,但仍然非常令人印象深刻:)

源代码位置


3
不是HTML5,而是我相信的DHTML。另外,声音是通过Flash完成的。这都是为了获得最大的兼容性。
伊恩



2

我刚刚完成了将太空战略游戏从Silverlight / C#移植到纯HTML5 / Javascript / Canvas的过程:

星际大帝-星辰的统治者

这是一个2D游戏,在图形上非常简单,因此它非常适合使用画布,因为没有太多绘画工作。话虽这么说,我对其他一些具有相同技术的动画游戏所做的事情印象深刻。就像chrome网络商店中的愤怒的小鸟愤怒的小鸟一样,您可能还想查看Chrome Web商店中的其他一些游戏,以获取更多示例。

我移植游戏的原因之一是我希望该游戏能够在平板电脑/移动设备上运行,而无需重新编写Java或Objective C的整体代码。iOS和Android都具有“ WebView”控件,可以简化此操作,但是我在进行一些修改时遇到了麻烦(就我所知,iOS要求将所有资产都放在一个文件夹中)。

这种跨平台需求是某些人从Flash转向HTML5的一个很好的理由,但是缺点是您必须在N个不同的浏览器和版本上进行测试,并且与典型的Web开发相关联。jQuery之类的库以及此处提到的其他一些HTML5游戏库/平台都减轻了这些问题(ImpactJS是我见过但尚未尝试过的一个)。同样,当FireFox 7退出并且IE 9+变得更加普及时,这些问题也不再是一个大问题。

如果您对我在从Silverlight移植到HTML5 Canvas时遇到的一些问题感兴趣,则应在此处查看我的博客文章:使用HTML5 Canvas标记将Silverlight应用程序移植到javascript


2

这是使用ImpactJS引擎的3种出色游戏。

Impact是一个JavaScript游戏引擎,可让您为台式机和移动浏览器开发出色的HTML5游戏。

如果您目前不确定使用HTML5可以做什么,那么我想说这些是目前最好的例子。但是请记住,因为这是一个热门话题,所以该领域正在快速变化!


Z型

键入您要拍摄的Space Shoot'em'Up。

生物实验室

在“ Jump'n'Run”中与受感染的Biolab搏斗。用您的等离子枪拍摄所有移动的东西!有3个级别可以探索,还有6种类型的敌人可以战斗。

生物与城堡

一个动作益智游戏,您可以在其中帮助年轻的寻宝者从中世纪城堡中窃取大量财宝。







By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.