web前端|H5教程
红包雨,html5,仿淘宝,仿京东
web前端-H5教程
本篇文章就给大家分享html5仿淘宝,京东实现红包雨效果的实例代码。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。
设计公司网站源码,ubuntu 下移植rom,爬虫网站代码推荐,php工具箱升级php,seo种类大全lzw
本红包雨项目是基于HTML5的游戏框架Phaser写的,最终形成的是一个canvas,所以性能很好,但是必须要说的是这个框架比较大,压缩后也有700K左右,所以请慎用.
通讯录网页版源码,ubuntu 创始人,专业爬虫用什么,php 排查,微草SEOlzw
代码地址: /AmosXu/red-packet-rain
xmpp源码,ubuntu修改终端名,爬虫代理 固定ip,PHP开战,seo教材入门lzw
1. 效果展示
图片依次是倒计时页面,抢红包页面,拆红包页,红包展示页,这些页面都是写在一个canvas里面的,无刷新的切换效果,性能超级棒
2.代码展示
贴上主要的代码js代码和注释
//初始化图片 let imgjishi = assets/img/daojishi.jpg let bgPlan = assets/img/bg-plan.jpg let bgRainer = assets/img/bg-rainer.jpg let redpacket = assets/img/redpacket.jpg let close = assets/img/close.jpg let dialogExit = assets/img/dialog-exit.jpg let buttonCancel = assets/img/button-cancel.jpg let buttonExit = assets/img/button-exit.jpg let openRedpacket = assets/img/open-redpacket.jpg let open = assets/img/open.jpg let redpacketResult = assets/img/redpacket-result.jpg let buttonUseTicket = assets/img/button-use-ticket.jpg let buttonContinue = assets/img/button-continue.jpg let cursorAnimation = assets/img/cursor-animation.jpg let states = {} let QingLvGroup; let hitNum = 0; let config = {selfPool:40,selfPic: edpacket,rate:0.5,maxSpeed:1200,minSpeed:400,max:95 } let ids = [0, 1, 2, 3, 4, 5] let redpackets = [全场优惠50元, 20元代金券, 全场优惠50元, 20元代金券, 全场优惠50元, 20元代金券] let time = 25; let getIds = [] let radio = document.documentElement.clientWidth/375; let e; function rfuc(n){ return n*radio; } //初始化红包 function QingLv(config, game){ this.init = function(){ this.config = config; QingLvGroup = game.add.group(); QingLvGroup.enableBody = true; QingLvGroup.createMultiple(config.selfPool, config.selfPic); //初始化多个红包 QingLvGroup.setAll(anchor.y,1) QingLvGroup.setAll(outOfBoundsKill, true); QingLvGroup.setAll(checkWorldBounds, true); this.maxWidth = game.width + 300; game.time.events.loop(Phaser.Timer.SECOND * config.rate, this.createQL, this); }; this.createQL = function(){ e = QingLvGroup.getFirstExists(false);if(e) { if(hitNum >= config.max) {return; } hitNum++; e.events.onInputDown.removeAll(); var ram= Math.random(); ram =ram<0.5?ram+=0.5: ram; e.loadTexture(this.config.selfPic) e.alpha = 1; e.angle = 30 // e.scale.setTo(rfuc(ram)); e.reset(game.rnd.integerInRange(100, this.maxWidth), 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(this.hitted, this) } }; this.hitted = function(sprite){ if(Math.random() 0) {sprite.kill();//点击获得红包,游戏暂停game.paused = true;//背景let hexGraphics = new Phaser.Graphics().beginFill(0x000000, 0.5).drawRect(0,0,document.documentElement.clientWidth,document.documentElement.clientHeight + 2);let pausedMask = game.add.sprite(0, 0, hexGraphics.generateTexture())let openDialog = game.add.sprite(rfuc(62), rfuc(150), openRedpacket)let open = game.add.sprite(rfuc(130), rfuc(300), open)open.inputEnabled = true; let result = game.add.sprite(rfuc(0), rfuc(120), edpacketResult)result.visible = falselet userTicket = game.add.sprite(rfuc(78), rfuc(445), uttonUseTicket)userTicket.visible = falselet goOn = game.add.sprite(rfuc(198), rfuc(445), uttonContinue)goOn.visible = falselet ticketText = {};let link = \//拆红包let clickOpen = function() { //游戏暂停时,点击事件无效,只能通过这种画热点的形式来绑定事件 let openRect = new Phaser.Rectangle(rfuc(130), rfuc(315), 239, 239).copyFrom(open); if (openRect.contains(game.input.x, game.input.y)) { let currentWidth = open.width //拆红包动画 let tempArr = [2, 4, 8, 4, 2, 1] let index = 0; let timer = setInterval(function() {if (index > tempArr.length-1) { index = 0 }open.width = currentWidth / tempArr[index]open.height = open.heightopen.left = game.world.centerX - open.width / 2++index }, 200) game.input.onDown.remove(clickOpen, this); let arrIndex = Math.floor(Math.random() * ids.length) let redpacketId = ids.splice(arrIndex, 1) getIds.push(redpacketId[0]) setTimeout(()=> {timer && clearInterval(timer)document.getElementById(audioOpen).play()let text = redpackets[redpacketId[0]]ticketText=game.add.text(0, rfuc(338),text,{fill:#ffe67d,fontSize:46px,fontWeight: older})ticketText.left = game.world.centerX - ticketText.width / 2 //文字相对于屏幕左右居中openDialog.visible = falseopen.visible = falseresult.visible = trueuserTicket.visible = truegoOn.visible = truegame.input.onDown.add(clickButton, this) }, 1000) } };let clickButton = function() { let userTicketRect = new Phaser.Rectangle(rfuc(78), rfuc(445), 194, 66).copyFrom(userTicket); let continueRect = new Phaser.Rectangle(rfuc(198), rfuc(445), 194, 66).copyFrom(goOn); if (userTicketRect.contains(game.input.x, game.input.y)) { window.location.replace(link) game.input.onDown.remove(clickButton, this); } else if (continueRect.contains(game.input.x, game.input.y)) { result.visible = false userTicket.visible = false goOn.visible = false pausedMask.visible = false ticketText.visible = false game.paused = false game.input.onDown.remove(clickButton, this); }}game.input.onDown.add(clickOpen, this) } else {sprite.inputEnabled = false;var anim = sprite.animations.add(config.selfPic);sprite.play(config.selfPic, 40, false);anim.onComplete.add(this.fade, this, sprite)} }; this.fade = function(sprite){ var tween = game.add.tween(sprite).to({alpha:0}, 300, Linear, true) tween.onComplete.add(this.killed, this, sprite); }; this.killed = function(sprite){ sprite.kill(); } } states.boot = function(game) { this.preload = function() { if (typeof(GAME) !== "undefined") { this.load.baseURL = GAME + "/"; } if (!game.device.desktop) { this.scale.scaleMode = Phaser.ScaleManager.EXACT_FIT; this.scale.forcePortrait = true; this.scale.refresh(); } }; this.create = function() { game.stage.backgroundColor = #FFF; game.state.start(preload); }; }; states.preload = function(game) {this.preload = function(game) {//加载图片game.load.spritesheet(daojishi, imgjishi, 250,120, 4)game.load.image(gPlan, bgPlan)game.load.image(gRainer, bgRainer)game.load.spritesheet( edpacket, redpacket, 144, 173, 2)game.load.image(close, close)game.load.image(dialogExit, dialogExit)game.load.image(uttonExit, buttonExit)game.load.image(uttonCancel, buttonCancel)game.load.image(openRedpacket, openRedpacket)game.load.image(open, open)game.load.image( edpacketResult, redpacketResult)game.load.image(uttonContinue, buttonContinue)game.load.image(uttonUseTicket, buttonUseTicket)game.load.spritesheet(cursorAnimation, cursorAnimation, 74, 108, 2)};this.create = function() {game.state.start(main);}; }; states.main = function(game) {this.create = function() {// 物理系统game.physics.startSystem(Phaser.Physics.ARCADE);// 背景图var bgPlan = game.add.sprite(0, 0, gPlan);bgPlan.width = game.width;bgPlan.height = game.height;var cursorPointer = game.add.sprite(game.world.centerX - 36, game.world.centerY + 86, cursorAnimation);var anim = cursorPointer.animations.add(cursorAnimation);cursorPointer.play(cursorAnimation, 2, true);document.getElementById(audioCountDown).play()// 开始游戏倒计时var daojishi = game.add.sprite(game.world.centerX - 140, game.world.centerY - 400, daojishi);var anim = daojishi.animations.add(daojishi);daojishi.play(daojishi, 1, false);anim.onComplete.add(this.startGame, this, daojishi);}; this.startGame = function(daojishi){this.leftTime = timelet bgRainer = game.add.sprite(0, 0, gRainer);bgRainer.width = game.width;bgRainer.height = game.height;daojishi.visible = false;this.createQingLv();//添加按钮,并绑定事件let closeImg = game.add.button(rfuc(20), rfuc(20), close, function(){ game.paused = true pausedMask.visible = true exitDialog.visible = true exitButton.visible = true cancelButton.visible = true game.input.onDown.add(buttonClick, this)}.bind(this))// 剩余时间this.leftTimeText = game.add.text(0, 0, this.leftTime, {fill: #FFF, fontSize: 40px, fontWeight: older})this.leftTimeText.scale.setTo(rfuc(1))this.leftTimeText.fixedToCamera = true;this.leftTimeText.cameraOffset.setTo(game.camera.width - rfuc(80), rfuc(20));let hexGraphics = new Phaser.Graphics().beginFill(0x000000, 0.5).drawRect(0,0,document.documentElement.clientWidth,document.documentElement.clientHeight + 2);let pausedMask = game.add.sprite(0, 0, hexGraphics.generateTexture())pausedMask.visible = false;let exitDialog = game.add.sprite(rfuc(62), rfuc(150), dialogExit)exitDialog.visible = false;let exitButton = game.add.button(rfuc(80), rfuc(315), uttonExit)exitButton.visible = false;let isExit = falselet cancelButton = game.add.button(rfuc(200), rfuc(315), uttonCancel)cancelButton.visible = false;game.time.events.repeat(Phaser.Timer.SECOND, this.leftTime, this.refreshTime, this)let buttonClick = function() { let cancelRect = new Phaser.Rectangle(rfuc(200), rfuc(315), 194, 66).copyFrom(cancelButton); if (cancelRect.contains(game.input.x, game.input.y)) { game.input.onDown.remove(buttonClick, this) game.paused = false pausedMask.visible = false exitDialog.visible = false exitButton.visible = false cancelButton.visible = false }}};this.createQingLv = function(){this.qinglv = new QingLv(config, game);this.qinglv.init();this.qinglv = new QingLv(config, game);this.qinglv.init();}; this.refreshTime = function(){this.leftTime--;var tem = this.leftTime;this.leftTimeText.text = tem;if(this.leftTime === 0) { game.paused = true;}} }; //生成游戏 let game = null if (game == null) { game = new Phaser.Game(document.documentElement.clientWidth, document.documentElement.clientHeight + 2, Phaser.AUTO, document.getElementById(gameScreen)); game.state.add(oot, states.boot.bind(game)); game.state.add(preload, states.preload.bind(game)); game.state.add(main, states.main.bind(game)); game.state.start(oot); }
3. 疑难问题
1. 游戏暂停时,点击事件无效,需要点击,怎么解决
答: 通过全局事件画热点的形式绑定事件,一定要记得移除事件,一定一定要记得
game.input.onDown.add(clickOpen, this) //给游戏绑定全局事件let userTicket = game.add.sprite(rfuc(78), rfuc(445), uttonUseTicket) let userTicketRect = new Phaser.Rectangle(78, 445, 194, 66).copyFrom(userTicket); //获得button的区域//如果点击的位置为button的位置就执行下一步if (userTicketRect.contains(game.input.x, game.input.y)) {//移除全局事件 game.input.onDown.remove(clickButton, this);}
2. 文字或图片相对于屏幕居中(暂时只能做屏幕居中)
答: 添加文字到游戏中,文字向左的偏移量等于游戏屏幕的宽度减去文字宽度的一般,就能达到居中的效果
ticketText = game.add.text(0, rfuc(338), 我想居中, {fill: #ffe67d, fontSize: 46px, fontWeight: older})ticketText.left = game.world.centerX - ticketText.width / 2 //文字相对于屏幕左右居中
代码地址: /AmosXu/red-packet-rain
总结：
如果觉得《html5仿淘宝 京东实现红包雨效果(code)》对你有帮助，请点赞、收藏，并留下你的观点哦！
