JavaScript实现H5接金币功能

Alone 等级 471 0 0

今日做出做出一个春节接金币红包的活动,感觉挺不错的分享给大家 这个小游戏采用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() { // 生成金币红包蛋 0-15秒,障碍蛋1个;15-30秒障碍蛋2个;30-45秒障碍蛋3个;45秒-60s 障碍蛋4个
        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接金币功能

收藏
评论区

相关推荐

JS排序算法
引子 有句话怎么说来着: 雷锋推倒雷峰塔,Java implements JavaScript. 当年,想凭借抱Java大腿火一把而不惜把自己名字给改了的JavaScript(原名LiveScript),如今早已光芒万丈。node JS的出现更是让JavaScript可以前后端通吃。虽然Java依然制霸企业级软件开发领域(C/C 的大神们不要打
教你用200行代码写一个爱豆拼拼乐H5小游戏(附源码)
前言 本文将带大家一步步实现一个H5拼图小游戏,考虑到H5游戏的轻量级和代码体积,我没有使用react或vue这些框架,而采用我自己写的dom库和原生javascript来实现业务功能,具体库代码可见我的文章如何用不到200行代码写一款属于自己的js类库(https://juejin.im/post/6844903880707293198),构建工具我采
What the f*ck JavaScript?
What the fck JavaScript? 一个有趣和棘手的 JavaScript 示例列表。 JavaScript 是一种很好的语言。
《前端实战总结》之使用解释器模式实现获取元素Xpath路径的算法
前端领域里基于javascript的设计模式和算法有很多,在很多复杂应用中也扮演着很重要的角色,接下来就介绍一下javascript设计模式中的解释器模式,并用它来实现一个获取元素Xpath路径的算法。 上期回顾 《前端实战总结》之迭代器模式的N1种应用场景(https://juejin.im/post/6844904008616771591)
JavaScript中的类型
JavaScript中的类型 一、关于类型 什么叫做类型?简单地说,类型就是把内存中的一个二进制序列赋予某种意义。比如,二进制序列0100 0000 0111 0000 0001 0101 0100 1011 1100 0110 1010 0111 1110 1111 1001 1110如果看作是64位无符号整数类型就是4
JavaScript基础加ES6语法
JavaScript 一、什么是JavaScript 当下最流行的脚本语言,在世界上的所有浏览器中都有js的身影,是一门脚本语言,可以用于我们与web站点和web应用程序的交互,还可以用于后台服务器的编写,例如node.js 二、语法特点 基于对象和事件驱动的松散型,解释型语言 单线程异步 三、JavaScript作用 页面的交
JavaScript实现H5接金币功能
今日做出做出一个春节接金币红包的活动,感觉挺不错的分享给大家 这个小游戏采用hilojs实现的,详情(https://hiloteam.github.io/Hilo/docs/apizh/index.html) 第一步:安装插件 npm i hilojs或者yarn add hilojs 第二步:创建一个Asset.js文件 language i
JavaScript sourceMap 笔记
js source map 建议打开一个真实的项目的sourceMap对照食用由于前端项目在网络中访问导致为了减少体积进行一系列优化操作,最后导致生产环境出问题无法定位到项目代码中的指定位置,使得调试变成一件很难得事。由此产生了Source Map。 它是个什么东西简单说,sourceMap就是一个文件,里面储存着位置信息。仔细点说,这个
js-Answers一
JavaScript的组成 JavaScript 由以下三部分组成: 1. ECMAScript(核心):JavaScript 语言基础 2. DOM(文档对象模型):规定了访问HTML和XML的接口 3. BOM(浏览器对象模型):提供了浏览器窗口之间进行交互的对象和方法 JS的基本数据类型和引用数据类型
14个优秀 JS 前端框架、库、工具及其使用时机
  这篇文章主要描述现今流行的一些 Javascript web 前端框架,库以及它们的适用场景。   新的 Javascript 库层出不穷,从而Web 社区愈发活跃、多样、在多方面快速发展。详细去描述每一种主流的 Javascript 框架和库近乎
JavaScript 是什么?
前言 引用《JavaScript 高级程序设计第四版》中说的话 ——“从简单的输入验证脚本到强大的编程语言,JavaScript 的崛起没有任何人预测到。它很简单,学会用只要几分钟;它又很复杂,掌握它要很多年。要真正学好用好 JavaScript,理解其本质、历史及局限性是非常重要的”。 面试官:JavaScript 是什么? 我:
理解 Javascript 中的 Async / Await
在本文中,我们将探讨async/await,对于每个Javascript开发人员来说,是异步编程的首选工具。如果您不熟悉javascript,请不要担心,本文将帮助您async/await从头开始理解。 介绍async/await 是javascript中的一种模式,可使您的代码以同步方式执行,但又不影响javascript的异步行为。 定义异步功能要定义一
JavaScript 和 Node.js 中事件循环
1.JavaScript中事件循环可以参考《JavaScript忍者秘籍第二版》第十三章,讲解的很好。JavaScript中事件循环,主要就在理解宏任务和微任务这两种异步任务。宏任务(macrotask): setTimeOut 、 setInterval 、 setImmediate 、 I/O 、 各种callback、 UI渲染 、messageCh
了解什么是 TypeScript
内容纲要 了解什么是 TypeScript TypeScript 基本语法 TypeScript 介绍 TypeScript 是什么TypeScript 是 JavaScript 的强类型版本。然后在编译期去掉类型和特有语法,生成纯粹的 JavaScript代码。由于最终在浏览器中运行的仍然是 JavaScript,所以 TypeScript 并
盘点3个可以操作JavaScript的Python库
前言我们都知道Python可以很轻松的实现某些功能,而且还可以编写网页,比如Remi,Pysimplegui,但是操作JavaScript这种浏览器的脚本语言,还是第一次听说,小编也是第一次听说,于是就跟大家脑补这一知识。 一、PyExecJS是一个可以执行JavaScript脚本的Python模块,可以与网页上的JavaScript进行交互,这样就能更加

热门文章

最新文章