今日做出做出一个春节接金币红包的活动,感觉挺不错的分享给大家
这个小游戏采用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 "play" this.calcTime() } calcTime() { //游戏时间 this.timerAll = setTimeout(() => { let now = new Date().getTime() let difference = 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 = new Gold({ 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 = new Hand({ 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) let num = [] 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; case 1: this.hand.addScore(this.asset.score1) break; case 2: this.hand.addScore(this.asset.score2) break; default: break; } } }) } initBeginBtn() { } }
第四步:创建一个gold.js文件
import Hilo from "hilojs"; import SmallGold from './SmallGold' let Enemy = 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() { let now = new Date().getTime() let difference = parseInt((now - this.startTime) / 200) let index = null; let differenceNow = parseInt((now - this.startTime) / 1000) if (0 <= differenceNow && differenceNow <= 60) { if (difference == 0) { index = 0 this.createGold(index, this.enemySpeed) } else if (difference % 70 == 0) {//0-15秒,障碍蛋1个 index = 1 this.createGold(index, this.danSpeed) } else if (difference % 147 == 0 || difference % 154 == 0) {//15-30秒障碍蛋2个(150-155) index = 1 this.createGold(index, this.danSpeed) } else if (difference % 222 == 0 || difference % 226 == 0 || difference % 235 == 0) {//30-45秒障碍蛋3个(225-230) index = 1 this.createGold(index, this.danSpeed) } else if (difference % 296 == 0 || difference % 302 == 0 || difference % 307 == 0 || difference % 311 == 0) {//60秒,障碍蛋4个 index = 1 this.createGold(index, this.danSpeed) } else { let number = this.random(0, 100); if (number < 40) { //0为金币2位红包1为蛋 index = 0 this.createGold(index, this.enemySpeed) } else if (number <= 100) { index = 2 this.createGold(index, this.redSpeed) } } } else { let nowmiao = 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 { let number = this.random(0, 100); if (number < 40) { //0为金币2位红包1为蛋 index = 0 this.createGold(index, this.enemySpeed) } else if (number <= 100) { index = 2 this.createGold(index, this.redSpeed) } } } }, createGold(index, enemySpeed) { let hold = undefined if (this.SmallGoldList[index].width && this.SmallGoldList[index].height) { hold = new SmallGold({ 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); } let widthScreen = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth let heightScreen = 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) { return Math.floor(Math.random() * (upper - lower + 1)) + lower; }, beginCreateEnemy() {//开始生成 this.timer = setInterval(() => { this.creatEnemy(); }, this.createSpeed); }, stopCreateEnemy() {//停止生成并全部移除 clearInterval(this.timer) this.removeAllChildren() }, checkCollision(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 Enemy
第五步:创建一个hand.js文件
import Hilo from "hilojs"; let hand = 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 = new Hilo.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 = new Hilo.Bitmap({ id: 'score', image: image, rect: [0, 0, image"htmlcode">import Hilo from "hilojs"; let SmallGold= 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 < this.y) { this.removeFromParent(); return } } }) export default SmallGold我这是在vue中使用
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“JavaScript实现H5接金币功能(实例代码)”评论...
更新动态
2024年12月25日
2024年12月25日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]