Phaser HTML5 canvas Game Engine

First, material

Demo address:

Http://jsfiddle.net/DUN2Y/

Phaser is a canvas-based javascript game engine. To put it bluntly, it is a framework that allows you to achieve animation effects without writing canvas.

Official website address: www. phaser. io

Use the latest version 2.0

var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create, update: update,render:render });

First, create a game world. There are five parameters in total. The first two represent the length and width of the canvas, and Phaser. CANVAS indicates that the image is made based on canvas. If the browser supports webGL, you can write it as Phaser. WEBGL ..

The empty string in the middle represents the canvas ID. If you customize a canvas with id aaa, you can write aaa. Otherwise, the canvas is created in the body by default.

The last four parameters are very easy to understand, that is, the method of the entire game. Before loading, create and update the method. The following describes each method in detail.

function preload() {    game.load.image('sky', 'assets/sky.png');    game.load.image('ground', 'assets/platform.png');    game.load.image('star', 'assets/star.png');    game.load.spritesheet('dude', 'assets/dude.png', 32, 48);}

The preload method generally introduces some resource files, images, and so on. load. spritesheet introduces an animated image, that is, an image with the orientation of every villain. In, 48 represents the starting position of the first azimuth.

Function create () {// set the canvas boundary to a real object, that is, a real object game that can be used to detect collisions and overwrites. physics. setBoundsToWorld (); game. add. sprite (0, 0, 'sky'); // create a group of parts. You can put some components of the same use in a grope to facilitate the management of platforms = game. add. group (); // allows the component to set the gravity configuration platforms. enableBody = true; // The gravity type is arcade platforms. physicsBodyType = Phaser. physics. ARCADE; // create a floor var ground = platforms. create (0, game. world. height-64, 'ground '); // scale the floor to make it adaptive to the canvas size. ground. scale. setTo (2, 2); // when the floor is hit, fix its location ground. body. immovable = true; // create two steps var ledge = platforms. create (400,400, 'ground '); ledge. body. immovable = true; ledge = platforms. create (-150,250, 'ground '); ledge. body. immovable = true; // ledge2.body. setPolygon (62,112,100,120,); // create a villain player = game. add. sprite (32, game. world. height-450, 'dude'); game. physics. enable (player, Phaser. physics. ARCADE); console. log (player. body); // elasticity index player. body. bounce. y = 0.6; // Gravity Index player. body. gravity. y = 400; // whether to allow collision with the canvas boundary player. body. collideWorldBounds = true; // Add an animation player. animations. add ('left', [0, 1, 2, 3], 10, true); player. animations. add ('right', [5, 6, 7, 8], 10, true); stars = game. add. group (); stars. enableBody = true; stars. physicsBodyType = Phaser. physics. ARCADE; for (var I = 0; I <12; I ++) {var star = stars. create (I * 70, 0, "star"); star. body. gravity. y = 400; star. body. bounce. y = 0.7 + Math. random () * 0.2; star. body. collideWorldBounds = true;} cursors = game. input. keyboard. createCursorKeys (); score = game. add. text (12, 12, "score:" + scoreCount + "", {color: "#000"}); // var tilemap = game. add. tilemap ("star", 44,44, 44,44 );}

The add. sprite method has four parameters: x, y, and key,

Key is the id assigned to the proload method when it is introduced, that is, dude.

This method adds a genie element to the game. It can bind events and set parameters such as gravity and elasticity. It is the most common element in the framework.

Function update () {game. physics. arcade. collide (player, platforms); game. physics. arcade. collide (stars, platforms); game. physics. arcade. collide (player, ledge2); game. physics. arcade. overlap (player, stars, function (player, star) {console. log (stars. total); star. kill (); scoreCount ++; score. text = "score:" + scoreCount + ""; if (stars. total = 0) {alert ("congratulation! ") ;}}, Null, this); // recharge the speed player of the genie. body. velocity. x = 0; if (cursors. left. isDown) {// move the player to the left. body. velocity. x =-150; player. animations. play ('left');} else if (cursors. right. isDown) {// move the player right. body. velocity. x = 150; player. animations. play ('right');} else {// static player. animations. stop (); player. frame = 4;} // Allow the player to jump if they are touching the ground. if (cursors. up. isDown & player. body. touching. down) {player. body. velocity. y =-350 ;}}

The update method is mainly used to bind events. For example, collide is used to check whether two elements are collided. The first two parameters are two elements, and the subsequent callback method is triggered.

Overlap, as its name implies, is used to detect whether two elements overlap, that is, whether the people overlap with the stars.

Then add the text for the score display

So far, a simple game has been built.

For specific configuration items, refer to the doc on the official website.

Complete!