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中使用
x{{danNum}}