createjs 小游戏开发的实例过程

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 小游戏开发的实例过程的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！