Example Analysis of createjs Mini Game Development in javascript

This article mainly introduces the example analysis of createjs Mini Game development in javascript, which is very detailed and has certain reference value. Interested friends must finish reading it!

1. Realize a seamless background picture to simulate the acceleration state of the car.

This.backdrop = new createjs.Bitmap (bg); this.backdrop.x = 0polithis.backdrop.y = 0polithis.stage.addChild (that.backdrop); this.w = bg.width;this.h = bg.height;// create a background copy that seamlessly connects var copyy =-bg.height;this.copy = new createjs.Bitmap (bg); this.copy.x = 0transthis.copy.y = copyy / / background image length with negative y-axis coordinates on the canvas / / use createjs's tick function to refresh the stage createjs.Ticker.addEventListener ("tick", tick) frame by frame; function tick (e) {if (e.paused! = = 1) {/ / 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 >-copyy-100) {that.copy.y = copyy + that.backdrop.y;} that.stage.update (e);}}

two。 Randomly draw obstacles

As there are bound to be many obstacles on a runway, we have to "recycle" the obstacles beyond the screen, otherwise the game will become more and more stuttered at the back of the game.

/ / Delete out-of-bounds elements 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 three tracks, we can't have three props on the horizontal line at the same time, so we will randomly take 1-2 values to draw obstacles. We should have parameters to control the difficulty of all games, so that the boss will not feel that the game is too difficult after the experience. That would be very embarrassing. Therefore, we will set the proportion of accelerating objects, decelerating objects, and bombs, which can be adjusted later to set the difficulty of the game.

Var num = parseInt (2 * Math.random ()) + 1, I for (I = 0; I)

< num; i++) {var type = parseInt(10 * Math.random()) + 1;// 设置道具出现比例if (type == 1) {/绘制炸弹 } else if ((type >

= 2) & (type = 6) & & (type