Createjs game development practices and createjs practices

Createjs game development practices and createjs practices

[Reprinted with the source]

Followed by the previous article createjs entry: http://www.cnblogs.com/beidan/p/7055422.html

Here is an article about practical games.

 

Overall game thinking implementation

1. Implement a seamless background image to simulate the acceleration status of the vehicle

This. backdrop = new createjs. bitmap (bg); this. backdrop. x = 0; this. backdrop. y = 0; this. stage. addChild (that. backdrop); this. w = bg. width; this. h = bg. height; // create a background copy and seamlessly connect to var copyy =-bg. height; this. copy = new createjs. bitmap (bg); this. copy. x = 0; this. copy. y = copyy; // The coordinates of the y axis on the canvas are negative background image lengths. // use the tick function of createjs to refresh the stage createjs frame by frame. ticker. addEventListener ("tick", tick); function tick (e) {if (e. paused! = 1) {// The stage frame-by-frame logic processing function that. backdrop. y = that. speed + that. backdrop. y; that. copy. y = that. speed + that. copy. y; if (that. copy. y>-40) {that. backdrop. y = that. copy. y + copyy;} if (that. copy. y & gt;-copyy-100) {that. copy. y = copyy + that. backdrop. y;} that. stage. update (e );}}

 

2. randomly draw obstacles

Because a runway will certainly have many obstacles, we need to 'reclaim resources 'for obstacles that exceed the screen, otherwise the game will get stuck more and more.

// Delete the out-of-bounds element for (var I = 0, flag = true, len = that. props. length; I <len; flag? I ++: I) {if (that. props [I]) {if (that. props [I]. y> height + 300) {that. stage. removeChild (that. props [I]); that. props. splice (I, 1); flag = false;} else {flag = true ;}}}

There are a total of 3 tracks, so we cannot see 3 items simultaneously on the horizontal line, so we will randomly choose 1 ~ Draw obstacles with two values. We should have parameters to control the difficulty of all games, so that the boss may feel that the game is too difficult when going online ...... That's very embarrassing. Therefore, we will set the proportion of accelerated objects, slowing down objects, and bombs. Later we can adjust this proportion to set the difficulty level of the game.

Var num = parseInt (2 * Math. random () + 1, I; for (I = 0; I <num; I ++) {var type = parseInt (10 * Math. random () + 1; // set the ratio of items to appear if (type = 1) {/draw bomb} else if (type> = 2) & (type <= 5) {// draw accelerated item} else if (type> = 6) & (type <= 10 )) {// draw a deceleration prop }}

After the obstacle is drawn for the first time, the next obstacle will be drawn at random time.

Var time = (parseInt (3 * Math. random () + 1); // random 1 ~ 3 integer // draw obstacle setTimeout (function () {that. propsTmp = []; // clear that. drawObstacle (obj) ;}, time * 400); // 400 ms ~ 1200 ms

 

3. Collision Detection

We use an array to store the rectangular area occupied by cars. The rectangular area occupied by obstacles traverses the array cyclically at each tick to check whether there are overlapping areas. If there is overlap, A collision occurs.

 

Some tips about createjs:

1. Pause and resume stage Rendering

Createjs. ticker. addEventListener ("tick", tick); function tick (e) {if (e. paused = 1) {// processing} createjs. ticker. paused = 1; // call this function anywhere, the processing of createjs in tick will be suspended. ticker. paused = 0; // resume the game

 

2. Because the car will accelerate, slow down, and play bubbles. Therefore, we plot these effects in the same iner to facilitate unified management. After setting the name attribute for these effects, we can directly use getChildByName to obtain the object.

Container. name = 'role'; // set the name value to car = this. stage. getChildByName ("role"); // use the name value to obtain the object.

 

3. Pre-load preload (the preload of createjs is very practical)

Initially, it was a self-written pre-load. Later, it was found that there was cross-origin processing for images in createjs, and it was quite troublesome to process cross-origin img. Therefore, we directly used the pre-loading of createjs.

// Var manifest = [{src: _ uri ('. /images/car_prop2_tyre@2x.png '), id: 'tyre'}]; var queue = new createjs. loadQueue (); queue. on ('complete', handleComplete, this); queue. loadManifest (manifest); // After the resource is loaded successfully, process function handleComplete () {var tyre = queue. getResult ('tyre'); // get the img after successful loading}

 

 

Generally, when we make a game, we normally build a game class to carry it. The following is a normal game interface:

; (Function () {function CarGame () {} CarGame. prototype = {init: function (manifest) {this. preLoad (manifest); // resource preLoad // time countdown this. prepare (3, 3); // countdown 3 seconds this. bindEvent () ;}, render: function () {this. drawBg (bg1); this. drawRole (car, effbomb, effquick); this. drawObstacle (obj) ;}, // batch destroy: function () at the end of the game {// remove the tick event createjs. ticker. removeEventListener ("tick", this. tick); // pause the mileage and countdown clearInterval (this. changem); clearTimeout (this. gametime) ;}, // because the user may switch out of the program for other operations during the period, a pause interface pause: function () {// pause the mileage, countdown clearInterval (this. changem); clearTimeout (this. gametime); // pause Page scrolling createjs. ticker. paused = 1 ;}, // reStart the game reStart: function () {this. destroy (); this. init (manifest) ;}, gameOver: function () {// display the explosive effect var car = this. stage. getChildByName ("role"); car. getChildByName ('bomb '). visible = true; car. getChildByName ('quick '). visible = false; this. destroy ();}}})()