H5实现点击获取金币小游戏以及大富翁

最近做了一个比较不错的点击获取金币小游戏，这里分享给大家
主要实现方式是通过hilojs实现的

以下为官方文档的地址
官方文档

第一步：安装插件

npm i hilojs或者yarn add hilojs

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

import Hilo from "hilojs";
export default Hilo.Class.create({//素材加载类Mixes: Hilo.EventMixin,queue: null,  // 下载类gold10: null,   // 金币gold20: null,   // 金币gold50: null,   // 金币blindBox: null,   // 盲盒fireElement: null,   // 金币soil: null, // 红包person: null, // 车score0: null,   // -1分score1: null,   // +1分score2: null,   // +2分load() {let imgs = [{id: 'gold10',//金币src: 'https://sunndybody.gitee.io/monthover/10.png', },{id: 'gold20',//金币src: 'https://sunndybody.gitee.io/monthover/20.png', },{id: 'gold50',//金币src: 'https://sunndybody.gitee.io/monthover/50.png', },{id: 'blindBox',//金币src: 'https://sunndybody.gitee.io/monthover/hezi_120.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.gold10 = this.queue.get('gold10').content;//金币this.gold20 = this.queue.get('gold20').content;//金币this.gold50 = this.queue.get('gold50').content;//金币this.blindBox = this.queue.get('blindBox').content;//盲盒//删除下载队列的complete事件监听this.queue.off('complete');// complete暴露this.fire('complete');}
})

第三步：创建一个game.js文件

import Hilo from "hilojs";
import Asset from './Asset'//定义金币红包车参数
import goldContainer from './goldContainer'//随机生成金币红包臭蛋
const setTime = 14//游戏时长单位(s)
let startTime = 0
export default class game {//游戏主模块constructor(page) {this.page = page//设置的游戏时间this.setGameTime = setTime//设置时间this.gameTime = 15this.gameStatus = "start"//游戏状态// 下载队列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 : 1334this.height = (window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight) * 2this.scale = 0.5// 定时器对象this.ticker = null//生成金币盲盒this.Gold = null//金币生成速度this.createSpeed = 300//分数this.score = 0//定义一个碰撞的数组this.crashList = []//定时器this.timerAll = null//倒计时this.countDown = 0//盲盒this.blindBoxNum = 0}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 = new Hilo.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, 'click', 'mousedown', 'ontouchstart']);// 启动定时器刷新页面 参数为帧率this.ticker = new Hilo.Ticker(60)// 舞台添加到定时队列中this.ticker.addTick(this.stage)// 添加动画类到定时队列this.ticker.addTick(Hilo.Tween);//启动tickerthis.ticker.start(true);this.startGame();}startGame() {   //开始游戏startTime = new Date().getTime()this.initGolds();this.gameTime = this.setGameTime;this.score = 0;this.blindBoxNum = 0;this.crashList = [];this.gameStatus = "start"this.calcTime()}calcTime() { //游戏时间this.timerAll = setTimeout(() => {if (this.gameTime > 0) {this.gameTime--;this.calcTime()} else {setTimeout(() => {this.gameOver()}, 500);}}, 1000);}clearCalcTime() {this.Gold.score = [10, 20, 50, 0]clearTimeout(this.timerAll);}gameOver() {//游戏结束调用if (this.Gold && this.Gold.stopCreateEnemy()) {this.Gold.stopCreateEnemy()}this.gameStatus = "end"}initGolds() {//初始化金币红包this.Gold = new goldContainer({id: 'background',height: this.height,width: this.width,createSpeed: this.createSpeed,pointerEnabled: true, // 不关闭事件绑定 无法操作舞台goldList: [this.asset.gold10, this.asset.gold20, this.asset.gold50, this.asset.blindBox],startTime}).addTo(this.stage, 2)this.Gold.on('click', (e) => {this.checkedGlod(e)})//舞台更新// this.stage.onUpdate = this.onUpdate.bind(this);}checkedGlod(e) {// console.log(e.eventTarget.type, e.eventTarget)if (e.eventTarget.type) {if (e.eventTarget.type == "blindBox") {this.blindBoxNum = 1}this.score += e.eventTarget.scoree.eventTarget.remove()}}// onUpdate() {//舞台更新// }
}

第四步：创建一个goldBitmap.js文件

