JavaScript source code for Elimination
|
JavaScript to achieve the source code download address of the game: click to download the source code
index.html <!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">Level<span id="scoreLevel"></span></p> <p>Target: <span id="scoreTarget"></span></p> </div> <div class="score-current">Score<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 file
main.js
(function() {
//Global configuration var config = {
tileWidth: .75, //Width and height of the small star tileHeight: .75,
tileSet: [], //Two-dimensional array for storing small stars tableRows: 10, //Number of rows baseScore: 5, //The basic score of each small star stepScore: 10, //The incremental score of each small star targetScore: 2000, //The target score, initially 2000
el: document.querySelector('#starList'), // star list scoreTarget: document.querySelector('#scoreTarget'), // target score scoreCurrent: document.querySelector('#scoreCurrent'), // current score scoreSelect: document.querySelector('#scoreSelect'), // selected star score scoreLevel: document.querySelector('#scoreLevel'), // current level };
//Global computed properties var computed = {
flag: true, //lock choose: [], //selected star collection timer: null,
totalScore: 0, //Total score tempTile: null,
level: 1, //Current level number (+1 for each level passed, 1 for game failure)
stepTargetScore: 1000, //Incremental score for successful level passing (1000/level)
score: 0 //Current calculation score };
//Block object 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;
}
//Entry function function PopStar() {
return new PopStar.prototype.init();
}
//PopStar prototype PopStar.prototype = {
/**
* PopStar's entry function */
init: function() {
this.initTable();
},
/**
* Initialization operation */
initTable: function() {
this.initScore();
this.initTileSet();
this.initBlocks();
},
/**
* Initialize current score and target */
initScore: function() {
new CountUp(config.scoreTarget, config.targetScore, config.targetScore).start();
config.scoreCurrent.innerHTML = computed.totalScore;
config.scoreLevel.innerHTML = computed.level;
},
/**
* Click event operation */
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();
//Judge the end 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("Congratulations on winning");
console.log("Congratulations on winning")
} else {
config.targetScore = config.scoreTarget = 2000;
computed.level = computed.totalScore = 0;
alert("Game failed");
console.log("Game failed")
}
computed.flag = true;
} else {
choose = [];
computed.flag = true; //Release the lock after all actions are completed self.mouseOver(computed.tempTile);
}
}, 300 + choose.length * 150);
}, choose.length * 100);
},
/**
* Clear the level if it succeeds or fails (clear the two-dimensional array and the child nodes of 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);
}
},
/**
* Is the game over? * @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 operations after eliminating stars */
move: function() {
var rows = config.tableRows,
tileSet = config.tileSet;
//Move down for (var i = 0; i < rows; i++) {
var pointer = 0; // pointer points to the small square. When it encounters null, it stops and waits for the small square above to fall here. 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++;
}
}
}
//Move horizontally (whether there is an empty column in the bottom row)
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()
},
/**
* Flashing operation when the mouse moves in * @param obj
*/
mouseOver: function(obj) {
if (!computed.flag) { //No operation is allowed in the locked state 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);
},
/**
* Calculate the selected star score * @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)
},
/**
* Remove the star flickering when the mouse moves out */
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");
}
}
},
/**
* Stars twinkle * @param arr
*/
flicker: function(arr) {
for (var i = 0; i < arr.length; i++) {
var div = arr[i];
div.classList.add("scale");
}
},
/**
* Check if the star the mouse moves into is connected to the same star.
* @param obj star
* @param arr choose
*/
checkLink: function(obj, arr) {
if (obj === null) {
return;
}
arr.push(obj);
/**
* Check whether the left block can be added to the selected row of removable stars:
* The selected star cannot be the leftmost one,
* There should be a star on the left of the selected star.
* The star to the left of the selected star is the same as the selected star.
* The star to the left of the selected star has never been selected */
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);
}
},
/**
* Initialize a two-dimensional array */
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] = [];
}
}
},
/**
* Initialize el's child nodes */
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()
},
/**
* Render the child nodes of 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')";
}
}
},
/**
* Function to create a star child node * @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
(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
// 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 -> Here, the layout page is 750px, twice the width of the iPhone 6 design draft. * Change these two values according to the specific situation */
};
if (!doc.addEventListener) return;
// The window size changes, initialize win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
//Prevent execution when HTML is not fully loaded to ensure the correct page width setTimeout(function(){
px2rem(doc, win);
}, 200);
})(document, window);countUp.js
(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
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:Microsoft YaHei}
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 This is the end of this article about JavaScript implementation of Candy Crush Saga - source code. For more relevant js implementation of Candy Crush Saga content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: Application example tutorial of key in Vue page rendering
>>: Vue custom component implements two-way binding
Recommend
How to build php-nginx-alpine image from scratch in Docker
Although I have run some projects in Docker envir...
jQuery implements the practice of changing the position and size of div by dragging the mouse
To achieve an effect similar to Windows forms, dr...
How to add a certificate to docker
1. Upgrade process: sudo apt-get update Problems ...
Detailed explanation of MySQL 5.7 MGR single master determination master node method
Our bank's MGR will be launched at the end of...
Implementation of MySQL Multi-version Concurrency Control MVCC
Table of contents What is MVCC MVCC Implementatio...
Detailed installation and configuration tutorial of PostgreSQL 11 under CentOS7
1. Official website address The official website ...
JavaScript operation elements teach you how to change the page content style
Table of contents 1. Operation elements 1.1. Chan...
HTML implementation of a simple calculator with detailed ideas
Copy code The code is as follows: <!DOCTYPE ht...
Interpretation of the module for load balancing using nginx
Table of contents Two modules for using nginx for...
Basic ideas and codes for implementing video players in browsers
Table of contents Preface Summary of audio and vi...
Create a new user in Linux and grant permissions to the specified directory
1 Create a user and specify the user's root p...
Which one should I choose between MySQL unique index and normal index?
Imagine a scenario where, when designing a user t...
Vue v-model related knowledge summary
v-model is a Vue directive that provides two-way...
Centos8 (minimum installation) tutorial on how to install Python3.8+pip
After minimizing the installation of Python8, I i...
How to use react-color to implement the front-end color picker
background We can use react-color to implement th...