遊戲整體想法實現
1. 實現一個無縫連接的背景圖，模擬出汽車在加速的狀態
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. 隨機繪製障礙物
由於一條跑道一定會有許多障礙物，對於超出屏幕的障礙物我們要進行'資源回收'，否則遊戲到後面會越來越卡頓。
// 删除越界的元素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;
}
}
}總共有3條賽道，我們不能出現3個道具同時出現在水平線上，因此我們會隨機取1～2個值繪製障礙物。所有遊戲我們都應該有參數去控制它的難易度，免得臨上線的時候，老闆體驗之後覺得遊戲太難了……那就非常地尷尬了。 因此，我們會設定加速物體，減速物體，炸彈出現的比例，後期可以調整這個比例來設定遊戲的難易度。
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)) {//绘制减速道具 }
}第一次畫完障礙物之後，會隨機時間繪製下一次的障礙物。
var time = (parseInt(3 * Math.random()) + 1); //随机取1～3整数// 随机时间绘制障碍物setTimeout(function () {
that.propsTmp = []; //清空 that.drawObstacle(obj);
}, time * 400); //400ms ~ 1200ms
3.碰撞偵測
我們用一個陣列來存放汽車所佔的矩形區域，障礙物佔的矩形區域，在每一次tick的時候循環遍歷數組，看是否有重疊的，若有重疊，則發生了碰撞。
createjs的一些小知識：
1. 暫停與復原舞台渲染
createjs.Ticker.addEventListener(“tick”, tick);
function tick(e) { if (e.paused === 1) { //处理 }
}
createjs.Ticker.paused = 1; //在函数任何地方调用这个，则会暂停tick里面的处理 createjs.Ticker.paused = 0; //恢复游戏
2. 由於汽車會有加速，減速，彈氣泡的效果。因此我們把這幾個效果繪製在同一個container中，方便統一管理,對這些效果設定name屬性，之後可以直接使用getChildByName取得到該物件。
container.name = ‘role’; //设置name值car = this.stage.getChildByName(“role”); //使用name值方便获取到该对象
3. 預先載入preload （createjs 的preload 非常的實用）
一開始是自己寫的預加載，後來發現createjs裡面對圖片是有跨域處理的，自己處理跨域的img就比較麻煩，所以直接使用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
}
#一般做一個遊戲，我們正常會建立一個遊戲類別來承載。 下面是一個遊戲正常有的介面:
;(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();
}
}
})()
以上是createjs 小遊戲開發的實例過程的詳細內容。更多資訊請關注PHP中文網其他相關文章！
