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://www.cnblogs.com/attilax/

Atiend