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


Posted in Javascript onFebruary 22, 2021

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

最后效果

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

到此这篇关于JavaScript实现H5接金币功能(实例代码)的文章就介绍到这了,更多相关JavaScript接金币内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
深入理解JavaScript系列(14) 作用域链介绍(Scope Chain)
Apr 12 Javascript
如何将一个String和多个String值进行比较思路分析
Apr 22 Javascript
JS和Jquery获取和修改label的值的示例代码
Jan 15 Javascript
javascript生成json数据简单示例分享
Feb 14 Javascript
js调用浏览器打印模块实现点击按钮触发自定义函数
Mar 21 Javascript
微信小程序 教程之小程序配置
Oct 17 Javascript
AngularJS深入探讨scope,继承结构,事件系统和生命周期
Nov 02 Javascript
js脚本编写简单刷票投票系统
Jun 27 Javascript
Node.js pipe实现源码解析
Aug 12 Javascript
vue.js轮播图组件使用方法详解
Jul 03 Javascript
jQuery实现表单动态添加数据并提交的方法
Jul 19 jQuery
React自定义hook的方法
Jun 25 Javascript
nestjs返回给前端数据格式的封装实现
Feb 22 #Javascript
NestJs使用Mongoose对MongoDB操作的方法
Feb 22 #Javascript
linux服务器快速卸载安装node环境(简单上手)
Feb 22 #Javascript
k8s node节点重新加入master集群的实现
Feb 22 #Javascript
js实现简单图片拖拽效果
Feb 22 #Javascript
用vite搭建vue3应用的实现方法
Feb 22 #Vue.js
详解Vite的新体验
Feb 22 #Javascript
You might like
PHP file_get_contents函数读取远程数据超时的解决方法
2015/05/13 PHP
PHP创建单例后台进程的方法示例
2017/05/23 PHP
javascript 类方法定义还是有点区别
2009/04/15 Javascript
关于hashchangebroker和statehashable的补充文档
2011/08/08 Javascript
JavaScript中几种排序算法的简单实现
2015/07/29 Javascript
简单谈谈json跨域
2016/03/13 Javascript
Web前端开发工具——bower依赖包管理工具
2016/03/29 Javascript
Vue中使用vux的配置详解
2017/05/05 Javascript
webpack3+React 的配置全解
2017/08/21 Javascript
Vue渲染函数详解
2017/09/15 Javascript
js实现数组内数据的上移和下移的实例
2017/11/14 Javascript
JavaScript实用代码小技巧
2018/08/23 Javascript
仿iPhone通讯录制作小程序自定义选择组件的实现
2019/05/23 Javascript
在vue中使用eslint,配合vscode的操作
2020/11/09 Javascript
python使用BeautifulSoup分析网页信息的方法
2015/04/04 Python
python返回昨天日期的方法
2015/05/13 Python
Python如何import文件夹下的文件(实现方法)
2017/01/24 Python
python3.6+opencv3.4实现鼠标交互查看图片像素
2018/02/26 Python
pandas将DataFrame的列变成行索引的方法
2018/04/10 Python
在python中安装basemap的教程
2018/09/20 Python
详解python Todo清单实战
2018/11/01 Python
Python采集猫眼两万条数据 对《无名之辈》影评进行分析
2018/12/05 Python
python程序快速缩进多行代码方法总结
2019/06/23 Python
VPS CENTOS 上配置python,mysql,nginx,uwsgi,django的方法详解
2019/07/01 Python
Flask配置Cors跨域的实现
2019/07/12 Python
Python任务调度模块APScheduler使用
2020/04/15 Python
如何理解python对象
2020/06/21 Python
pyqt5 textEdit、lineEdit操作的示例代码
2020/08/12 Python
用python写PDF转换器的实现
2020/10/29 Python
python 实现简单的计算器(gui界面)
2020/11/11 Python
教师党员公开承诺事项
2014/05/28 职场文书
设备售后服务承诺书
2014/05/30 职场文书
幼儿教师师德师风自我剖析材料
2014/09/29 职场文书
采购内勤岗位职责
2015/04/13 职场文书
2015年度个人工作总结报告
2015/10/24 职场文书
Python实现简单的猜单词
2021/06/15 Python