站長資訊網(wǎng)游戲整體思路實現(xiàn)
1. 實現(xiàn)一個無縫連接的背景圖，模擬出汽車在加速的狀態(tài)
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;//創(chuàng)建一個背景副本，無縫連接var copyy = -bg.height;this.copy = new createjs.Bitmap(bg);this.copy.x = 0;this.copy.y = copyy; //在畫布上y軸的坐標為負的背景圖長//使用createjs的tick函數(shù)，逐幀刷新舞臺createjs.Ticker.addEventListener("tick", tick);function tick(e) { if (e.paused !== 1) {//舞臺逐幀邏輯處理函數(shù)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條賽道，我們不能出現(xiàn)3個道具同時出現(xiàn)在水平線上，因此我們會隨機取1～2個值繪制障礙物。所有游戲我們都應該有參數(shù)去控制它的難易程度，免得臨上線的時候，老板體驗之后覺得游戲太難了……那就非常地尷尬了。 因此，我們會設置加速物體，減速物體，炸彈出現(xiàn)的比例，后期可以調整這個比例來設置游戲的難易程度。
var num = parseInt(2 * Math.random()) + 1, i;for (i = 0; i < num; i++) {var type = parseInt(10 * Math.random()) + 1;// 設置道具出現(xiàn)比例if (type == 1) {/繪制炸彈 } else if ((type >= 2) && (type <= 5)) {//繪制加速道具} else if ((type >= 6) && (type <= 10)) {//繪制減速道具 } }
第一次繪制完障礙物之后，會隨機時間繪制下一次的障礙物。
var time = (parseInt(3 * Math.random()) + 1); //隨機取1～3整數(shù)// 隨機時間繪制障礙物setTimeout(function () { that.propsTmp = []; //清空 that.drawObstacle(obj); }, time * 400); //400ms ~ 1200ms
3.碰撞檢測
我們用一個數(shù)組來存放汽車占的矩形區(qū)域，障礙物占的矩形區(qū)域，在每一次tick的時候循環(huán)遍歷數(shù)組，看是否有重疊的，若有重疊，則發(fā)生了碰撞。
createjs的一些小知識：
1. 暫停和恢復舞臺渲染
createjs.Ticker.addEventListener(“tick”, tick); function tick(e) { if (e.paused === 1) { //處理 } } createjs.Ticker.paused = 1; //在函數(shù)任何地方調用這個，則會暫停tick里面的處理 createjs.Ticker.paused = 0; //恢復游戲
2. 由于汽車會有加速，減速，彈氣泡的效果。因此我們把這幾個效果繪制在同一個container中，方便統(tǒng)一管理,對這些效果設置name屬性，之后可以直接使用getChildByName獲取到該對象。
container.name = ‘role’; //設置name值car = this.stage.getChildByName(“role”); //使用name值方便獲取到該對象
3. 預加載 preload （createjs 的 preload 非常的實用）
一開始是自己寫的預加載，后來發(fā)現(xiàn)createjs里面對圖片是有跨域處理的，自己處理跨域的img就比較麻煩，所以直接使用createjs的預加載。
//放置靜態(tài)資源的數(shù)組 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(); } } })()
