JavaScript實現H5接金幣功能(例項程式碼)
阿新 • • 發佈：2021-02-26
今日做出做出一個春節接金幣紅包的活動，感覺挺不錯的分享給大家
這個小遊戲採用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.ticke
第四步：建立一個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,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.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,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,this.img.width,this.img.height],width: this.img.width / 2,height: this.img.height / 2,}).addTo(this);
},addScore(image) { //加分
if (this.img.width && image.width) {
this.score = new Hilo.Bitmap({
id: 'score',image: image,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="javascript實現H5接金幣功能(例項程式碼)" class="tong" /> <div class="score"> <div class="left"> <img :src="headimgurl" alt="javaScript實現H5接金幣功能(例項程式碼)" class="headimgurl" /> <div class="p1"> <p class="p2">玩家：{{ nickname }}</p> <p class="p3"> 得分：{{ score }} <span ><img src="../../assets/image/dan21.png" alt="JavaScript實現H5接金幣功能(例項程式碼)" 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接金幣內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！