如何开始在 Chrome 上制作《愤怒的小鸟》等游戏
据说基于浏览器的应用程序是使用 Canvas 2D 或 Web 完成的GL。
我尝试使用“检查元素”按钮使用 chrome 查看源代码,但我的 chrome 每次都会崩溃。
我只是想找出如何开始开发如此出色的游戏。寻找在线资源、书籍和针对初学者的具体技巧。
The browser based app is said to be done using Canvas 2D or Web GL.
I tried to view source using chrome by using "Inspect Element" button, but my chrome crashes each time.
I am just trying to find out how one can begin to develop such awesome games. Looking for pointers to online resources,books, and specific tips for beginners.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(5)
如果您想要一本书,Foundation HTML5 Canvas: For Games and Entertainment 刚刚出版。它相当基础,但如果您对 JavaScript 和 Canvas 完全陌生,它会对您很有用。
节奏更快的介绍是 Mozilla Canvas 教程,非常清晰。
为了掌握从绘制事物到能够与它们交互的过程,我建议我自己编写关于此事的教程,此处。
对于一本关于 Javascript 的一般书籍(无论您以前的经验如何),可能值得阅读 Javascript:好的部分
至于一般建议,我给你 Ira Glass 的话:
If you want a book, Foundation HTML5 Canvas: For Games and Entertainment just came out. It is fairly basic but will be useful to you if you are completely new to JavaScript and Canvas.
A faster-paced introduction would be the Mozilla Canvas tutorial, which is very clear.
To get a grasp on going from drawing things to being able to interact with them, I'd suggest my own tutorials on the matter, here.
For a general book on Javascript (regardless of your prior experience), it is probably worth reading Javascript: The Good Parts
As for general advice, I give you the words of Ira Glass:
当您“查看源代码”(而不是使用“检查元素”)时,第一个元标记显示
“所以我可以得出结论,确实正在使用 WebGL”。 (WebGL 实际上使用了 canvas 元素,所以从技术上来说答案是“Canvas and Web GL”而不是“Canvas or Web GL”。但我猜它并不不使用 javascript canvas 2D API。)
当我使用 Ctrl+Shift+I 并单击“Elements”时,DOM 树显示 id 为“forplay-root”的
一个子
元素。但我不知道如何验证它是否用于 WebGL 或更传统的画布 2D 调用。
学习 WebGL 是一个非常好的学习 WebGL 的网站。特别是,请查看经验教训。
我不知道为什么该页面会使您的 Chrome 页面崩溃。您使用的是全新版本的 Chrome 吗?发布版本直到最近才支持 WebGL。 (但这并不能解释崩溃......您只是看不到该操作。)您可能需要提交 Chrome 的错误报告。
When you "view source" (as opposed to using "Inspect Element"), the first meta tag says
So I would conclude that WebGL is indeed being used. (WebGL in fact uses the canvas element, so the answer is technically "Canvas and Web GL" rather than "Canvas or Web GL". But I'm guessing it doesn't use the javascript canvas 2D API.)
When I use Ctrl+Shift+I and click 'Elements', the DOM tree shows that the
<div>
whose id is "forplay-root" has a child<canvas>
element. But I don't know how to verify if it is being used for WebGL or more conventional canvas 2D calls.A very nice site for learning WebGL is Learning WebGL. In particular, take a look at The Lessons.
I don't know why the page crashes your Chrome page. Are you using a brand-new version of Chrome? The release version didn't support WebGL till fairly recently. (But that wouldn't explain the crash... you just wouldn't see the action.) You may need to submit a bug report for Chrome.
愤怒的小鸟移植是使用 GWT ForPlay 库 http://code.google.com/p/forplay 完成的/
它的奇妙之处在于,您可以用 Java 编写游戏,并从同一源为 Android、WebGL 和 Flash 进行编译。这真是太棒了。请查看 ForPlay 上的 Google I/O 2011 演示,了解更多详细信息 http://www.youtube.com /watch?v=F_sbusEUz5w
The Angry Birds port was done using the GWT ForPlay library http://code.google.com/p/forplay/
The fancy thing about it is that you can write your game in Java and compile it for Android, WebGL and Flash from the same source. Which is pretty awesome. Check out the Google I/O 2011 presentation on ForPlay for more details http://www.youtube.com/watch?v=F_sbusEUz5w
对于这样的游戏,我会开始研究如何拥有相同的物理特性,因此 Box2D 是最好的起点。
http://box2d.org/
有各种 javascript 端口可供查看。
For a game like that, I would start looking at how to have the same physics, so Box2D is the best starting point.
http://box2d.org/
There are various javascript ports to look at.
该移植可以使用流行的 libgdx 跨平台库来完成。它用 java 编码,但允许您在桌面上调试和玩游戏。您基本上在核心项目中编写一次代码,然后它就会链接到其他四个项目 - dektop、Html5、android 和 iOS。 Html5版本是借助gwt完成的,而iOS版本是借助robovm完成的。您可以在这里查看:libgdx.badlogicgames.com。
The port might be done using the popular libgdx cross-platform library. Its coded in java, but allows you to debug and play the game in your desktop. You basically write the code once in a core-project and it gets linked to four other projects-dektop, Html5, android and iOS. The Html5 version is done with the help of gwt, while the iOS one is done with robovm. You can have a look at it here: libgdx.badlogicgames.com.