JavaScript实现消消乐的源码下载地址：点击下载源代码
index.html
|
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
|
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>LuckyStar</title>
<link rel="stylesheet" href="./css/index.css?v=1.0.0" rel="external nofollow" >
</head>
<body>
<div class="lucky-star" id="luckyStar">
<div class="score-target">
<p class="score-level">关卡 <span id="scoreLevel"></span></p>
<p>目标：<span id="scoreTarget"></span></p>
</div>
<div class="score-current">得分<span id="scoreCurrent"></span></div>
<div class="score-select" id="scoreSelect"></div>
<ul class="star-list" id="starList"> </ul>
</div>
</body>
<script src="./js/countUp.js"></script>
<script src="./js/index.js"></script>
<script src="./js/resize.js"></script>
<script>
new PopStar()
</script>
</html>
|
JS文件
main.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
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
|
(function() {
//全局配置
var config = {
tileWidth: .75, //小星星的宽高
tileHeight: .75,
tileSet: [], //存储小星星的二维数组
tableRows: 10, //行数
baseScore: 5, //每一个小星星的基础分数
stepScore: 10, //每一个小星星的递增分数
targetScore: 2000, //目标分数，初始为2000
el: document.querySelector('#starList'),// 星星列表
scoreTarget: document.querySelector('#scoreTarget'),//目标分数
scoreCurrent: document.querySelector('#scoreCurrent'),//当前分数
scoreSelect: document.querySelector('#scoreSelect'),//选中星星分数
scoreLevel: document.querySelector('#scoreLevel'),//当前所在的关数
};
//全局计算属性
var computed = {
flag: true, //锁
choose: [], //已选中的小星星集合
timer: null,
totalScore: 0, //总分数
tempTile: null,
level: 1, //当前所在的关数（每闯过一关+1，游戏失败回复为1）
stepTargetScore: 1000, //闯关成功的递增分数（1000/关）
score: 0 //当前的计算分数
};
//Block对象
function Block(number, row, col) {
var tile = document.createElement('li');
tile.width = config.tileWidth;
tile.height = config.tileHeight;
tile.number = number;
tile.row = row;
tile.col = col;
return tile;
}
//入口函数
function PopStar() {
return new PopStar.prototype.init();
}
//PopStar原型
PopStar.prototype = {
/**
* PopStar的入口函数
*/
init: function() {
this.initTable();
},
/**
* 初始化操作
*/
initTable: function() {
this.initScore();
this.initTileSet();
this.initBlocks();
},
/**
* 初始化当前分数和目标
*/
initScore: function() {
new CountUp(config.scoreTarget, config.targetScore, config.targetScore).start();
config.scoreCurrent.innerHTML = computed.totalScore;
config.scoreLevel.innerHTML = computed.level;
},
/**
* 点击事件操作
*/
mouseClick: function() {
var tileSet = config.tileSet,
choose = computed.choose,
baseScore = config.baseScore,
stepScore = config.stepScore,
el = config.el,
self = this,
len = choose.length;
if (!computed.flag || len <= 1) {
return;
}
computed.flag = false;
computed.tempTile = null;
var score = 0;
for (var i = 0; i < len; i++) {
score += baseScore + i * stepScore;
}
new CountUp(config.scoreCurrent, computed.totalScore, computed.totalScore += score).start();
for (var i = 0; i < len; i++) {
setTimeout(function(i) {
tileSet[choose[i].row][choose[i].col] = null;
el.removeChild(choose[i]);
}, i * 100, i);
}
setTimeout(function() {
self.move();
//判断结束
setTimeout(function() {
if (self.isFinish()) {
self.clear();
if (computed.totalScore >= config.targetScore) {
new CountUp(config.scoreTarget, config.targetScore, config.targetScore += (computed.level - 1) * computed
.stepTargetScore)
.start();
new CountUp(config.scoreLevel, computed.level, computed.level += 1).start();
alert("恭喜获胜");
console.log("恭喜获胜")
} else {
config.targetScore = config.scoreTarget = 2000;
computed.level = computed.totalScore = 0;
alert("游戏失败");
console.log("游戏失败")
}
computed.flag = true;
} else {
choose = [];
computed.flag = true; //在所有动作都执行完成之后释放锁
self.mouseOver(computed.tempTile);
}
}, 300 + choose.length * 150);
}, choose.length * 100);
},
/**
* 闯关成功或失败清除（清除二维数组和el的子节点）操作
*/
clear: function() {
var tileSet = config.tileSet,
rows = tileSet.length,
el = config.el;
var temp = [];
for (var i = rows - 1; i >= 0; i--) {
for (var j = tileSet[i].length - 1; j >= 0; j--) {
if (tileSet[i][j] === null) {
continue;
}
temp.push(tileSet[i][j])
tileSet[i][j] = null;
}
}
for (var k = 0; k < temp.length; k++) {
setTimeout(function(k) {
el.removeChild(temp[k]);
if(k>=temp.length-1){
setTimeout(function(k) {
new PopStar();
},1000)
}
}, k * 100, k);
}
},
/**
* 是否游戏结束
* @returns {boolean}
*/
isFinish: function() {
var tileSet = config.tileSet,
rows = tileSet.length;
for (var i = 0; i < rows; i++) {
var row = tileSet[i].length;
for (var j = 0; j < row; j++) {
var temp = [];
this.checkLink(tileSet[i][j], temp);
if (temp.length > 1) {
return false;
}
}
}
return true;
},
/**
* 消除星星后的移动操作
*/
move: function() {
var rows = config.tableRows,
tileSet = config.tileSet;
//向下移动
for (var i = 0; i < rows; i++) {
var pointer = 0; //pointer指向小方块，当遇到null的时候停止，等待上面的小方块落到这里来
for (var j = 0; j < rows; j++) {
if (tileSet[j][i] != null) {
if (j !== pointer) {
tileSet[pointer][i] = tileSet[j][i];
tileSet[j][i].row = pointer;
tileSet[j][i] = null;
}
pointer++;
}
}
}
//横向移动（最下面一行其中有无空列）
for (var i = 0; i < tileSet[0].length;) {
if (tileSet[0][i] == null) {
for (var j = 0; j < rows; j++) {
tileSet[j].splice(i, 1);
}
continue;
}
i++;
}
this.refresh()
},
/**
* 鼠标移入时的闪烁操作
* @param obj
*/
mouseOver: function(obj) {
if (!computed.flag) { //处于锁定状态不允许有操作
computed.tempTile = obj;
return;
}
this.clearFlicker();
var choose = [];
this.checkLink(obj, choose);
computed.choose = choose;
if (choose.length <= 1) {
choose = [];
return;
}
this.flicker(choose);
this.computeScore(choose);
},
/**
* 计算已选中的星星分数
* @param arr
*/
computeScore: function(arr) {
var score = 0,
len = arr.length,
baseScore = config.baseScore,
stepScore = config.stepScore;
for (var i = 0; i < len; i++) {
score += baseScore + i * stepScore
}
if (score <= 0) {
return;
}
computed.score = score;
config.scoreSelect.style.opacity = '1';
config.scoreSelect.innerHTML = arr.length + "连消 " + score + "分";
setTimeout(function() {
config.scoreSelect.style.opacity = '0';
}, 1200)
},
/**
* 鼠标移出时的消除星星闪烁的操作
*/
clearFlicker: function() {
var tileSet = config.tileSet;
for (var i = 0; i < tileSet.length; i++) {
for (var j = 0; j < tileSet[i].length; j++) {
var div = tileSet[i][j];
if (div === null) {
continue;
}
div.classList.remove("scale");
}
}
},
/**
* 星星闪烁
* @param arr
*/
flicker: function(arr) {
for (var i = 0; i < arr.length; i++) {
var div = arr[i];
div.classList.add("scale");
}
},
/**
* 检查鼠标移入的这个星星是否有相连着的相同的星星，
* @param obj star
* @param arr choose
*/
checkLink: function(obj, arr) {
if (obj === null) {
return;
}
arr.push(obj);
/**
* 检查左边方块是否可以加入到选入的可消除星星行列：
* 选中的星星不能是最左边的，
* 选中的星星左边要有星星，
* 选中的星星左边的星星的跟选中的星星一样，
* 选中的星星左边的星星没有被选中过
*/
var tileSet = config.tileSet,
rows = config.tableRows;
if (obj.col > 0 && tileSet[obj.row][obj.col - 1] && tileSet[obj.row][obj.col - 1].number === obj.number && arr.indexOf(
tileSet[obj.row][obj.col - 1]) === -1) {
this.checkLink(tileSet[obj.row][obj.col - 1], arr);
}
if (obj.col < rows - 1 && tileSet[obj.row][obj.col + 1] && tileSet[obj.row][obj.col + 1].number === obj.number &&
arr.indexOf(tileSet[obj.row][obj.col + 1]) === -1) {
this.checkLink(tileSet[obj.row][obj.col + 1], arr);
}
if (obj.row < rows - 1 && tileSet[obj.row + 1][obj.col] && tileSet[obj.row + 1][obj.col].number === obj.number &&
arr.indexOf(tileSet[obj.row + 1][obj.col]) === -1) {
this.checkLink(tileSet[obj.row + 1][obj.col], arr);
}
if (obj.row > 0 && tileSet[obj.row - 1][obj.col] && tileSet[obj.row - 1][obj.col].number === obj.number && arr.indexOf(
tileSet[obj.row - 1][obj.col]) === -1) {
this.checkLink(tileSet[obj.row - 1][obj.col], arr);
}
},
/**
* 初始化二维数组
*/
initTileSet: function() {
var rows = config.tableRows,
arr = config.tileSet;
for (var i = 0; i < rows; i++) {
arr[i] = [];
for (var j = 0; j < rows; j++) {
arr[i][j] = [];
}
}
},
/**
* 初始化el的子节点
*/
initBlocks: function() {
var tileSet = config.tileSet,
self = this,
el = config.el,
cols = tileSet.length;
for (var i = 0; i < cols; i++) {
var rows = tileSet[i].length;
for (var j = 0; j < rows; j++) {
var tile = this.createBlock(Math.floor(Math.random() * 5), i, j);
tile.onmouseover = function() {
self.mouseOver(this)
};
tile.onclick = function() {
self.mouseClick();
};
tileSet[i][j] = tile;
el.appendChild(tile);
}
}
this.refresh()
},
/**
* 渲染el的子节点
*/
refresh: function() {
var tileSet = config.tileSet;
for (var i = 0; i < tileSet.length; i++) {
var row = tileSet[i].length;
for (var j = 0; j < row; j++) {
var tile = tileSet[i][j];
if (tile == null) {
continue;
}
tile.row = i;
tile.col = j;
tile.style.left = tileSet[i][j].col * config.tileWidth + "rem";
tile.style.bottom = tileSet[i][j].row * config.tileHeight + "rem";
tile.style.backgroundImage = "url('./images/" + tileSet[i][j].number + ".png')";
}
}
},
/**
* 创建星星子节点的函数
* @param number
* @param row
* @param col
* @returns {HTMLElement}
*/
createBlock: function(number, row, col) {
return new Block(number, row, col);
},
};
PopStar.prototype.init.prototype = PopStar.prototype;
window.PopStar = PopStar;
})();
|
index.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
|
(function()
{function u(a,b,c)
{
var d=document.createElement("li");
d.width=e.tileWidth;d.height=e.tileHeight;
d.number=a;
d.row=b;d.col=c;return d}
function m()
{return new m.prototype.init
}
var e={tileWidth:.75,tileHeight:.75,tileSet: [],
tableRows:10,baseScore:5,
stepScore:10,
targetScore:2E3,
el:document.querySelector("#starList"),
scoreTarget:document.querySelector("#scoreTarget"),
scoreCurrent:document.querySelector("#scoreCurrent"),
scoreSelect:document.querySelector("#scoreSelect"),
scoreLevel:document.querySelector("#scoreLevel")
},
n=!0,t=[],p=0,r=null,q=1;
m.prototype={
init:function(){this.initTable()
}
,initTable:function(){
this.initScore();
this.initTileSet();
this.initBlocks()
}
,
initScore:function(){
(new CountUp(e.scoreTarget,e.targetScore,e.targetScore)).start();
e.scoreCurrent.innerHTML=p;e.scoreLevel.innerHTML=q
},
mouseClick:function(){
var a=e.tileSet,b=t,c=e.baseScore,d=e.stepScore,f=e.el,g=this,h=b.length;if(n&&!(1>=h)){
n=!1;r=null;
for(var l=0,k=0;
k<h;k++)l+=c+k*d;(new CountUp(e.scoreCurrent,p,p+=l)).start();
for(k=0;k<h;k++)
setTimeout(function(c){a[b[c].row][b[c].col]=
null;
f.removeChild(b[c])},100*k,k);
setTimeout(function(){g.move();
setTimeout(function()
{g.isFinish()?(g.clear(),p>=e.targetScore?((new CountUp(e.scoreTarget,e.targetScore,e.targetScore+=1E3*(q-1))).start(),(new CountUp(e.scoreLevel,q,q+=1)).start(),alert("\u606d\u559c\u83b7\u80dc"),console.log("\u606d\u559c\u83b7\u80dc")):(e.targetScore=e.scoreTarget=2E3,q=p=0,alert("\u6e38\u620f\u5931\u8d25"),console.log("\u6e38\u620f\u5931\u8d25")),n=!0):(b=[],n=!0,g.mouseOver(r))},300+150*b.length)},100*b.length)}},
clear:function()
{for(var a=e.tileSet,b=e.el,c=[],
d=a.length-1;0<=d;d--)
for(var f=a[d].length-1;0<=f;f--)
null!==a[d][f]&&(c.push(a[d][f]),a[d][f]=null);
for(a=0;a<c.length;a++)
setTimeout(function(a)
{b.removeChild(c[a]);
a>=c.length-1&&setTimeout(function(a){new m},1E3)},100*a,a)},isFinish:function()
{for(var a=e.tileSet,b=a.length,c=0;c<b;c++)
for(var d=a[c].length,f=0;f<d;f++)
{var g=[];this.checkLink(a[c][f],g);
if(1<g.length)
return!1}return!0},
move:function()
{for(var a=e.tableRows,b=e.tileSet,c=0;
c<a;c++)for(var d=
0,f=0;f<a;f++)null!=b[f][c]&&(f!==d&&(b[d][c]=b[f][c],b[f][c].row=d,b[f][c]=null),d++);
for(c=0;c<b[0].length;
)if(null==b[0][c])
for(f=0;f<a;f++)b[f].splice(c,1);else c++;this.refresh()},
mouseOver:function(a){if(n)
{this.clearFlicker();
var b=[];
this.checkLink(a,b);
t=b;1>=b.length||(this.flicker(b),this.computeScore(b))}
else r=a
},
computeScore:function(a)
{for(var b=0,c=a.length,d=e.baseScore,f=e.stepScore,g=0;
g<c;g++)b+=d+g*f;
0>=b||(e.scoreSelect.style.opacity="1",e.scoreSelect.innerHTML=a.length+"\u8fde\u6d88 "+
b+"\u5206",setTimeout(function(){
e.scoreSelect.style.opacity="0"},1200))
},clearFlicker:function(){
for(var a=e.tileSet,b=0;b<a.length;b++)
for(var c=0;c<a[b].length;c++){var d=a[b][c];null!==d&&d.classList.remove("scale")}},flicker:function(a){for(var b=0;b<a.length;b++)a[b].classList.add("scale")
},
checkLink:function(a,b){
if(null!==a){
b.push(a);var c=e.tileSet,d=e.tableRows;0<a.col&&c[a.row][a.col-1]&&c[a.row][a.col-1].number===a.number&&-1===b.indexOf(c[a.row][a.col-1])&&this.checkLink(c[a.row][a.col-
1],b);a.col<d-1&&c[a.row][a.col+1]&&c[a.row]
[a.col+1].number===a.number&&-1===b.indexOf(c[a.row][a.col+1])&&this.checkLink(c[a.row][a.col+1],b);a.row<d-1&&c[a.row+1][a.col]&&c[a.row+1][a.col].number===a.number&&-1===b.indexOf(c[a.row+1][a.col])&&this.checkLink(c[a.row+1][a.col],b);0<a.row&&c[a.row-1][a.col]&&c[a.row-1][a.col].number===a.number&&-1===b.indexOf(c[a.row-1][a.col])&&this.checkLink(c[a.row-1][a.col],b)}},
initTileSet:function(){
for(var a=e.tableRows,b=e.tileSet,c=0;c<a;c++){b[c]=[];
for(var d= 0;d<a;d++)b[c][d]=[]}},
initBlocks:function()
{
for(var a=e.tileSet,b=this,c=e.el,d=a.length,f=0;f<d;f++)
for(var g=a[f].length,h=0;h<g;h++){
var l=this.createBlock(Math.floor(5*Math.random()),f,h);
l.onmouseover=function(){b.mouseOver(this)};
l.onclick=function(){b.mouseClick()};
a[f][h]=l;
c.appendChild(l)}
this.refresh()},
refresh:function()
{for(var a=e.tileSet,b=0;b<a.length;b++)
for(var c=a[b].length,d=0;d<c;d++)
{var f=a[b][d];
null!=f&&(f.row=b,f.col=d,f.style.left=a[b][d].col*e.tileWidth+"rem",f.style.bottom=
a[b][d].row*e.tileHeight+"rem",f.style.backgroundImage="url('./images/"+a[b][d].number+".png')")
}
}
,createBlock:function(a,b,c){return new u(a,b,c)
}
}
;m.prototype.init.prototype=m.prototype;window.PopStar=m
})();
|
resize.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
// JavaScript Document
(function px2rem(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
/*
* 100 -> html,body { font-size:100px; }
* 750 -> 此处以 iPhone6 两倍设计稿 宽度750px 布局页面
* 根据具体情况改变这两个数值
*/
};
if (!doc.addEventListener) return;
// 窗口大小发生变化，初始化
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
//防止在html未加载完毕时执行，保证获取正确的页宽
setTimeout(function(){
px2rem(doc, win);
}, 200);
})(document, window);
|
countUp.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
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
|
(function(root, factory) {
if (typeof define === 'function' && define.amd) {
define(factory);
} else if (typeof exports === 'object') {
module.exports = factory(require, exports, module);
} else {
root.CountUp = factory();
}
}(this, function(require, exports, module) {
/*
countUp.js
by @inorganik
*/
// target = id of html element or var of previously selected html element where counting occurs
// startVal = the value you want to begin at
// endVal = the value you want to arrive at
// decimals = number of decimal places, default 0
// duration = duration of animation in seconds, default 2
// options = optional object of options (see below)
var CountUp = function(target, startVal, endVal, decimals, duration, options) {
var self = this;
self.version = function () { return '1.9.3'; };
// default options
self.options = {
useEasing: true, // toggle easing
useGrouping: true, // 1,000,000 vs 1000000
separator: ',', // character to use as a separator
decimal: '.', // character to use as a decimal
easingFn: easeOutExpo, // optional custom easing function, default is Robert Penner's easeOutExpo
formattingFn: formatNumber, // optional custom formatting function, default is formatNumber above
prefix: '', // optional text before the result
suffix: '', // optional text after the result
numerals: [] // optionally pass an array of custom numerals for 0-9
};
// extend default options with passed options object
if (options && typeof options === 'object') {
for (var key in self.options) {
if (options.hasOwnProperty(key) && options[key] !== null) {
self.options[key] = options[key];
}
}
}
if (self.options.separator === '') {
self.options.useGrouping = false;
}
else {
// ensure the separator is a string (formatNumber assumes this)
self.options.separator = '' + self.options.separator;
}
// make sure requestAnimationFrame and cancelAnimationFrame are defined
// polyfill for browsers without native support
// by Opera engineer Erik Möller
var lastTime = 0;
var vendors = ['webkit', 'moz', 'ms', 'o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall);
lastTime = currTime + timeToCall;
return id;
};
}
if (!window.cancelAnimationFrame) {
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}
function formatNumber(num) {
var neg = (num < 0),
x, x1, x2, x3, i, len;
num = Math.abs(num).toFixed(self.decimals);
num += '';
x = num.split('.');
x1 = x[0];
x2 = x.length > 1 ? self.options.decimal + x[1] : '';
if (self.options.useGrouping) {
x3 = '';
for (i = 0, len = x1.length; i < len; ++i) {
if (i !== 0 && ((i % 3) === 0)) {
x3 = self.options.separator + x3;
}
x3 = x1[len - i - 1] + x3;
}
x1 = x3;
}
// optional numeral substitution
if (self.options.numerals.length) {
x1 = x1.replace(/[0-9]/g, function(w) {
return self.options.numerals[+w];
})
x2 = x2.replace(/[0-9]/g, function(w) {
return self.options.numerals[+w];
})
}
return (neg ? '-' : '') + self.options.prefix + x1 + x2 + self.options.suffix;
}
// Robert Penner's easeOutExpo
function easeOutExpo(t, b, c, d) {
return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
}
function ensureNumber(n) {
return (typeof n === 'number' && !isNaN(n));
}
self.initialize = function() {
if (self.initialized) return true;
self.error = '';
self.d = (typeof target === 'string') ? document.getElementById(target) : target;
if (!self.d) {
self.error = '[CountUp] target is null or undefined'
return false;
}
self.startVal = Number(startVal);
self.endVal = Number(endVal);
// error checks
if (ensureNumber(self.startVal) && ensureNumber(self.endVal)) {
self.decimals = Math.max(0, decimals || 0);
self.dec = Math.pow(10, self.decimals);
self.duration = Number(duration) * 1000 || 2000;
self.countDown = (self.startVal > self.endVal);
self.frameVal = self.startVal;
self.initialized = true;
return true;
}
else {
self.error = '[CountUp] startVal ('+startVal+') or endVal ('+endVal+') is not a number';
return false;
}
};
// Print value to target
self.printValue = function(value) {
var result = self.options.formattingFn(value);
if (self.d.tagName === 'INPUT') {
this.d.value = result;
}
else if (self.d.tagName === 'text' || self.d.tagName === 'tspan') {
this.d.textContent = result;
}
else {
this.d.innerHTML = result;
}
};
self.count = function(timestamp) {
if (!self.startTime) { self.startTime = timestamp; }
self.timestamp = timestamp;
var progress = timestamp - self.startTime;
self.remaining = self.duration - progress;
// to ease or not to ease
if (self.options.useEasing) {
if (self.countDown) {
self.frameVal = self.startVal - self.options.easingFn(progress, 0, self.startVal - self.endVal, self.duration);
} else {
self.frameVal = self.options.easingFn(progress, self.startVal, self.endVal - self.startVal, self.duration);
}
} else {
if (self.countDown) {
self.frameVal = self.startVal - ((self.startVal - self.endVal) * (progress / self.duration));
} else {
self.frameVal = self.startVal + (self.endVal - self.startVal) * (progress / self.duration);
}
}
// don't go past endVal since progress can exceed duration in the last frame
if (self.countDown) {
self.frameVal = (self.frameVal < self.endVal) ? self.endVal : self.frameVal;
} else {
self.frameVal = (self.frameVal > self.endVal) ? self.endVal : self.frameVal;
}
// decimal
self.frameVal = Math.round(self.frameVal*self.dec)/self.dec;
// format and print value
self.printValue(self.frameVal);
// whether to continue
if (progress < self.duration) {
self.rAF = requestAnimationFrame(self.count);
} else {
if (self.callback) self.callback();
}
};
// start your animation
self.start = function(callback) {
if (!self.initialize()) return;
self.callback = callback;
self.rAF = requestAnimationFrame(self.count);
};
// toggles pause/resume animation
self.pauseResume = function() {
if (!self.paused) {
self.paused = true;
cancelAnimationFrame(self.rAF);
} else {
self.paused = false;
delete self.startTime;
self.duration = self.remaining;
self.startVal = self.frameVal;
requestAnimationFrame(self.count);
}
};
// reset to startVal so animation can be run again
self.reset = function() {
self.paused = false;
delete self.startTime;
self.initialized = false;
if (self.initialize()) {
cancelAnimationFrame(self.rAF);
self.printValue(self.startVal);
}
};
// pass a new endVal and start animation
self.update = function (newEndVal) {
if (!self.initialize()) return;
newEndVal = Number(newEndVal);
if (!ensureNumber(newEndVal)) {
self.error = '[CountUp] update() - new endVal is not a number: '+newEndVal;
return;
}
self.error = '';
if (newEndVal === self.frameVal) return;
cancelAnimationFrame(self.rAF);
self.paused = false;
delete self.startTime;
self.startVal = self.frameVal;
self.endVal = newEndVal;
self.countDown = (self.startVal > self.endVal);
self.rAF = requestAnimationFrame(self.count);
};
// format startVal on initialization
if (self.initialize()) self.printValue(self.startVal);
};
return CountUp;
}));
|
index.css
|
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
|
a,body,button,dd,div,dl,dt,form,h1,h2,h3,h4,h5,h6,input,label,li,ol,p,span,table,td,textarea,th,tr,ul
{ -webkit-box-sizing:border-box;
-moz-box-sizing:border-box;box-sizing:border-box;
margin:0;padding:0;
border:0;-webkit-tap-highlight-color:transparent
}
body,html{
width:100%;min-height:100%;background-color:#fff;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none
}
body
{color:#333;
font-family:微软雅黑
}
h1,h2,h3,h4,h5,h6
{
font-weight:400;
font-size:100%
}
a{
color:#555
}
a,a:hover{
text-decoration:none
}
img{
border:none
}
li,ol,ul{
list-style:none
}
input,textarea{
outline:0;
-webkit-appearance:none
}
::-webkit-input-placeholder{
color:#b0b0b0
}
:-moz-placeholder,::-moz-placeholder{
color:#b0b0b0
}
:-ms-input-placeholder{
color:#b0b0b0
}
[v-cloak]{
display:none
}
.lucky-star{
position:fixed;
top:0;left:0;width:100%;
height:100%;
background-image:url(../images/cover.jpg);background-size:cover;background-repeat:no-repeat;font-size:0;
-moz-background-size:cover;
-o-background-size:cover
}
.score-target
{
padding:0 .3rem;height:1.5rem;
-webkit-box-pack:justify;
-webkit-justify-content:space-between;
-moz-box-pack:justify;
-ms-flex-pack:justify;
justify-content:space-between
}
.score-current,.score-target{
display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;
display:flex;width:100%;
color:#fff;font-size:.24rem;
-webkit-box-align:center;
-webkit-align-items:center;
-moz-box-align:center;
-ms-flex-align:center;
align-items:center
}
.score-current{
position:absolute;top:.3rem;
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
-webkit-flex-direction:column;
-moz-box-orient:vertical;
-moz-box-direction:normal;
-ms-flex-direction:column;
flex-direction:column;
-webkit-box-pack:center;
-webkit-justify-content:center;
-moz-box-pack:center;
-ms-flex-pack:center;
justify-content:center
}
.score-current span{
color:#fffc0f;
font-size:.48rem
}
.score-select{
width:100%;
color:#fff;
text-align:center;
font-size:.28rem;opacity:0;
-webkit-transition:opacity 1s;
-moz-transition:opacity 1s;
-o-transition:opacity 1s;
transition:opacity 1s
}
.star-list{
position:fixed;
bottom:0;left:0;
width:100%;
height:70%}
.star-list li{
position:absolute;
width:.75rem;
height:.75rem;
border:0;
-webkit-border-radius:.16rem;
-moz-border-radius:.16rem;
border-radius:.16rem;
background-size:cover;
-webkit-transition:left .3s,bottom .3s,-webkit-transform .3s;-moz-transition:transform .3s,left .3s,bottom .3s,-moz-transform .3s;-o-transition:left .3s,bottom .3s,-o-transform .3s;transition:left .3s,bottom .3s,-webkit-transform .3s;transition:transform .3s,left .3s,bottom .3s;transition:transform .3s,left .3s,bottom .3s,-webkit-transform .3s,-moz-transform .3s,-o-transform .3s;
-moz-background-size:cover;
-o-background-size:cover
}
.star-list li.scale{
border:2px solid #bfefff;
-webkit-animation:scale .3s linear infinite alternate;
-moz-animation:scale .3s linear infinite alternate;
-o-animation:scale .3s linear infinite alternate;animation:scale .3s linear infinite alternate}
.star-list li img{position:absolute;top:15%;left:15%;width:70%;height:70%
}@-webkit-keyframes scale{
0%{-webkit-transform:scale(1);transform:scale(1)
}
to{
-webkit-transform:scale(.95);
transform:scale(.95)
}
}
@-moz-keyframes scale{
0%{
-moz-transform:scale(1);
transform:scale(1)}
to{
-moz-transform:scale(.95);
transform:scale(.95)
}
}
@-o-keyframes scale{
0%{
-o-transform:scale(1);
transform:scale(1)
}
to{
-o-transform:scale(.95);transform:scale(.95)
}
}
@keyframes scale{
0%{
-webkit-transform:scale(1);
-moz-transform:scale(1);
-o-transform:scale(1);
transform:scale(1)
}
to
{
-webkit-transform:scale(.95);
-moz-transform:scale(.95);
-o-transform:scale(.95);transform:scale(.95)
}
}
|
.DS_Store
到此这篇关于JavaScript实现消消乐-源代码的文章就介绍到这了,更多相关js实现消消乐内容请搜索服务器之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持服务器之家！
原文链接：https://blog.csdn.net/qq_44757034/article/details/112129786