Atitit 基于dom的游戏引擎

Atitit 基于dom的游戏引擎

 

1. 添加sprite控件(cocos,createjs,dom)1

1.1.1. Cocos1

1.1.2. createjs1

1.1.3. Dom模式2

1.2. 动画移动的实现原理2

1.3. 动画移动(cocos2d-js,jquery animate,create.js)2

1.4. ---code3

 

 

 

1. 添加sprite控件(cocos,createjs,dom)

 

1.1.1. Cocos

// var sushi = new cc.Sprite(res.Sushi_png);

 var sushi = new SushiSprite(res.Sushi_png);

        var size = cc.winSize;

 

        var x = sushi.width/2+size.width/2*cc.random0To1();

        sushi.attr({

            x: x,

            y:size.height - 30

        });

 

        this.addChild(sushi,5);

 

1.1.2. createjs

    var man = new createjs.Bitmap("../res/grossini.png");

 

  stage.addChild(man);

 

 

1.1.3. Dom模式

var imgStr='<img src="img/rmb@cyar@.jpg" style="position:absolute; left:0; top:0;"  class="sushi_tag_5kwi" />';

 //imgStr=imgStr.replace("@w@",rdmWid);

imgStr=imgStr.replace("@cyar@",cyar);

// console.log("--imgStr:"+imgStr);

var $h1=$(imgStr);

$("body").append($h1);

 

1.1. 动画移动的实现原理

Cocos与jq anim只要设置哈时间与最终的位置走ok..

Create.js还是传统的模式,每fps的事件里面儿写移动坐标..麻烦的..

1.2. 动画移动(cocos2d-js,jquery animate,create.js)

//down move

// var dorpAction = cc.MoveTo.create(4, cc.p(sushi.x,-30));

//sushi.runAction(dorpAction);

 

jquery animate

$($h1).animate({top:"800px"},10000);

 

 

createjs之小黄鸡鼠标移动效果 - 笔记 - 前端网（W3Cfuns）.html

//SpriteSheet 精灵表单

sprite = new createjs.Sprite(new createjs.SpriteSheet(data));

createjs.Ticker.setFPS(20);

createjs.Ticker.addEventListener("tick",tick);

}

function tick(e){

var t = stage.getNumChildren(); //获取舞台下面的数量

for ( var i=t-1; i>0 ; i-- ) {

var s = stage.getChildAt(i);

s.vX += 1;

s.vY += 2;

s.x += s.vX;

s.y += s.vY;

s.scaleX = s.scaleY = s.scaleX + s.vS;

s.alpha += s.vA;

 

if(s.alpha <= 0 || s.y > canvas.height ){

stage.removeChildAt(i);

}

}

stage.update(); //必须更新舞台

 

 

 

1.3. ---code

 

 

 

//schedule(this.update,2,16*1024,1);

   var PlayLayer={   //main layer,,one scence must hav a scence

   curCyarIdx:-1,

   cyararr:[5,20,50,100],

   schedule:function(fun,interTime,repeat,delay){

   window.setInterval(fun.bind(this),interTime*1000);

   },

    ctor:function () {

 this.addSushi();

 

  this.schedule(this.addSushi,2,16*1024,1);

},

  addSushi : function() {

  //alert(this.curCyarIdx);

  

  this.curCyarIdx++;

if(this.curCyarIdx>3)

this.curCyarIdx=0;

var cyar=this.cyararr[this.curCyarIdx];

  

var docWid=$(document.body).width();

console.log("--docWid wid:"+docWid);

 

var imgStr='<img src="img/rmb@cyar@.jpg" style="position:absolute; left:0; top:0;"  class="sushi_tag_5kwi" />';

 //imgStr=imgStr.replace("@w@",rdmWid);

imgStr=imgStr.replace("@cyar@",cyar);

// console.log("--imgStr:"+imgStr);

var $h1=$(imgStr);

$("body").append($h1);

 $h1.load(function(){  

var w =  $h1.width();  

var h = $h1.height();  

var imgWid=$($h1).width();

console.log("--imgWid wid:"+imgWid);

var maxWid=docWid-imgWid;//maxWid=800;

var rdmWid= Math.floor(Math.random()*(maxWid+1));

console.log("--rdm wid:"+rdmWid);

$h1.css("left",rdmWid+"px");

});

//   this.addChild(sushi,5);

// $(".sushi_tag_5kwi").css("top","0");

//$(".sushi_tag_5kwi")

//down move

// var dorpAction = cc.MoveTo.create(4, cc.p(sushi.x,-30));

//sushi.runAction(dorpAction);

$($h1).animate({top:"800px"},10000);

 

 

//gc

 

window.setTimeout(function(){

 $($h1).remove();

},6500);

 

 }

   

   

   };

PlayLayer.ctor();

 

 

参考资料

 

最火HTML5 JavaScript游戏引擎：国外篇（一）-CSDN.NET.html

我的js游戏小引擎—— 谈谈 基于dom VS 基于canvas - 真阿当 - 博客园.html

 

作者:: 绰号:老哇的爪子 （ 全名：：Attilax Akbar Al Rapanui 阿提拉克斯 阿克巴 阿尔 拉帕努伊 ） 

汉字名：艾提拉（艾龙），   EMAIL:1466519819@qq.com

转载请注明来源： http://blog.csdn.net/attilax

Atiend