接金币html5,JavaScript实现H5接金币功能(实例代码)

今日做出做出一个春节接金币红包的活动，感觉挺不错的分享给大家

这个小游戏采用hilojs实现的，详情

第一步：安装插件

npm i hilojs或者yarn add hilojs

第二步：创建一个Asset.js文件

import Hilo from "hilojs";

export default Hilo.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() {

let imgs = [

{

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 = new Hilo.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文件

import Hilo from "hilojs";

import Asset from './Asset'//定义金币红包车参数

import Gold from './gold'//随机生成金币红包臭蛋

import Hand from './hand'//汽车初始化级碰撞

let startTime = 0

export default class game {

constructor(page) {

this.page = page

//设置的游戏时间

this.gameTime = 0

this.gameStatus = "ready"

/*

play 游戏开始

ready 游戏结束

**/

// 下载队列

this.asset = new Asset()

// 画布对象

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()