消消乐实现下坠_JavaScript实现消消乐的源代码

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 {

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值