Example process of createjs mini game development

Implementation of the overall idea of ​​the game

1. Implement a seamless background image to simulate the state of the car accelerating

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;//创建一个背景副本，无缝连接var copyy = -bg.height;this.copy = new createjs.Bitmap(bg);this.copy.x = 0;this.copy.y = copyy;  //在画布上y轴的坐标为负的背景图长//使用createjs的tick函数，逐帧刷新舞台createjs.Ticker.addEventListener("tick", tick);function tick(e) {   if (e.paused !== 1) {//舞台逐帧逻辑处理函数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);
    }          
}

2. Draw obstacles randomly

Since there will definitely be many obstacles on a runway For obstacles that exceed the screen, we need to perform 'resource recovery', otherwise the game will become increasingly laggy later on.

// 删除越界的元素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 3 tracks in total. We cannot have 3 props appear on the horizontal line at the same time, so we will randomly pick 1 to 2 values ​​​​to draw obstacles. We should have parameters to control the difficulty of all games, so that when the game is about to go online, the boss will feel that the game is too difficult after experiencing it... which would be very embarrassing. Therefore, we will set the proportion of acceleration objects, deceleration objects, and bombs. This proportion 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 <= 5)) {//绘制加速道具} else if ((type >= 6) && (type <= 10)) {//绘制减速道具        }
    }

After the obstacles are drawn for the first time, the next obstacle will be drawn at a random time.

var time = (parseInt(3 * Math.random()) + 1);  //随机取1～3整数// 随机时间绘制障碍物setTimeout(function () {
    that.propsTmp = [];  //清空    that.drawObstacle(obj);
}, time * 400);  //400ms ~ 1200ms

3. Collision detection

We use an array to store the car’s Rectangular area, the rectangular area occupied by obstacles, loops through the array at each tick to see if there is overlap. If there is overlap, a collision has occurred.

Some little knowledge of createjs:

1. Pause and resume stage rendering

createjs.Ticker.addEventListener(“tick”, tick); 
function tick(e) { if (e.paused === 1) { //处理     }
}     
createjs.Ticker.paused = 1; //在函数任何地方调用这个，则会暂停tick里面的处理 createjs.Ticker.paused = 0; //恢复游戏

2. Because the car will have the effect of accelerating, decelerating, and popping bubbles. Therefore, we draw these effects in the same container to facilitate unified management. We set the name attribute for these effects, and then we can directly use getChildByName to obtain the object.

container.name = ‘role’; //设置name值car = this.stage.getChildByName(“role”);  //使用name值方便获取到该对象

3. Preload preload (preload of createjs is very practical)

I wrote the preload myself at first, and then I discovered createjs There is cross-domain processing for images. It is more troublesome to process cross-domain img by yourself, so we directly use the preloading 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);
//资源加载成功后,进行处理
function handleComplete() {
   var tyre = queue.getResult('tyre');  //拿到加载成功后的img
}

Generally when making a game, we usually build a game class to host it. The following is a normal interface for the game:

;(function () {function CarGame(){}
    CarGame.prototype = {
        init:function(manifest) {this.preLoad(manifest);  //资源预加载//时间倒计时this.prepare(3, 3);  //倒计时3秒this.bindEvent(); 
        },
        render:function() {           this.drawBg(bg1);           this.drawRole(car, effbomb, effquick);           this.drawObstacle(obj);
        },//在游戏结束的时候批量销毁destroy:function(){//移除tick事件createjs.Ticker.removeEventListener("tick", this.tick);//暂停里程，倒计时clearInterval(this.changem);
            clearTimeout(this.gametime);
        }，//由于期间用户可能切出程序进行其他操作，因此都需要一个暂停的接口pause:function() {//暂停里程，倒计时clearInterval(this.changem);
            clearTimeout(this.gametime);//暂停页面滚动createjs.Ticker.paused = 1;
        },//重新开始游戏reStart:function(){           this.destroy();           this.init(manifest);
        },
        gameOver:function(){           //显示爆炸效果   var car = this.stage.getChildByName("role");
           car.getChildByName('bomb').visible = true;
           car.getChildByName('quick').visible = false;           this.destroy();
        }
    }
})()

The above is the detailed content of Example process of createjs mini game development. For more information, please follow other related articles on the PHP Chinese website!