Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "how to use html5 to achieve Angry Birds". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "how to use html5 to achieve Angry Birds" can help you solve the problem.

Simply use the Mini Game framework, create a canvas for you, and use double buffer's canves

The main class diagrams are as follows:

The framework defines the GameObject base class, and every active part in the game can inherit it. It also defines the VisualGameObject class, which inherits from the GameObject class and adds draw methods. The visible parts in the game can inherit from it and implement their own draw methods. The draw method has parameters, which is the context of canvas. All GameObject is managed by GameObjectManager, all custom GameObject subclass objects need to be added to GameObjectManager, it has a draw method will be called regularly, if called every 30 seconds, then your game is designed to be 30FPS. This method calls the draw method (if any) for all the GameObject it manages, and implements the scheduled redrawing of all GameObject, which is the main loop in game design. It functions like a message loop in windows programming.

With this framework, all you have to do is inherit VisualGameObject, implement the draw method to draw bosom friends, instantiate it, and add it to GameObjectManager.

2.Sprite sheet and Animition

Sprite sheet is the spirit watch.

The main principles are summarized as follows:

Define the SpriteSheet class, which is responsible for cutting out the small images we need from a large image. Make all the pictures that are important to your game into a large picture to improve performance. Multiple small pictures mean that the client needs to initiate multiple web request, each http request contains head,tcp,ip and so on contains head, reducing the number of requests means less data traffic, you know this benefit. It seems that websocket in html5 uses this principle to improve system throughput, upgrade http into websocket, and then all two-way communications transmit data directly, requiring at least two bytes of header.

Animation class is responsible for stitching each cut out of the small picture into animation, each small picture is a frame, each frame defines a duration, each frame shows the duration finished, then show the next frame, and then cycle, it looks like a continuous animation, in fact deceives your eyes.

3.box2D

With the popularity of AngryBird, this library has also entered the vision of the majority of developers. Now that there are too many articles about this library, I will not talk about it. I will only write a few key points:

The box2D source code is developed using C++ and can be downloaded to the latest version and documentation, and it port to various platforms, such as java,c#,flash,javascript. I am using box2Dweb, this javascript library is from the actionacript library port, can be downloaded from.

Seth Ladd has written several classic entry-level articles:

The scope of application of this library is between a few meters and dozens of meters, that is, the scope of application of Newton's laws (excluding celestial motion). For the motion of microscopic ions, it is not appropriate to use this library, and the range is too large to be accurate.

If the speed is too fast, you can cross. This is the one I have tested. if you give the bird too much force and make it go too fast, it can pass through the wood. The reason is that every 60 seconds (configurable) of box2D's library is a step, which calculates where each rigid body (Rigid body) should be at the end of each step. If there is an overlap, it is assumed that there will be a collision in this step, will trigger a collision event, and modify the position of the rigid body so that it does not overlap, but if one rigid body is too fast, another rigid body that has been successfully crossed at the end of the step Then the collision can not be detected and the crossing is realized.

4.Audio

In html5, audio is very simple to implement

This.getAudio=function (id) {

If (this.audios [id] = = undefined) {

This.audios [id] = new Audio ()

This.audios [id] .src = "" + id

This.audios.load ()

}

Return this.audios [id]

}

Var audio=this.getAudio ("title_theme.mp3")

Audio.loop=true

Audio.play ()

As a windows platform programmer, I found that web is different from windows desktop applications in handling events. When a desktop program handles mouse or keyboard events, it is enough to register an event handling method, which is called and executed when the event occurs. But web is a little different. When you join your game, 30FPS will only get a chance to execute your program in 30 seconds, but in this short time of 30 seconds, there may have been several mouse and keyboard events, all of which need to record the event type and status when the event happens. when the program gets the opportunity to execute, read these records, deal with events, and delete records.

That's all for "how to use html5 to implement Angry Birds". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.