如何开始在Chrome上制作像“愤怒的小鸟”这样的游戏

时间:2011-05-11 18:44:22

标签: javascript canvas webgl

http://chrome.angrybirds.com/

基于浏览器的应用据说是使用Canvas 2D或Web GL完成的。

我尝试使用“检查元素”按钮使用chrome查看源代码,但我的Chrome每次都崩溃。

我只是想知道如何开始开发这样棒的游戏。寻找有关初学者的在线资源,书籍和特定提示的指南。

5 个答案:

答案 0 :(得分:11)

如果你想要一本书,Foundation HTML5 Canvas: For Games and Entertainment就出来了。它是相当基础的,但如果您对JavaScript和Canvas完全陌生,它将对您有用。

快节奏的介绍将是Mozilla Canvas tutorial,这是非常明确的。

为了掌握从画画到能够与他们互动的内容,我会就此问题提出自己的教程,here

有关Javascript的一般书籍(无论您以前的经验如何),可能值得一读Javascript: The Good Parts

至于一般建议,我给你拉伊拉玻璃的话:

  

没有人告诉那些人   初学者,我希望有人告诉我。所有   我们得到了创造性工作的人   因为我们有很好的品味。   但是存在这种差距。为了第一   几年你做的东西,它只是   没那么好。它试图变得好,   它有潜力,但事实并非如此。但   你的品味,有你的东西   进入游戏,仍然是杀手锏。和   你的品味是你工作的原因   让你失望。很多人从来没有   过了这个阶段,他们就退出了。最   我认识的人有趣,   创造性的工作经历了多年   这个。我们知道我们的工作没有   这是我们想要的特殊事物   有。我们都经历过这个。而如果   你刚刚开始,或者你是   仍处于这个阶段,你必须知道   它的正常和最重要   你能做的就是做很多工作。   让自己在截止日期前完成   每周你都会完成一个故事。   它只是通过一个卷   你将弥补这一差距的工作,   你的工作将和你的一样好   野心。我花了更长的时间来计算   如何做到这一点比我的任何人   见过面。这需要一段时间。它的   正常需要一段时间。你刚刚   要经过努力。

答案 1 :(得分:3)

当您“查看来源”(而非使用“检查元素”)时,第一个元标记显示

name="gwt:property" content="html.renderer=webgl"

所以我得出结论,确实正在使用WebGL。 (WebGL实际上使用canvas元素,所以答案在技术上是“Canvas Web GL”而不是“Canvas Web GL”。但我猜它没有不要使用javascript canvas 2D API。)

当我使用Ctrl + Shift + I并单击“元素”时,DOM树显示其id为“forplay-root”的<div>具有子<canvas>元素。但我不知道如何验证它是用于WebGL还是更常规的画布2D调用。

学习WebGL的一个非常好的网站是Learning WebGL。请特别注意The Lessons

我不知道为什么该页面会崩溃您的Chrome页面。您使用的是全新版Chrome吗?发布版本直到最近才支持WebGL。 (但这不能解释崩溃......你只是不会看到动作。)你可能需要为Chrome提交错误报告。

答案 2 :(得分:2)

愤怒的小鸟港口是使用GWT ForPlay库http://code.google.com/p/forplay/

完成的

它的奇特之处在于你可以用Java编写游戏并从同一来源为Android,WebGL和Flash编译它。这真是太棒了。有关详细信息http://www.youtube.com/watch?v=F_sbusEUz5w

,请查看有关ForPlay的Google I / O 2011演示文稿

答案 3 :(得分:1)

对于这样的游戏,我会开始研究如何使用相同的物理,因此Box2D是最好的起点。 http://box2d.org/ 有各种各样的javascript端口可供查看。

答案 4 :(得分:0)

可以使用流行的libgdx跨平台库完成端口。它在java中编码,但允许您在桌面上调试和玩游戏。你基本上在核心项目中编写一次代码,并将其链接到其他四个项目-dektop,Html5,android和iOS。 Html5版本是在gwt的帮助下完成的,而iOS版本则是使用robovm完成的。您可以在此处查看:libgdx.badlogicgames.com

相关问题