JavaScript实现消消乐的源码下载地址:点击下载源代码
index.html
LuckyStar关卡
目标:
new PopStar()
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 = {
/**
* 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 {