最新文章專題視頻專題問答1問答10問答100問答1000問答2000關(guān)鍵字專題1關(guān)鍵字專題50關(guān)鍵字專題500關(guān)鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關(guān)鍵字專題關(guān)鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當(dāng)前位置: 首頁 - 科技 - 知識百科 - 正文

createjs小游戲開發(fā)的實(shí)例過程

來源:懂視網(wǎng) 責(zé)編:小采 時間:2020-11-27 15:07:43
文檔

createjs小游戲開發(fā)的實(shí)例過程

createjs小游戲開發(fā)的實(shí)例過程:游戲整體思路實(shí)現(xiàn)1. 實(shí)現(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.wi
推薦度:
導(dǎo)讀createjs小游戲開發(fā)的實(shí)例過程:游戲整體思路實(shí)現(xiàn)1. 實(shí)現(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.wi

游戲整體思路實(shí)現(xiàn)

1. 實(shí)現(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軸的坐標(biāo)為負(fù)的背景圖長//使用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. 隨機(jī)繪制障礙物

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

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

第一次繪制完障礙物之后,會隨機(jī)時間繪制下一次的障礙物。

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

3.碰撞檢測

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

createjs的一些小知識:

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

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

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

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

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

一開始是自己寫的預(yù)加載,后來發(fā)現(xiàn)createjs里面對圖片是有跨域處理的,自己處理跨域的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òu)建一個游戲類來承載。 下面是一個游戲正常有的接口:

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

聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

createjs小游戲開發(fā)的實(shí)例過程

createjs小游戲開發(fā)的實(shí)例過程:游戲整體思路實(shí)現(xiàn)1. 實(shí)現(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.wi
推薦度:
標(biāo)簽: 游戲 小游戲 游戲的
  • 熱門焦點(diǎn)

最新推薦

猜你喜歡

熱門推薦

專題
Top