import Hilo from "hilojs";
let goldBitmap = Hilo.Class.create({Extends: Hilo.Bitmap,tweenChild: null,constructor: function (properties) {goldBitmap.superclass.constructor.call(this, properties);this.tweenChild = Hilo.Tween;this.onUpdate = this.onUpdate.bind(this);this.remove = this.remove.bind(this);},over() {this.removeFromParent();},checkedAnimation(bol) {if (bol) {//Tween.to创建一个缓动动画，让当前可视对象从当前属性（scaleX: .2,scaleY: .2）变换到目标属性（scaleX: 1.4, scaleY: 1.4）this.tweenChild.to(this,{ scaleX: 6, scaleY: 6 },{duration: 600,  //完成这个变换的时长})}},remove() {// console.log(this)this.removeFromParent();},onUpdatefn() { },onUpdate() {if (this.parent.height < this.y) {this.removeFromParent();return}}
})export default goldBitmap

第五步：创建一个goldContainer.js文件

import Hilo from "hilojs";
import goldBitmap from './goldBitmap'
let goldContainer = Hilo.Class.create({Extends: Hilo.Container,goldBitmapImg: null,timer: null, // 定时器goldList: [],createSpeed: 0,score: [10, 20, 50, 0],//分数ids: ['gold10', 'gold20', 'gold50', 'blindBox'],gold10Num: [],gold20Num: [],gold50Num: [],tween: null,startTime: null,differenceTime: 0,constructor: function (properties) {goldContainer.superclass.constructor.call(this, properties);this.startTime = properties.startTimethis.tween = Hilo.Tween;this.creatEnemy();this.beginCreateEnemy();},random(lower, upper) {return Math.floor(Math.random() * (upper - lower + 1)) + lower;},creatEnemy() {//最大分数700// 金币雨持续时间15s，掉落61个，10金币50个，20金币10个，彩蛋1个let now = new Date().getTime()let differenceLine = parseInt((now - this.startTime) / this.createSpeed)let difference = parseInt((now - this.startTime) / 1000)this.differenceTime = differencelet str = differenceLine + ''let s = Number(str.substring(str.length - 1))// console.log(differenceLine, '-', s)if (differenceLine < 50) {this.createGold(0, 290)}if (differenceLine == 26) {this.createGold(3, 300)}if (s == 4 || s == 8) {this.createGold(1, 170)}},createGold(index, enemySpeed) {let hold = undefinedif (this.goldList[index].width && this.goldList[index].height) {//判断报错宽高hold = new goldBitmap({image: this.goldList[index],rect: [0, 0, this.goldList[index].width, this.goldList[index].height],width: this.goldList[index].width / 2,height: this.goldList[index].height / 2,scaleX: 3,//倍数scaleY: 3,//倍数}).addTo(this);hold.type = this.ids[index]}//随机掉落// hold.y = 600 * Math.random();hold.y = 0;hold.x = this.random(0, (this.width - this.goldList[index].width));// console.log('x',hold.x)hold.score = this.score[index]this.tween.to(hold, {//运动速度x: this.random(0, (this.width - this.goldList[index].width - 50)),y: this.height}, {duration: 1400 / enemySpeed * 1000,loop: false,onComplete: () => {hold.removeFromParent()}});},beginCreateEnemy() {//开始生成this.timer = setInterval(() => {this.creatEnemy();}, this.createSpeed);},stopCreateEnemy() {//停止生成并全部移除if (this.timer) {clearInterval(this.timer)this.removeAllChildren()}},checkCollision(enemy) {//碰撞检测console.log('enemy', enemy)// for (var i = 0, len = this.children.length; i < len; i++) {//     if (enemy.hitTestObject(this.children[i], true)) {//         return true;//     }// }// return false;}
})export default goldContainer

到现在所有的js文件已经创建实现完成了

我这个是在vue中实现的代码如下：

index.vue

<template><div class="fix"><div class="start" v-if="isSow"><start @open="startFn" /></div><div class="hilo" v-else><div class="time">剩余时间:{{ game.gameStatus == "end" ? 0 : gameTime }}s</div><div ref="hilo" class="canvas"></div></div><Popup v-model="show" :close-on-click-overlay="false"><div class="result"><div class="res"><div class="top"><div class="jiangli"><img src="@/assets/images/gold/huodejiangli.png" alt="" /></div></div><div class="top1"><img src="@/assets/images/gold/gonxihuode.png" alt="" /></div><div class="jinbi"><img src="@/assets/images/gold/jinbi.png" alt="" /><span>+{{ score || 0 }}</span></div><div class="saizhi"><img src="@/assets/images/gold/saizi12.png" alt="" /><span>+{{ blindBoxNum || 0 }}次</span></div><div class="bottom"><Button @click="backHome" type="default" class="back"><img src="@/assets/images/gold/allow_kxj.png" alt=""/></Button></div></div></div></Popup></div>
</template><script>
import Game from "./js/game";
import start from "./start";
import { Popup, Button, Toast } from "vant";
export default {name: "game",mixins: [],components: { start, Popup, Button },data() {return {game: new Game(),isSow: true, //显示开始开始游戏页面show: false,};},created() {},computed: {score() {//金币分数return this.game.score;},blindBoxNum() {//盲盒数return this.game.blindBoxNum;},gameTime() {//游戏时间return this.game.gameTime;},},watch: {"game.gameStatus": {handler(newName) {if (newName == "end") {//  this.show = true;this.queryGold({ score: this.score, blindBoxNum: this.blindBoxNum });}},immediate: true,},},mounted() {},beforeDestroy() {this.game.gameOver();},destroyed() {},methods: {queryGold(parems) {console.log(parems);this.show = true;},startFn() {this.isSow = false;let that = this;this.$nextTick(() => {that.game.page = this.$refs.hilo;that.game.init();});},backHome() {this.show=false},},
};
</script>
<style lang="less" scoped>
.fix {width: 100%;height: 100vh;background-color: #0a080b; //1a1511background-image: url("../../assets/images/gold/gold-background.png");background-repeat: no-repeat;background-size: 100% auto;background-position: bottom center;.van-button {border: none;background: none;height: auto;}.start {width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: 100;}.hilo {width: 100%;height: 100%;position: relative;overflow: hidden;position: relative;.canvas {canvas {width: 100% !important;height: 99vh !important;}}.time {position: absolute;top: 50px;width: 100%;text-align: center;color: #fdf100;font-size: 35px;font-weight: 600;}}.van-popup {background: none;width: 90%;.result {display: flex;flex-direction: column;align-items: center;.res {background: #ffff;width: 100%;border: 4px solid #d98f2d;border-radius: 16px;overflow: hidden;.top {display: flex;align-items: center;justify-content: center;.jiangli {width: 70%;background-image: url("../../assets/images/gold/background54.png");background-repeat: no-repeat;background-size: 100% 100%;text-align: center;padding: 7px 0;img {width: 50%;height: auto;}}}.top1 {text-align: center;margin-top: 30px;img {width: 30%;}}.jinbi,.saizhi {display: flex;justify-content: center;align-items: center;margin-top: 30px;img {width: 80px;height: 80px;}span {font-size: 60px;font-weight: 600;color: #d98f2d;margin-left: 20px;text-shadow: 0 0 5px black, 0 0 10px black;}}.bottom {display: flex;flex-direction: column;justify-content: center;align-items: center;background: #fdf100;padding: 30px 0;margin-top: 30px;.back {text-align: center;width: 50%;margin-top: 20px;img {width: 100%;height: auto;}}}}}}
}
</style>

start.vue

<template><div class="start"><div class="content"><div class="center"><div class="zi"><div class="quan"><img src="@/assets/images/gold/3.png" alt="" v-if="ready == 3" /><imgsrc="@/assets/images/gold/2.png"alt=""v-else-if="ready == 2"/><imgsrc="@/assets/images/gold/1.png"alt=""v-else-if="ready == 1"class="zi_1"/><img src="@/assets/images/gold/3.png" alt="" v-else /></div></div></div><div class="bottom"><Button@click="open"type="default"class="kaishi":disabled="disabled"><img src="@/assets/images/gold/lijikaiqi.png" alt=""/></Button></div></div></div>
</template><script>
// console.log('start',end,endTime)
import { Button, Toast } from "vant";
export default {name: "start",components: {Button,},data() {return {show: false,ready: 0,disabled: false,};},computed: {},async mounted() {},created() {this.ready = 0;this.disabled = false;},methods: {open() {this.disabled = true;this.ready = 3;let timer = setInterval(() => {if (this.ready == 1) {clearInterval(timer);this.$emit("open");} else {this.ready--;}}, 1000);},closePopup() {this.show = false;},},
};
</script><style lang="less" scoped>
.start {width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;.van-button {border: none;background: none;height: auto;}.content {width: 90%;height: 100%;display: flex;flex-direction: column;justify-content: space-around;padding: 90px 0;.center {display: flex;justify-content: center;padding-top: 80px;position: relative;.zi {position: absolute;top: 0;left: 0;color: #ffff;width: 100%;text-align: center;.quan {display: inline-block;width: 260px;height: 260px;border: 10px solid #d98f2d;border-radius: 50%;position: relative;box-shadow: -5px 5px 10px -4px #d98f2d, 5px 5px 10px -4px #d98f2d;img {width: 130px;position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;}img.zi_1 {width: 70px;}}}}.bottom {display: flex;flex-direction: column;align-items: center;.kaishi,.back {text-align: center;width: 80%;img {width: 100%;height: auto;}}.back {margin-top: 20px;}}}
}
</style>