Javascript实现消消乐的源码下载地址：点击下载源代码
index.html
LuckyStar 关卡
目标：
得分
JS文件
main.js
(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 = {
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);
},
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);
}
},
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()
},
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);
},
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");
}
}
},
flicker: function(arr) {
for (var i = 0; i < arr.length; i++) {
var div = arr[i];
div.classList.add("scale");
}
},
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] = [];
}
}
},
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()
},
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')";
}
}
},
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=e.targetScore?((new CountUp(e.scoreTarget,e.targetScore,e.targetScore+=1E3*(q-1))).start(),(new CountUp(e.scoreLevel,q,q+=1)).start(),alert("u606du559cu83b7u80dc"),console.log("u606du559cu83b7u80dc")):(e.targetScore=e.scoreTarget=2E3,q=p=0,alert("u6e38u620fu5931u8d25"),console.log("u6e38u620fu5931u8d25")),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-1&&setTimeout(function(a){new m},1E3)},100*a,a)},isFinish:function()
{for(var a=e.tileSet,b=a.length,c=0;c=b||(e.scoreSelect.style.opacity="1",e.scoreSelect.innerHTML=a.length+"u8fdeu6d88 "+
b+"u5206",setTimeout(function(){
e.scoreSelect.style.opacity="0"},1200))
},clearFlicker:function(){
for(var a=e.tileSet,b=0;b
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';
};
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
(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) {
// 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:微软雅黑
}
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实现消消乐内容请搜索考高分网以前的文章或继续浏览下面的相关文章希望大家以后多多支持考高分网！
