JavaScript实现H5接金币功能(实例代码)
今日做出做出一个春节接金币红包的活动,感觉挺不错的分享给大家
这个小游戏采用hilojs实现的,详情
第一步:安装插件
npmihilojs或者yarnaddhilojs
第二步:创建一个Asset.js文件
importHilofrom"hilojs"; exportdefaultHilo.Class.create({ Mixes:Hilo.EventMixin, queue:null,//下载类 gold:null,//金币 wood:null,//金币 water:null,//蛋 fireElement:null,//金币 soil:null,//红包 person:null,//车 score0:null,// score1:null,// score2:null,// load(){ letimgs=[ { id:'soil',//红包 src:require('../../../assets/image/red.png') }, { id:'water',//蛋 src:require('../../../assets/image/dan.png') }, { id:'gold',//金币 src:require('../../../assets/image/money3.png') }, { id:'person',//车 src:require('../../../assets/image/che1.png') } ]; this.queue=newHilo.LoadQueue(); this.queue.add(imgs); this.queue.on('complete',this.onComplete.bind(this)); this.queue.on('error',(e)=>{ console.log('加载出错',e) }) this.queue.start(); }, onComplete(){//加载完成 console.log('加载完成') this.gold=this.queue.get('gold').content;//金币 this.water=this.queue.get('water').content;//蛋 this.soil=this.queue.get('soil').content;//红包 this.person=this.queue.get('person').content; //删除下载队列的complete事件监听 this.queue.off('complete'); //complete暴露 this.fire('complete'); } })
第三步:创建一个game.js文件
importHilofrom"hilojs"; importAssetfrom'./Asset'//定义金币红包车参数 importGoldfrom'./gold'//随机生成金币红包臭蛋 importHandfrom'./hand'//汽车初始化级碰撞 letstartTime=0 exportdefaultclassgame{ constructor(page){ this.page=page //设置的游戏时间 this.gameTime=0 this.gameStatus="ready" /* play游戏开始 ready游戏结束 **/ //下载队列 this.asset=newAsset() //画布对象 this.stage=null //画布信息 this.width=(window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth)*2 //this.height=innerHeight*2<1334?innerHeight*2:1334 this.height=(window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight)*2 this.scale=0.5 //定时器对象 this.ticker=null //金币红包臭蛋 this.Gold=null //金币红包臭蛋下落速度 this.enemySpeed=1000//金币下落速度 this.redSpeed=1000//红包下落速度 this.danSpeed=1000//红包下落速度 //金币红包臭蛋生成速度 this.createSpeed=200 //接金币红包臭蛋的车 this.hand=null //开始按钮 this.beginBtn=null //分数 this.score=0 //定义一个碰撞的数组 this.crashList=[] this.isEnd=false //砸中臭蛋数量 this.danNum=0 //定时器 this.timerAll=null } init(){ this.asset.on('complete',function(){ this.asset.off('complete') this.initStage() }.bind(this)); this.asset.load() } initStage(){ //console.log(this.width,this.height) //舞台 this.stage=newHilo.Stage({ renderType:'canvas', width:this.width, height:this.height, scaleX:this.scale, scaleY:this.scale, container:this.page }); this.stage.enableDOMEvent([Hilo.event.POINTER_START,Hilo.event.POINTER_MOVE,Hilo.event.POINTER_END]); //启动定时器刷新页面参数为帧率 this.ticker=newHilo.Ticker(60) //舞台添加到定时队列中 this.ticker.addTick(this.stage) //添加动画类到定时队列 this.ticker.addTick(Hilo.Tween); //启动ticker this.ticker.start(true); this.startGame(); } startGame(){//开始游戏 startTime=newDate().getTime() this.initZongzi(); this.initHand() //this.beginBtn.removeFromParent() this.stage.removeChild(this.beginBtn) this.gameTime=this.setGameTime; this.score=0; this.crashList=[]; this.isEnd=false; this.gameStatus="play" this.calcTime() } calcTime(){//游戏时间 this.timerAll=setTimeout(()=>{ letnow=newDate().getTime() letdifference=parseInt((now-startTime)/1000) if(difference%30==0){ this.Gold.score[0]=this.Gold.score[0]+5 this.Gold.score[2]=this.Gold.score[2]+5 this.Gold.enemySpeed=this.Gold.enemySpeed+500 this.Gold.redSpeed=this.Gold.redSpeed+200 this.Gold.danSpeed=this.Gold.danSpeed+300 } this.calcTime() },1000); } clearCalcTime(){ this.Gold.score[0]=5 this.Gold.score[2]=5 this.Gold.enemySpeed=1000 this.Gold.redSpeed=1000 this.Gold.danSpeed=1000 clearTimeout(this.timerAll); } gameOver(){//游戏结束调用 this.Gold.stopCreateEnemy() this.gameStatus="ready" this.initBeginBtn() //this.hand.removeChild(this.hand.score) this.stage.removeChild(this.hand) } initZongzi(){//初始化金币红包 this.Gold=newGold({ id:'gold', height:this.height, width:this.width, enemySpeed:this.enemySpeed, redSpeed:this.redSpeed, danSpeed:this.danSpeed, createSpeed:this.createSpeed, pointerEnabled:false,//不关闭事件绑定无法操作舞台 SmallGoldList:[this.asset.gold,this.asset.water,this.asset.soil], startTime }).addTo(this.stage,2) //舞台更新 this.stage.onUpdate=this.onUpdate.bind(this); } initHand(){//初始化手 this.hand=newHand({ id:'hand', img:this.asset.person, height:this.asset.person.height, width:this.asset.person.width, x:this.width/2-this.asset.person.width/4, y:this.height-this.asset.person.height/2-40 }).addTo(this.stage,1); Hilo.util.copy(this.hand,Hilo.drag); this.hand.startDrag([0,this.height-this.asset.person.height/2-40,this.width-this.asset.person.width/2+10,0]); } onUpdate(){//舞台更新 if(this.gameStatus=='ready'){ return } //console.log('碰撞',this.crashList) letnum=[] this.crashList.forEach(e=>{ if(e=='dan'){ num.push(e) } }) this.danNum=num.length if(num.length>=3){//游戏结束 console.log('游戏结束') this.clearCalcTime() this.isEnd=true; this.gameOver() return } this.Gold.children.forEach(item=>{ if(this.hand.checkCollision(item)){ if(item.drawable.image.src.indexOf("red")!=-1){ this.crashList.push('red') } if(item.drawable.image.src.indexOf("money3")!=-1){ this.crashList.push('money3') } if(item.drawable.image.src.indexOf("dan")!=-1){ this.crashList.push('dan') } //碰撞了 item.over(); this.score+=item.score||0; switch(item.score){ case-1: this.hand.addScore(this.asset.score0) break; case1: this.hand.addScore(this.asset.score1) break; case2: this.hand.addScore(this.asset.score2) break; default: break; } } }) } initBeginBtn(){ } }
第四步:创建一个gold.js文件
importHilofrom"hilojs"; importSmallGoldfrom'./SmallGold' letEnemy=Hilo.Class.create({ Extends:Hilo.Container, timer:null,//定时器 SmallGoldList:[], enemySpeed:0, redSpeed:0, danSpeed:0, createSpeed:0, score:[5,0,5], tween:null, startTime:null, constructor:function(properties){ Enemy.superclass.constructor.call(this,properties); this.startTime=properties.startTime this.tween=Hilo.Tween; this.creatEnemy(); this.beginCreateEnemy(); }, creatEnemy(){ letnow=newDate().getTime() letdifference=parseInt((now-this.startTime)/200) letindex=null; letdifferenceNow=parseInt((now-this.startTime)/1000) if(0<=differenceNow&&differenceNow<=60){ if(difference==0){ index=0 this.createGold(index,this.enemySpeed) }elseif(difference%70==0){//0-15秒,障碍蛋1个 index=1 this.createGold(index,this.danSpeed) }elseif(difference%147==0||difference%154==0){//15-30秒障碍蛋2个(150-155) index=1 this.createGold(index,this.danSpeed) }elseif(difference%222==0||difference%226==0||difference%235==0){//30-45秒障碍蛋3个(225-230) index=1 this.createGold(index,this.danSpeed) }elseif(difference%296==0||difference%302==0||difference%307==0||difference%311==0){//60秒,障碍蛋4个 index=1 this.createGold(index,this.danSpeed) }else{ letnumber=this.random(0,100); if(number<40){//0为金币2位红包1为蛋 index=0 this.createGold(index,this.enemySpeed) }elseif(number<=100){ index=2 this.createGold(index,this.redSpeed) } } }else{ letnowmiao=difference-300 if(nowmiao%70==0||nowmiao%75==0||nowmiao%78==0||nowmiao%85==0){//0-15秒,障碍蛋4个 index=1 this.createGold(index,this.danSpeed) }else{ letnumber=this.random(0,100); if(number<40){//0为金币2位红包1为蛋 index=0 this.createGold(index,this.enemySpeed) }elseif(number<=100){ index=2 this.createGold(index,this.redSpeed) } } } }, createGold(index,enemySpeed){ lethold=undefined if(this.SmallGoldList[index].width&&this.SmallGoldList[index].height){ hold=newSmallGold({ image:this.SmallGoldList[index], rect:[0,0,this.SmallGoldList[index].width,this.zongziList[index].height], width:this.SmallGoldList[index].width/2, height:this.SmallGoldList[index].height/2, //scaleX:0.5, //scaleY:0.5, }).addTo(this); } letwidthScreen=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth letheightScreen=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight hold.x=0.45*widthScreen; hold.y=0.4*heightScreen; hold.score=this.score[index] this.tween.to(hold,{ x:this.random(0,(this.width-this.SmallGoldList[0].width/2)), y:this.height },{ duration:1400/enemySpeed*1000, loop:false, onComplete:()=>{ hold.removeFromParent() } }); }, random(lower,upper){ returnMath.floor(Math.random()*(upper-lower+1))+lower; }, beginCreateEnemy(){//开始生成 this.timer=setInterval(()=>{ this.creatEnemy(); },this.createSpeed); }, stopCreateEnemy(){//停止生成并全部移除 clearInterval(this.timer) this.removeAllChildren() }, checkCollision(enemy){//碰撞检测 for(vari=0,len=this.children.length;i第五步:创建一个hand.js文件
importHilofrom"hilojs"; lethand=Hilo.Class.create({ Extends:Hilo.Container, //图 img:null, //车 bowl:null, //分数 score:null, constructor(properties){ hand.superclass.constructor.call(this,properties) this.initHand() }, initHand(){//初始化背景 this.hand=newHilo.Bitmap({ id:'hand', image:this.img, rect:[0,0,this.img.width,this.img.height], width:this.img.width/2, height:this.img.height/2, //scaleX:0.5, //scaleY:0.5, }).addTo(this); }, addScore(image){//加分 if(this.img.width&&image.width){ this.score=newHilo.Bitmap({ id:'score', image:image, rect:[0,0,image?.width||0,image?.height||0], x:(this.img.width-image.width)/2, y:-image.height }).addTo(this); } if(this.img.width&&image.width){ Hilo.Tween.to(this.score,{ x:(this.img.width-image.width/2)/2, y:-2*image.height, alpha:0, width:image.width/2, height:image.height/2 },{ duration:600, //delay:100, ease:Hilo.Ease.Quad.EaseIn, onComplete:()=>{ } }); } }, //碰撞检测 checkCollision(enemy){ if(enemy.hitTestObject(this.hand,true)){ returntrue; } returnfalse; } }) exportdefaulthand第六步:创建一个SmallGold.js文件
importHilofrom"hilojs"; letSmallGold=Hilo.Class.create({ Extends:Hilo.Bitmap, constructor:function(properties){ SmallGold.superclass.constructor.call(this,properties); this.onUpdate=this.onUpdate.bind(this); }, over(){ this.removeFromParent(); }, onUpdate(){ if(this.parent.height我这是在vue中使用