这篇文章主要为大家详细介绍了利用JavaScript怎么实现一个H5接金币小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，发现的小伙伴们可以参考一下：
JavaScript的特点
1.JavaScript主要用来向HTML页面添加交互行为。2.JavaScript可以直接嵌入到HTML页面，但写成单独的js文件有利于结构和行为的分离。3.JavaScript具有跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行。
安装插件
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 = 0export default class game { constructor(page) { this.page = page //设置的游戏时间 this.gameTime = 0 this.gameStatus = "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() { 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]); // 启动定时器刷新页面 参数为帧率 this.ticker = new Hilo.Ticker(60) // 舞台添加到定时队列中 this.ticker.addTick(this.stage) // 添加动画类到定时队列 this.ticker.addTick(Hilo.Tween); //启动ticker this.ticker.start(true); this.startGame(); } startGame() { //开始游戏 startTime = new Date().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(() => { 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?.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)) { return true; } return false; }})export default hand创建一个SmallGold.js文件
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中使用
<template> <div class="fix"> <div class="hilo"> <div ref="hilo" class="canvas"></div> <img src="../../assets/image/youton3.png" alt="" class="tong" /> <div class="score"> <div class="left"> <img :src="headimgurl" alt="" class="headimgurl" /> <div class="p1"> <p class="p2">玩家：{{ nickname }}</p> <p class="p3"> 得分：{{ score }} <span ><img src="../../assets/image/dan21.png" alt="" class="danNum" />x{{ danNum }}</span > </p> </div> </div> </div> </div> </div></template><script>import Game from "./js/game";export default { name: "game", data() { return { game: new Game(), }; }, computed: { score() { //游戏分数 return this.game.score; }, danNum() { //黑蛋碰撞个数 return this.game.danNum; }, }, watch: { "game.isEnd": { handler(newName) { // console.log(newName); if (newName) { this.goTo(); } }, immediate: true, }, }, mounted() { this.$nextTick(() => { this.game.page = this.$refs.hilo; this.game.init(); }); }, beforeDestroy() { this.game.gameOver(); }, destroyed() {}, methods: { goTo(){} },};</script>以上就是编程网小编为大家收集整理的利用JavaScript怎么实现一个H5接金币小游戏，如何觉得编程网网站的内容还不错，欢迎将编程网网站推荐给身边好友。
