createjs小游戏开发的实例历程--百分百源码网

createjs小游戏开发的实例历程-

发布时间：08/01 来源：未知浏览：关键词：

?游戏整体思绪实现1.实现一个无缝连贯的配景图，模拟出汽车在加快的状态this.backdropnewcreatejs.Bitmap(bg);this.backdrop.x0;this.b 游戏整体思绪实现

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 小游戏开发的实例历程的细致内容，更多请关注百分百源码网其它相干文章！

打赏