利用JavaScript怎么实现一个H5接金币小游戏

这篇文章主要为大家详细介绍了利用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接金币小游戏，如何觉得编程网网站的内容还不错，欢迎将编程网网站推荐给身边好友。