html5仿淘宝,京东实现红包雨效果的方法?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容,让我们一起来看看吧!
1。效果展示
图片依次是倒计时页面,抢红包页面,拆红包页,红包展示页,这些页面都是写在一个画布里面的,无刷新的切换效果,性能超级棒
2。代码展示
贴上主要的代码js代码和注释
//初始化图片
让imgjishi=& # 39;资产/img/daojishi.png& # 39;
让bgPlan=& # 39;资产/img/bg-plan.jpg& # 39;
让bgRainer=& # 39;资产/img/bg-rainer.jpg& # 39;
让redpacket=& # 39;资产/img/redpacket.png& # 39;
让近=& # 39;资产/img/close.png& # 39;
让dialogExit=& # 39;资产/img/dialog-exit.png& # 39;
让buttonCancel=& # 39;资产/img/button-cancel.png& # 39;
让buttonExit=& # 39;资产/img/button-exit.png& # 39;
让openRedpacket=& # 39;资产/img/open-redpacket.png& # 39;
让开放=& # 39;资产/img/open.png& # 39;
让redpacketResult=& # 39;资产/img/redpacket-result.png& # 39;
让buttonUseTicket=& # 39;资产/img/button-use-ticket.png& # 39;
让buttonContinue=& # 39;资产/img/button-continue.png& # 39;
让cursorAnimation=& # 39;资产/img/cursor-animation.png& # 39;
让国家={}
让QingLvGroup;
让hitNum=0;
让配置={
selfPool: 40,
selfPic: & # 39; redpacket& # 39;
率:0.5,
maxSpeed: 1200,
minSpeed: 400,
马克斯:95
}
让id=[0, 1, 2, 3, 4, 5]
让redpackets=[& # 39;全场优惠50元& # 39;,& # 39;20元代金券& # 39;,& # 39;全场优惠50元& # 39;,& # 39;20元代金券& # 39;,& # 39;全场优惠50元& # 39;,& # 39;20元代金券& # 39;】
让时间=25;
让getid=[]
让收音机=document.documentElement.clientWidth/375;
让e;
函数rfuc (n) {
返回n *广播;
}//初始化红包
函数QingLv(配置、游戏){
这一点。init=function () {
这一点。配置=配置;
QingLvGroup=game.add.group ();
QingLvGroup。enableBody=true;
QingLvGroup.createMultiple(配置。selfPool config.selfPic);//初始化多个红包
QingLvGroup.setAll (& # 39; anchor.y& # 39; (1)
QingLvGroup.setAll (& # 39; outOfBoundsKill& # 39;, true);
QingLvGroup.setAll (& # 39; checkWorldBounds& # 39;, true);
这一点。maxWidth=游戏。宽度+ 300;
game.time.events.loop (Phaser.Timer。第二个配置。率,这一点。createQL,);
};
这一点。createQL=function () {
e=QingLvGroup.getFirstExists(假);
如果(e) {
如果(hitNum祝辞=config.max) {
返回;
}
hitNum + +;
e.events.onInputDown.removeAll ();
ram var=math . random ();
ram内存=ram<0.5 ? +=0.5:内存;
e.loadTexture (this.config.selfPic)
e。α=1;
e。角=30//e.scale.setTo (rfuc (ram));
this.maxWidth e.reset (game.rnd.integerInRange(100), 100)//红包生成的位置
e.body.velocity。x=game.rnd.integerInRange (-300、-150);//红包移动的速度
e.body.velocity。y=game.rnd.integerInRange (config.minSpeed config.maxSpeed);
e。inputEnabled=true;
e.events.onInputDown.add(这一点。惨象,)
}
};
这一点。惨象=函数(雪碧){
如果(math . random () & lt;1/4,,id。长度比;0){
sprite.kill ();//点击获得红包,游戏暂停
游戏。停顿了一下=true;//背景
让hexGraphics=new Phaser.Graphics ()。beginFill (0.5 0 x000000) .drawRect (0, 0, document.documentElement.clientWidth document.documentElement。clientHeight + 2);
让pausedMask=game.add。雪碧(0,0,hexGraphics.generateTexture ())
让openDialog=game.add.sprite (rfuc (62), rfuc (150), & # 39; openRedpacket& # 39;)
让开放=game.add.sprite (rfuc (130), rfuc(300), & # 39;开放# 39;)
开放。inputEnabled=true;
让结果=game.add.sprite (rfuc (0) rfuc (120), & # 39; redpacketResult& # 39;)
结果。可见=false
让userTicket=game.add.sprite (rfuc (78), rfuc (445), & # 39; buttonUseTicket& # 39;)
userTicket。可见=false
让呆子=game.add.sprite (rfuc (198), rfuc (445), & # 39; buttonContinue& # 39;)
呆子。可见=false
让ticketText={};
让链接=& # 39;& # 39;//拆红包
让clickOpen=function () {//游戏暂停时,点击事件无效,只能通过这种画热点的形式来绑定事件
让openRect=new Phaser.Rectangle (rfuc (130), rfuc(315), 239年,239年).copyFrom(开放);
如果(openRect.contains (game.input。x, game.input.y)) {
让currentWidth=open.width//拆红包动画
让tempArr=(2、4、8、4、2、1]
让指数=0;
让计时器=setInterval(函数(){
如果(指数比;tempArr.length-1){指数=0}
开放。宽度=currentWidth/tempArr(指数)
开放。身高=open.height
开放。左=game.world。centerX——开放。宽/2
+ +指数
},200)
game.input.onDown。删除(clickOpen,);
让arrIndex=Math.floor (math . random () * ids.length)
让redpacketId=id。拼接(arrIndex, 1)
getIds.push (redpacketId [0])
setTimeout(()=比;{
计时器,,clearInterval(计时)
. getelementbyid (& # 39; audioOpen& # 39;) .play ()
让文本=redpackets [redpacketId [0]]
ticketText=game.add。文本(0,rfuc(338),文本,{填补:& # 39;# ffe67d& # 39;,字形大小:& # 39;46 px # 39;, fontWeight: & # 39;大胆# 39;})
ticketText。左=game.world。centerX——ticketText。宽/2//文字相对于屏幕左右居中
openDialog。可见=false
开放。可见=false
结果。可见=true
userTicket。可见=true
呆子。可见=true
game.input.onDown。添加(clickButton,)
},1000)
}
};
让clickButton=function () {
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
