Atitit 基于dom的游戏引擎
1. 添加sprite控件(cocos,createjs,dom)1
1.3. 动画移动(cocos2d-js,jquery animate,create.js)2
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