今日做出做出一個春節接金幣紅包的活動，感覺挺不錯的分享給大家
這個小游戲采用hilojs實現的，詳情
第一步：安裝插件
npm i hilojs或者yarn add hilojs
第二步：創建一個Asset.js文件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
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文件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
|
import Hilo from "hilojs";import Asset from './Asset'//定義金幣紅包車參數import Gold from './gold'//隨機生成金幣紅包臭蛋import Hand from './hand'//汽車初始化級碰撞let startTime = 0export 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文件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
|
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文件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
|
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文件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
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中使用
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
|
<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接金幣內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://blog.csdn.net/monthover/article/details/113888029
