酷站(www.ku0.com)-致力于为互联网从业者提供动力!

热门关键词:  企业  as  baidu  c4rp3nt3r  美女
阿里云爆款特惠,精选爆款产品低至0.55折

JavaScript实现H5接金币功能的代码

来源:转载 作者:秩名 人气: 发布时间:2021-02-23
本篇文章主要介绍了JavaScript实现H5接金币功能的代码,对大家的学习或者工作具有一定的参考学习价值,感兴趣的小伙伴们可以参考一下,也感谢大家对酷站(ku0.com)的支持。

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

最后效果:

Inked14991c2b2aa5fad93d3ebf6a51a933c3_LI

版权声明:本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 959677720#qq.cn(#换@) 举报,一经查实,本站将立刻删除。
原文链接:https://blog.csdn.net/monthover/article/details/113888029

相关文章

  • JavaScript实现H5接金币功能的代码

    JavaScript实现H5接金币功能的代码

    今日做出做出一个春节接金币红包的活动,感觉挺不错的分享给大家 这个小游戏采用hilojs实现的, 详情 第一步:安装插件 npm i hilojs或者yarn add hilojs 第二步:创建一个Asset.js文件 import Hilo from hilojs;export default Hilo.Cla......
    02-23
  • js实现验证码干扰(静态)

    js实现验证码干扰(静态)

    效果 代码 !DOCTYPE htmlhtml head meta charset=UTF-8 title/title style *{ padding: 0; margin: 0; } canvas{ background: #272822; } /style /head body canvas id=canvas width=800 height=500/canvas script //获得画板 var canvas......
    02-23
  • 详解vue仿携程轮播图效果(滑动轮播,下方高度自适应)

    详解vue仿携程轮播图效果(滑动轮播,下方高度自适应)

    先看案例,使用vue+swiper实现,slide不同高度时,动态计算盒子高度,让其下方高度自适应的效果 首先搭建vue项目,这里不做过多说明,然后安装swiper npm install swiper --save-dev 1. js部分:初始化swiper组件,vue要在mounted生命周......
    02-12
  • uniapp微信小程序:key失效的解决方法介绍

    uniapp微信小程序:key失效的解决方法介绍

    uniapp 代码 template view image v-for=(item, i) in fileList :key=item[urlKey] :src=item[urlKey]/image /view/templatescript export default { props: { urlKey: {default: url}, fileList: Array } }/script 编译到 微信小程序 vi......
    01-21
  • 原生js实现自定义滚动条的实例教程

    原生js实现自定义滚动条的实例教程

    1.HTML文件 div1是滚动条,div2是滚动小球,div3是文本区域容器,div4是文本区域。 div id=div div id=div1 div id=div2 /div /div div id=div3 div id=div4 pCSS3 教程/p pCSS3 教程/p pCSS3 简介/p pCSS3 边框/p pCSS3 圆角/p pCSS3 背......
    01-21
  • Vue开发人员的7个最好的VSCode扩展的介绍

    Vue开发人员的7个最好的VSCode扩展的介绍

    在Visual Studio中添加正确的VS Code扩展可以让你作为开发者的生活变得更加轻松。 它们可以帮助格式化、可伸缩性、强制执行最佳实践,从而自动化开发过程中许多容易忘记的任务。它们也可以只是有趣的扩展,使我们的代码看起来更漂亮/更容......
    01-20
  • vue element el-transfer增加拖拽功能的实现

    vue element el-transfer增加拖拽功能的实现

    芯资管项目要求el-transfer增加拖拽排序,左右上下互相拖拽功能;原来的组件不支持拖拽,这里要用个第三方脱宅组件sortablejs 首先安装 1 sudo npm i sortablejs --save-dev html代码 1 2 3 4 5 template el-transfer ref = transfer id ......
    01-15
  • 微信小程序实现多图上传的方法

    微信小程序实现多图上传的方法

    看一下效果图 index.html view class=imgs block wx:for={{ imgs }} wx:key={{ index }} view class=img-box image src={{ item }} / icon class=iconfont size=18px color=gray data-index={{ index }} bind:tap=close type=cancel/icon......
    06-20
  • Javascript执行流程细节的介绍

    Javascript执行流程细节的介绍

    Javascript从定义到执行,JS引擎在实现层做了很多初始化工作,因此在学习JS引擎工作机制之前,我们需要引入几个相关的概念:执行环境栈、全局对象、执行环境、变量对象、活动对象、作用域和作用域链等,这些概念正是JS引擎工作的核心组件......
    05-15
  • javascript代码是如何被压缩

    javascript代码是如何被压缩

    随着前端的发展,特别是 React , Vue 等构造单页应用的兴起,前端的能力得以很大提升,随之而来的是项目的复杂度越来越大。 此时的前端的静态资源也越来越庞大,而毫无疑问 javascript 资源已是前端的主体资源,对于压缩它的体积至为重......
    05-06

最新更新