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

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› JavaScript›JavaScript编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

今日做出做出一个春节接金币红包的活动，感觉挺不错的分享给大家
这个小游戏采用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() {
 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>