這篇文章主要介紹javascript中createjs小游戲開(kāi)發(fā)的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

為臺(tái)州等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及臺(tái)州網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、臺(tái)州網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

1. 實(shí)現(xiàn)一個(gè)無(wú)縫連接的背景圖，模擬出汽車在加速的狀態(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)建一個(gè)背景副本，無(wú)縫連接var copyy = -bg.height;this.copy = new createjs.Bitmap(bg);this.copy.x = 0;this.copy.y = copyy;  //在畫(huà)布上y軸的坐標(biāo)為負(fù)的背景圖長(zhǎng)//使用createjs的tick函數(shù)，逐幀刷新舞臺(tái)createjs.Ticker.addEventListener("tick", tick);function tick(e) {   if (e.paused !== 1) {//舞臺(tái)逐幀邏輯處理函數(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. 隨機(jī)繪制障礙物

由于一條跑道肯定會(huì)有很多障礙物，對(duì)于超出屏幕的障礙物我們要進(jìn)行‘資源回收’，否則游戲到后面會(huì)越來(lái)越卡頓。

// 刪除越界的元素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個(gè)道具同時(shí)出現(xiàn)在水平線上，因此我們會(huì)隨機(jī)取1～2個(gè)值繪制障礙物。所有游戲我們都應(yīng)該有參數(shù)去控制它的難易程度，免得臨上線的時(shí)候，老板體驗(yàn)之后覺(jué)得游戲太難了……那就非常地尷尬了。 因此，我們會(huì)設(shè)置加速物體，減速物體，炸彈出現(xiàn)的比例，后期可以調(diào)整這個(gè)比例來(lái)設(shè)置游戲的難易程度。

var num = parseInt(2 * Math.random()) + 1, i;for (i = 0; i < num; i++) {var type = parseInt(10 * Math.random()) + 1;// 設(shè)置道具出現(xiàn)比例if (type == 1) {/繪制炸彈
        } else if ((type >= 2) && (type <= 5)) {//繪制加速道具} else if ((type >= 6) && (type <= 10)) {//繪制減速道具        }
    }

第一次繪制完障礙物之后，會(huì)隨機(jī)時(shí)間繪制下一次的障礙物。

var time = (parseInt(3 * Math.random()) + 1);  //隨機(jī)取1～3整數(shù)// 隨機(jī)時(shí)間繪制障礙物setTimeout(function () {
    that.propsTmp = [];  //清空    that.drawObstacle(obj);
}, time * 400);  //400ms ~ 1200ms

3.碰撞檢測(cè)

我們用一個(gè)數(shù)組來(lái)存放汽車占的矩形區(qū)域，障礙物占的矩形區(qū)域，在每一次tick的時(shí)候循環(huán)遍歷數(shù)組，看是否有重疊的，若有重疊，則發(fā)生了碰撞。

createjs的一些小知識(shí)：

1. 暫停和恢復(fù)舞臺(tái)渲染

createjs.Ticker.addEventListener(“tick”, tick); 
function tick(e) { if (e.paused === 1) { //處理     }
}     
createjs.Ticker.paused = 1; //在函數(shù)任何地方調(diào)用這個(gè)，則會(huì)暫停tick里面的處理 createjs.Ticker.paused = 0; //恢復(fù)游戲

2. 由于汽車會(huì)有加速，減速，彈氣泡的效果。因此我們把這幾個(gè)效果繪制在同一個(gè)container中，方便統(tǒng)一管理,對(duì)這些效果設(shè)置name屬性，之后可以直接使用getChildByName獲取到該對(duì)象。

container.name = ‘role’; //設(shè)置name值car = this.stage.getChildByName(“role”);  //使用name值方便獲取到該對(duì)象

3. 預(yù)加載 preload （createjs 的 preload 非常的實(shí)用）

一開(kāi)始是自己寫(xiě)的預(yù)加載，后來(lái)發(fā)現(xiàn)createjs里面對(duì)圖片是有跨域處理的，自己處理跨域的img就比較麻煩，所以直接使用createjs的預(yù)加載。

//放置靜態(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);
//資源加載成功后,進(jìn)行處理
function handleComplete() {
   var tyre = queue.getResult('tyre');  //拿到加載成功后的img
}

一般做一個(gè)游戲，我們正常都會(huì)構(gòu)建一個(gè)游戲類來(lái)承載。 下面是一個(gè)游戲正常有的接口:

;(function () {function CarGame(){}
    CarGame.prototype = {
        init:function(manifest) {this.preLoad(manifest);  //資源預(yù)加載//時(shí)間倒計(jì)時(shí)this.prepare(3, 3);  //倒計(jì)時(shí)3秒this.bindEvent(); 
        },
        render:function() {           this.drawBg(bg1);           this.drawRole(car, effbomb, effquick);           this.drawObstacle(obj);
        },//在游戲結(jié)束的時(shí)候批量銷毀destroy:function(){//移除tick事件createjs.Ticker.removeEventListener("tick", this.tick);//暫停里程，倒計(jì)時(shí)clearInterval(this.changem);
            clearTimeout(this.gametime);
        }，//由于期間用戶可能切出程序進(jìn)行其他操作，因此都需要一個(gè)暫停的接口pause:function() {//暫停里程，倒計(jì)時(shí)clearInterval(this.changem);
            clearTimeout(this.gametime);//暫停頁(yè)面滾動(dòng)createjs.Ticker.paused = 1;
        },//重新開(kāi)始游戲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();
        }
    }
})()

以上是“javascript中createjs小游戲開(kāi)發(fā)的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

新聞名稱：javascript中createjs小游戲開(kāi)發(fā)的示例分析-創(chuàng)新互聯(lián)
網(wǎng)站網(wǎng)址：http://weahome.cn/article/copsii.html