How to start the game with Angry Birds in Chrome

Question

http://chrome.angrybirds.com/

It is said that a browser-based application runs using Canvas 2D or Web GL.

I tried to view the source using chrome using the "Inspect Element" button, but my chrome is reset every time.

I'm just trying to figure out how to start developing such amazing games. Look for pointers to online resources, books, and specific tips for beginners.

Answer 1

If you need a book, Foundation HTML5 Canvas: for gaming and entertainment has just been released. It is fairly simple, but will be useful if you are completely new to JavaScript and Canvas.

A faster introduction would be a Mozilla Canvas tutorial , which is very clear.

To understand how to move from drawing things to the possibility of interacting with them, I offer my own tutorials on this subject, here .

For a general Javascript book (regardless of your previous experience), it is probably worth reading Javascript: Good Parts

Regarding general advice, I give you the words of Airy Glass:

Nobody talks about this to people who are new, I would like someone to tell me. All of us who are engaged in creativity, we get into it, because we have a good taste. But there is this gap. First, a couple of years you have been doing things, just not so good. He is trying to be good, he has potential, but he is not. But your taste, what got you into the game, is still a killer. And also your taste is why your work disappoints you. A lot of people never go through this stage, they leave. The most people I know who are interesting, the creative work has gone through these years. We know that our work does not have this particular thing that we want to have. We are all experiencing this. And if you are just starting, or you are still at this stage, you should know its normal and most important thing that you can do is do a lot of work. Put yourself on a deadline so that each week you finish one story. It is only through the amount of work that you close this gap, and your work will be as good as your ambition. And it took me more time to do this than any person had ever met. It will take some time. It is normal to take some time. You just have to break through.

Answer 2

When you “look at the source” (as opposed to using the “Check Element”), the first meta tag says

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

So, I would conclude that WebGL is actually used. (WebGL actually uses the canvas element, so the answer is technically “Canvas and Web GL”, not “Canvas or Web GL.” But I assume that it does not use the 2D API for javascript canvas.)

When I use Ctrl + Shift + I and click on "Elements", the DOM tree shows that the <div> whose identifier is "forplay-root" has a child <canvas> . But I don’t know how to check if it is used for WebGL or more ordinary 2D canvas calls.

A very good site for learning WebGL is WebGL Training . In particular, check out The Lessons .

I don’t know why the page crashes from your Chrome page. Are you using a brand new version of Chrome? The release version did not support WebGL until recently. (But that would not explain the failure ... you simply would not see the action.) You may have to send an error report for Chrome.

Answer 3

The Angry Birds port was made using the GWT ForPlay library http://code.google.com/p/forplay/

The most interesting thing is that you can write your game in Java and compile it for Android, WebGL and Flash from the same source. This is pretty amazing. Check out the Google I / O 2011 presentation on ForPlay for more information http://www.youtube.com/watch?v=F_sbusEUz5w

Answer 4

For such a game, I would start to look at how to have the same physics, so Box2D is the best starting point. http://box2d.org/ There are various javascript ports to view.

Answer 5

The port can be executed using the cross-platform library libgdx. Its encoded in java, but allows you to debug and play the game on the desktop. You basically write the code once in the main project, and it is associated with four other projects - dektop, Html5, android and iOS. The Html5 version is run using gwt, and the iOS version is run with robovm. You can look here: libgdx.badlogicgames.com .