那天闲来无事，便想找个小游戏来打发时间，后来便找到了连连看，
玩了一会儿感觉无聊，想到各位高手用JS做的各种小游戏，便想自己也来做一个，于是便有了这几天的成果。
代码是用 原生JS 实现的，只是用来学习和练习的，所以我也没有做美工，连连看的元素直接显示的数字，
以后有时间再把它变成图片。
上图：
贴代码：
<script type="text/javascript">
var llk = function () {
var container = document.getElementById("Container");
var _this = this;
var Images = [];
for (var i = 0; i < 140; i++) {
var shucai = document.createElement("div");
shucai.className = "shucai";
shucai.innerText = i;
shucai.id = i;
shucai.onclick = function () {
_this.Select(this.id);
}
container.appendChild(shucai);
Images.push(shucai);
}
this.Data = [];
this.Scores =0;
this.pointArray = [];
this.From = null;
this.To = null;
this.Images = Images;
this.leaveCount = 0;
this.life = 6;
this.InitData();
this.Init();
}
llk.prototype = {
Init: function () {
this.Data.sort(function () { return 0.5 - Math.random() });
this.Data.sort(function () { return 0.5 - Math.random() });
for (var i = 0; i < 140; i++) {
var shucai = this.Images[i];
if(this.Data[i]!==null && this.Data[i]!=undefined){
shucai.innerText = this.Data[i];
shucai.className = "shucai";
}else{
shucai.className = "shucai removed";
shucai.innerHTML = " ";
}
}
document.getElementById("leavel").innerText = this.setting.currentLevel;
document.getElementById("life").innerText = this.life;
this.Start();
},
InitData: function () {
if(this.leaveCount ==0 ){
var Data = [];
var level = Math.min(this.setting.currentLevel - 1, 5);
for (var i = 0; i < 70; i++) {
var _d = Math.round(Math.random() * (10+level));
Data.push(_d);
Data.push(_d);
}
this.Data = Data;
this.leaveCount =140;
}
},
Select: function (index) {
var shucai = this.Images[index];
if (shucai.className.indexOf("removed") > -1)
return;
if (this.From == null) {
var select = document.getElementsByClassName("select");
for (var i = select.length-1; i >= 0; i--) {
select[i].className = "shucai";
}
this.From = index;
var shucai = this.Images[index];
shucai.className = shucai.className + " select";
} else {
this.To = index;
this.Check();
}
},
Unselect: function (index) {
var shucai = this.Images[index];
var _class = shucai.className.split(' ');// = shucai.className + " select";
shucai.className = "";
for (var i = 0; i < _class.length; i++) {
if (_class[i] != "select") {
shucai.className += _class[i] + " ";
}
}
this.From = null;
if(this.To!=null){
this.Select(this.To);
}
this.To = null;
},
Check: function () {
if (this.To == this.From) {
this.Unselect(this.To);
} else {
if (this.CheckType() && this.CheckPath()) {
var from = this.From;
var to = this.To;
this.From =null;
this.TO =null;
this.Remove(from,to);
} else {
this.Unselect(this.From);
}
}
},
CheckType: function () {
var from = this.Images[this.From],
to = this.Images[this.To];
if (from.innerText != to.innerText) {
return false;
}
return true;
},
CheckPath: function () {
var from = this.GetFromPosition(), to = this.GetToPosition();
this.pointArray = [];
this.addPath(from);
//相邻
if ((from.x == to.x && Math.abs(from.y - to.y) == 1) ||
(from.y == to.y && Math.abs(from.x - to.x) == 1)) {
this.addPath(to);
return true;
}
//邻边
if(0 == from.x && 0== to.x){
this.addPath({x:-1,y:from.y});
this.addPath({x:-1,y:to.y});
this.addPath(to);
return true;
}else if(0==from.y && 0 == to.y){
this.addPath({x:from.x,y:-1});
this.addPath({x:to.x,y:-1});
this.addPath(to);
return true;
}else if(13 == from.x&& 13 == to.x){
this.addPath({x:14,y:from.y});
this.addPath({x:14,y:to.y});
this.addPath(to);
return true;
}else if(9 == from.y && 9 == to.y){
this.addPath({x:from.x,y:10});
this.addPath({x:to.x,y:10});
this.addPath(to);
return true;
}
// 相同行
if (from.y == to.y)
{
return this.CheckSameRow(from,to);
}
//相同列
if (from.x == to.x)
{
return this.CheckSameColumns(from, to);
}
//对角相邻
if (Math.abs(from.x - to.x) == 1 && Math.abs(from.y - to.y) == 1)
{
var x1 = this.Images[from.x + to.y * 14],
x2 = this.Images[from.y * 14 + to.x];
if (x1.className.indexOf("removed") > -1) {
this.addPath({x:from.x,y:to.y});
this.addPath(to);
return true;
}
else if (x2.className.indexOf("removed") > -1) {
this.addPath({ x: to.x, y: from.y });
this.addPath(to);
return true;
}
return false;
}
//任意位置
var maxX = Math.max(from.x, to.x), minX = Math.min(from.x, to.x),
maxY = Math.max(from.y, to.y), minY = Math.min(from.y, to.y);
//从两点之间连接
var flag = true;
//矩形边相通
var index = to.y * 14 + from.x;
if (this.Images[index].className.indexOf("removed") > -1) {
if (this.CheckSameColumns(from, { x: from.x, y: to.y }, true) && this.CheckSameRow({ x: from.x, y: to.y }, to, true)) {
this.addPath({ x: from.x, y: to.y });
this.addPath(to);
return true;
}
} else {
flag = false;
}
if (!flag) {
var index = from.y * 14 + to.x;
if (this.Images[index].className.indexOf("removed") > -1) {
if (this.CheckSameRow(from, { x: to.x, y: from.y }, true) && this.CheckSameColumns({ x: to.x, y: from.y }, to, true)) {
this.addPath({ x: to.x, y: from.y });
this.addPath(to);
return true;
}
} else {
flag = false;
}
}
var y = from.x == minX ? from.y : to.y;
for(var x= minX+1;x<=maxX;x++)
{
flag = true;
var index = y * 14 + x;
if (this.Images[index].className.indexOf("removed") == -1) {
flag = false;
break;
}
var p1 = { x: x, y: y }, p2 = { x: x, y: y == minY ? maxY : minY };
var index = p2.y * 14 + p2.x;
if (this.Images[index].className.indexOf("removed") == -1) {
flag = false;
continue;
}
if (this.CheckSameColumns(p1, p2, true) && this.CheckSameRow(p2, { x: maxX, y: p2.y }, true)) {
this.addPath(p1);
this.addPath(p2);
this.addPath(to);
flag = true;
break;
} else {
flag = false;
}
}
if (!flag)
{
var x = from.y == minY ? from.x : to.x;
for (var y = minY + 1; y <= maxY; y++) {
flag = true;
var index = y * 14 + x;
if (this.Images[index].className.indexOf("removed") == -1) {
flag = false;
break;
}
var p1 = { x: x, y: y }, p2 = { x: x == minX ? maxX : minX, y: y };
var index = p2.y * 14 + p2.x;
if (this.Images[index].className.indexOf("removed") == -1) {
flag = false;
continue;
}
if (this.CheckSameRow(p1, p2, true) && this.CheckSameColumns(p2, { x: p2.x, y: maxY }, true)) {
this.addPath(p1);
this.addPath(p2);
this.addPath(to);
flag = true;
break;
} else {
flag = false;
}
}
}
if (flag)
return true;
//从左边往回连接
flag = true;
var y = from.x == minX ? from.y : to.y;
for (var x = minX - 1; x >= -1; x--)
{
if (x == -1)
{
var p2 = { x: 0, y: y == minY ? maxY : minY };
var index = p2.y * 14 + p2.x;
if (this.Images[index].className.indexOf("removed") == -1) {
flag = false;
break;
}
flag = this.CheckSameRow(p2, { x: maxX, y: p2.y }, true);
if(flag){
this.addPath({x:-1,y:from.y});
this.addPath({x:-1,y:to.y});
this.addPath(to);
}
break;
}
flag = true;
var x1 = this.Images[x + minY * 14],
x2 = this.Images[maxY * 14 + x];
if (x1.className.indexOf("removed") == -1 || x2.className.indexOf("removed") == -1)
{
flag = false;
break;
}
var p1 = { x: x, y: y }, p2 = { x: x, y: y == minY ? maxY : minY };
var index = p2.y * 14 + p2.x;
if (this.Images[index].className.indexOf("removed") == -1) {
flag = false;
continue;
}
if (this.CheckSameColumns(p1, p2, true) && this.CheckSameRow(p2, { x: maxX, y: p2.y }, true)) {
this.addPath(p1);
this.addPath(p2);
this.addPath(to);
flag = true;
break;
} else {
flag = false;
}
}
if (flag)
return true;
//从右边连接
flag = true;
var y = from.x == maxX ? from.y : to.y;
for (var x = maxX + 1; x <= 14; x++) {
if (x == 14) {
var p2 = { x: 13, y: y == minY ? maxY : minY };
var index = p2.y * 14 + p2.x;
if (this.Images[index].className.indexOf("removed") == -1) {
flag = false;
break;
}
flag = this.CheckSameRow(p2, { x: minX, y: p2.y }, true);
if(flag){
this.addPath({x:x,y:from.y});
this.addPath({x:x,y:to.y});
this.addPath(to);
}
break;
}
flag = true;
var x1 = this.Images[x + minY * 14],
x2 = this.Images[maxY * 14 + x];
if (x1.className.indexOf("removed") == -1 || x2.className.indexOf("removed") == -1) {
flag = false;
break;
}
var p1 = { x: x, y: y }, p2 = { x: x, y: y == minY ? maxY : minY };
var index = p2.y * 14 + p2.x;
if (this.Images[index].className.indexOf("removed") == -1) {
flag = false;
continue;
}
if (this.CheckSameColumns(p1, p2, true) && this.CheckSameRow(p2, { x: minX, y: p2.y }, true)) {
this.addPath(p1);
this.addPath(p2);
this.addPath(to);
flag = true;
break;
} else {
flag = false;
}
}
if (flag)
return true;
//从上边连接
flag = true;
var x = from.y == minY ? from.x : to.x;
for (var y = minY - 1; y >= -1; y--) {
if (y == -1) {
var p2 = { x: x == minX ? maxX : minX, y: 0 };
var index = p2.y * 14 + p2.x;
if (this.Images[index].className.indexOf("removed") == -1) {
flag = false;
break;
}
flag = this.CheckSameColumns(p2, { x: p2.x, y: maxY }, true);
if(flag){
this.addPath({x:from.x,y:y});
this.addPath({x:to.x,y:y});
this.addPath(to);
}
break;
}
flag = true;
var x1 = this.Images[minX + y * 14],
x2 = this.Images[y * 14 + maxX];
if (x1.className.indexOf("removed") == -1 || x2.className.indexOf("removed") == -1) {
flag = false;
break;
}
var p1 = { x: x, y: y }, p2 = { x: x == minX ? maxX : minX, y: y };
var index = p2.y * 14 + p2.x;
if (this.Images[index].className.indexOf("removed") == -1) {
flag = false;
continue;
}
if (this.CheckSameRow(p1, p2, true) && this.CheckSameColumns(p2, { x: p2.x, y: maxY }, true)) {
this.addPath(p1);
this.addPath(p2);
this.addPath(to);
flag = true;
break;
} else {
flag = false;
}
}
if (flag)
return true;
//从下边连接
flag = true;
var x = from.y == maxY ? from.x : to.x;
for (var y = maxY + 1; y <= 10; y++) {
if (y == 10) {
var p2 = { x: x == minX ? maxX : minX, y: 9 };
var index = p2.y * 14 + p2.x;
if (this.Images[index].className.indexOf("removed") == -1) {
flag = false;
break;
}
flag = this.CheckSameColumns(p2, { x: p2.x, y: minY }, true);
if(flag){
this.addPath({x:from.x,y:y});
this.addPath({x:to.x,y:y});
this.addPath(to);
}
break;
}
flag = true;
var x1 = this.Images[minX + y * 14],
x2 = this.Images[y * 14 + maxX];
if (x1.className.indexOf("removed") == -1 || x2.className.indexOf("removed") == -1) {
flag = false;
break;
}
var p1 = { x: x, y: y }, p2 = { x: x == minX ? maxX : minX, y: y };
var index = p2.y * 14 + p2.x;
if (this.Images[index].className.indexOf("removed") == -1) {
flag = false;
continue;
}
if (this.CheckSameRow(p1, p2, true) && this.CheckSameColumns(p2, { x: p2.x, y: minY }, true)) {
this.addPath(p1);
this.addPath(p2);
this.addPath(to);
flag = true;
break;
} else {
flag = false;
}
}
if (flag)
return true;
return false;
},
CheckSameColumns: function (from, to,onlyLine) {
var flag = true;
//直线路径
for (var i = Math.min(from.y, to.y) + 1 ; i < Math.max(from.y, to.y) ; i++) {
if (this.Images[from.x + i* 14].className.indexOf("removed") == -1) {
flag = false;
break;
}
}
if (!(onlyLine === true)) {
if (!flag) {
flag = true;
//往左
var x = from.x - 1;
var _pf,_pt;
while (x >= 0) {
flag = true;
_pf = {x:x,y:from.y};
_pt = {x:x,y:to.y};
var _f = this.Images[x + from.y * 14],
_t = this.Images[x + to.y * 14];
if (_f.className.indexOf("removed") == -1 || _t.className.indexOf("removed") == -1) {
flag = false;
break;
}
else {
for (var i = Math.min(from.y, to.y) + 1 ; i < Math.max(from.y, to.y) ; i++) {
if (this.Images[x + i * 14].className.indexOf("removed") == -1) {
flag = false;
break;
}
}
}
if (flag)
break;
x--;
}
if(flag){
this.addPath(_pf);
this.addPath(_pt);
}
if (x < 0){
this.addPath({x:-1,y:from.y});
this.addPath({x:-1,y:to.y});
flag = true;
}
}
if (!flag) {
flag = true;
//往下
var x = from.x + 1;
var _pf,_pt;
while (x <= 13) {
flag = true;
_pf = {x:x,y:from.y};
_pt = {x:x,y:to.y};
var _f = this.Images[x + from.y * 14],
_t = this.Images[x + to.y * 14];
if (_f.className.indexOf("removed") == -1 || _t.className.indexOf("removed") == -1) {
flag = false;
break;
}
else {
for (var i = Math.min(from.y, to.y) + 1 ; i < Math.max(from.y, to.y) ; i++) {
if (this.Images[x + i * 14].className.indexOf("removed") == -1) {
flag = false;
break;
}
}
}
if (flag)
break;
x++;
}
if(flag){
this.addPath(_pf);
this.addPath(_pt);
}
if (x > 13){
this.addPath({x:14,y:from.y});
this.addPath({x:14,y:to.y});
flag = true;
}
}
}
if(!(onlyLine === true) && flag){
this.addPath(to);
}
return flag;
},
CheckSameRow: function (from, to, onlyLine) {
var flag = true;
//直线路径
for (var i = Math.min(from.x, to.x) + 1 ; i < Math.max(from.x, to.x) ; i++) {
if (this.Images[from.y * 14 + i].className.indexOf("removed") == -1) {
flag = false;
break;
}
}
if (!(onlyLine === true)) {
if (!flag) {
flag = true;
//往上
var y = from.y - 1;
var _pf,_pt;
while (y >= 0) {
flag = true;
_pf = {x:from.x,y:y};
_pt = {x:to.x,y:y};
var _f = this.Images[from.x + y * 14],
_t = this.Images[to.x + y * 14];
if (_f.className.indexOf("removed") == -1 || _t.className.indexOf("removed") == -1) {
flag = false;
break;
}
else {
for (var i = Math.min(from.x, to.x) + 1 ; i < Math.max(from.x, to.x) ; i++) {
if (this.Images[y * 14 + i].className.indexOf("removed") == -1) {
flag = false;
break;
}
}
}
if (flag) {
break;
}
y--;
}
if(flag){
this.addPath(_pf);
this.addPath(_pt);
}
if (y < 0){
this.addPath({x:from.x,y:-1});
this.addPath({x:to.x,y:-1});
flag = true;
}
}
if (!flag) {
flag = true;
//往下
var y = from.y + 1;
var _pf,_pt;
while (y <= 9) {
flag = true;
_pf = {x:from.x,y:y};
_pt = {x:to.x,y:y};
var _f = this.Images[from.x + y * 14],
_t = this.Images[to.x + y * 14];
if (_f.className.indexOf("removed") == -1 || _t.className.indexOf("removed") == -1) {
flag = false;
break;
}
else {
for (var i = Math.min(from.x, to.x) + 1 ; i < Math.max(from.x, to.x) ; i++) {
if (this.Images[y * 14 + i].className.indexOf("removed") == -1) {
flag = false;
break;
}
}
}
if (flag)
break;
y++;
}
if(flag){
this.addPath(_pf);
this.addPath(_pt);
}
if (y > 9){
this.addPath({x:from.x,y:10});
this.addPath({x:to.x,y:10});
flag = true;
}
}
}
if(!(onlyLine === true) && flag){
this.addPath(to);
}
return flag;
},
Parse: function (index) {
var y = Math.floor(index / 14);
var x = index % 14;
return { x: x, y: y };
},
GetFromPosition: function () {
return this.Parse(this.From);
},
GetToPosition: function () {
return this.Parse(this.To);
},
Clue: function () {
var select = document.getElementsByClassName("select");
for (var i = select.length - 1; i >= 0; i--) {
select[i].className = "shucai";
}
var flag = false;
var i = 0, j = 0;
for (; i < 140 - 1; i++) {
if (this.Data[i] != null) {
for ( j = i + 1; j < 140; j++) {
if (this.Data[j] != null) {
this.From = i;
this.To = j;
if (this.CheckType()) {
if (this.CheckPath()) {
flag = true;
break;
}
}
}
}
if (flag)
break;
}
}
this.From = null;
this.To = null;
if (flag) {
this.life--;
if (this.life < 0) {
this.Over();
}
document.getElementById("life").innerText = this.life;
var shucai = this.Images[i];
shucai.className = shucai.className + " select";
var shucai = this.Images[j];
shucai.className = shucai.className + " select";
}
},
HasNext: function () {
var flag = false;
if (this.leaveCount > 0) {
for (var i = 0; i < 140-1; i++) {
if (this.Data[i] != null) {
for (var j = i + 1; j < 140; j++) {
if (this.Data[j] != null) {
this.From = i;
this.To = j;
if (this.CheckType())
{
if (this.CheckPath())
{
flag = true;
break;
}
}
}
}
if (flag)
break;
}
}
}
this.From = null;
this.To = null;
return flag;
},
Remove: function (from,to) {
var lines = this.drawLine();
var _this = this;
this.timeout+=5;
this.timeout = Math.min(this.timeout,this.setting.timeout());
this.Scores +=10;
document.getElementById("scores").innerText = this.Scores;
document.getElementById("time").innerText = _this.timeout;
this.Data[from] = null;
this.Data[to] = null;
this.leaveCount -=2;
setTimeout(function () {
var shucai = _this.Images[from];
shucai.className = "shucai removed";
shucai.innerHTML = " ";
shucai = _this.Images[to];
shucai.className = "shucai removed";
shucai.innerHTML = " ";
for (var i = 0; i < lines.length; i++) {
document.body.removeChild(lines[i]);
}
lines = null;
_this.Change();
}, 100);
},
Change: function () {
if (this.leaveCount == 0) {
this.NextLevel();
return;
}
var leavel = this.setting.currentLevel;
if (leavel == 3) {//左右分离
for (var y = 0; y < 10; y++) {
for (var x = 0; x < 7; x++) {
var index = y * 14 + x;
if (this.Data[index] != null) {
continue;
}
var flag = false;
for (var i = x + 1; i < 7; i++) {
var _index = y * 14 + i;
if (this.Data[_index] != null) {
this.Data[index] = this.Data[_index];
this.Data[_index] = null;
flag = true;
break;
}
}
if (!flag)
break;
}
for (var x = 13; x >= 7; x--) {
var index = y * 14 + x;
if (this.Data[index] != null) {
continue;
}
var flag = false;
for (var i = x - 1; i >= 7; i--) {
var _index = y * 14 + i;
if (this.Data[_index] != null) {
this.Data[index] = this.Data[_index];
this.Data[_index] = null;
flag = true;
break;
}
}
if (!flag)
break;
}
}
}
else if (leavel == 4) {//上下分离
for (var x = 0; x < 14; x++) {
for (var y = 0; y < 5; y++) {
var index = y * 14 + x;
if (this.Data[index] != null) {
continue;
}
var flag = false;
for (var i = y + 1; i < 5; i++) {
var _index = i * 14 + x;
if (this.Data[_index] != null) {
this.Data[index] = this.Data[_index];
this.Data[_index] = null;
flag = true;
break;
}
}
if (!flag)
break;
}
for (var y = 9; y >= 5; y--) {
var index = y * 14 + x;
if (this.Data[index] != null) {
continue;
}
var flag = false;
for (var i = y - 1; i >= 5; i--) {
var _index = i * 14 + x;
if (this.Data[_index] != null) {
this.Data[index] = this.Data[_index];
this.Data[_index] = null;
flag = true;
break;
}
}
if (!flag)
break;
}
}
}
else if (leavel == 5) {//往左移
for (var y = 0; y < 10; y++) {
for (var x = 0; x < 14; x++) {
var index = y * 14 + x;
if (this.Data[index] != null) {
continue;
}
var flag = false;
for (var i = x + 1; i < 14; i++) {
var _index = y * 14 + i;
if (this.Data[_index] != null) {
this.Data[index] = this.Data[_index];
this.Data[_index] = null;
flag = true;
break;
}
}
if (!flag)
break;
}
}
}
else if (leavel == 6) {//向右移
for (var y = 0; y < 10; y++) {
for (var x = 13; x >= 0; x--) {
var index = y * 14 + x;
if (this.Data[index] != null) {
continue;
}
var flag = false;
for (var i = x - 1; i >= 0; i--) {
var _index = y * 14 + i;
if (this.Data[_index] != null) {
this.Data[index] = this.Data[_index];
this.Data[_index] = null;
flag = true;
break;
}
}
if (!flag)
break;
}
}
}
else if (leavel == 7) {//向下移
for (var x = 0; x < 14; x++) {
for (var y = 9; y >= 0; y--) {
var index = y * 14 + x;
if (this.Data[index] != null) {
continue;
}
var flag = false;
for (var i = y - 1; i >= 0; i--) {
var _index = i * 14 + x;
if (this.Data[_index] != null) {
this.Data[index] = this.Data[_index];
this.Data[_index] = null;
flag = true;
break;
}
}
if (!flag)
break;
}
}
}
else if (leavel == 8) {//向上移
for (var x = 0; x < 14; x++) {
for (var y = 0; y < 10; y++) {
var index = y * 14 + x;
if (this.Data[index] != null) {
continue;
}
var flag = false;
for (var i = y + 1; i < 10; i++) {
var _index = i * 14 + x;
if (this.Data[_index] != null) {
this.Data[index] = this.Data[_index];
this.Data[_index] = null;
flag = true;
break;
}
}
if (!flag)
break;
}
}
}
else if (leavel == 9) {//向内紧缩
for (var y = 5; y < 10; y++) {
for (var x = 7; x < 14; x++) {
var index = y * 14 + x;
if (this.Data[index] != null) {
continue;
}
var flag = false;
for (var i = x + 1; i < 14; i++) {
var _index = y * 14 + i;
if (this.Data[_index] != null) {
this.Data[index] = this.Data[_index];
this.Data[_index] = null;
flag = true;
break;
}
}
if (!flag)
break;
}
for (var x = 6; x >= 0; x--) {
var index = y * 14 + x;
if (this.Data[index] != null) {
continue;
}
var flag = false;
for (var i = x - 1; i >= 0; i--) {
var _index = y * 14 + i;
if (this.Data[_index] != null) {
this.Data[index] = this.Data[_index];
this.Data[_index] = null;
flag = true;
break;
}
}
if (!flag)
break;
}
}
for (var y = 4; y > 0; y--) {
for (var x = 7; x < 14; x++) {
var index = y * 14 + x;
if (this.Data[index] != null) {
continue;
}
var flag = false;
for (var i = x + 1; i < 14; i++) {
var _index = y * 14 + i;
if (this.Data[_index] != null) {
this.Data[index] = this.Data[_index];
this.Data[_index] = null;
flag = true;
break;
}
}
if (!flag)
break;
}
for (var x = 6; x >= 0; x--) {
var index = y * 14 + x;
if (this.Data[index] != null) {
continue;
}
var flag = false;
for (var i = x - 1; i >= 0; i--) {
var _index = y * 14 + i;
if (this.Data[_index] != null) {
this.Data[index] = this.Data[_index];
this.Data[_index] = null;
flag = true;
break;
}
}
if (!flag)
break;
}
}
for (var x = 0; x < 7; x++) {
for (var y = 5; y < 10; y++) {
var index = y * 14 + x;
if (this.Data[index] != null) {
continue;
}
var flag = false;
for (var i = y + 1; i < 10; i++) {
var _index = i * 14 + x;
if (this.Data[_index] != null) {
this.Data[index] = this.Data[_index];
this.Data[_index] = null;
flag = true;
break;
}
}
if (!flag)
break;
}
for (var y = 4; y >= 0; y--) {
var index = y * 14 + x;
if (this.Data[index] != null) {
continue;
}
var flag = false;
for (var i = y - 1; i >= 0; i--) {
var _index = i * 14 + x;
if (this.Data[_index] != null) {
this.Data[index] = this.Data[_index];
this.Data[_index] = null;
flag = true;
break;
}
}
if (!flag)
break;
}
}
for (var x = 7; x < 14; x++) {
for (var y = 5; y < 10; y++) {
var index = y * 14 + x;
if (this.Data[index] != null) {
continue;
}
var flag = false;
for (var i = y + 1; i < 10; i++) {
var _index = i * 14 + x;
if (this.Data[_index] != null) {
this.Data[index] = this.Data[_index];
this.Data[_index] = null;
flag = true;
break;
}
}
if (!flag)
break;
}
for (var y = 4; y >= 0; y--) {
var index = y * 14 + x;
if (this.Data[index] != null) {
continue;
}
var flag = false;
for (var i = y - 1; i >= 0; i--) {
var _index = i * 14 + x;
if (this.Data[_index] != null) {
this.Data[index] = this.Data[_index];
this.Data[_index] = null;
flag = true;
break;
}
}
if (!flag)
break;
}
}
}
for (var i = 0; i < 140; i++) {
var shucai = this.Images[i];
if (this.Data[i] !== null && this.Data[i] != undefined) {
shucai.innerText = this.Data[i];
shucai.className = "shucai";
} else {
shucai.className = "shucai removed";
shucai.innerHTML = " ";
}
}
if (!this.HasNext()) {
this.life--;
if (this.life < 0) {
this.Over();
return;
}
this.Refresh();
}
},
Refresh: function () {
this.Init();
},
NextLevel: function () {
this.life++;
this.setting.currentLevel++;
if (this.setting.currentLevel > this.setting.maxLevel) {
this.Stop();
} else {
this.InitData();
this.Init();
}
},
Start: function () {
this.timeout = this.setting.timeout();
document.getElementById("time").innerHTML = this.timeout;
this.TimeStart();
},
ReStart: function () {
this.TimeStart();
},
TimeStart: function () {
var _this = this;
this.time = setTimeout(function () {
_this.timeout--;
document.getElementById("time").innerText = _this.timeout;
if (_this.timeout <= 0) {
_this.Over();
}
else {
_this.TimeStart();
}
}, 1000);
},
TimeStop: function () {
if (this.time != null) {
clearTimeout(this.time);
this.time = null;
} else {
this.TimeStart();
}
},
Stop: function () {
alert("恭喜你通关了游戏！");
var container = document.getElementById("Container");
container.innerHTML = "";
container.innerText = "恭喜你通关了游戏！";
},
Over: function () {
if (this.time != null) {
clearTimeout(this.time);
this.time = null;
}
alert("游戏结束了！");
var container = document.getElementById("Container");
container.innerHTML = "";
container.innerText = "游戏结束了！";
},
addPath: function (pt) {
this.pointArray.push(pt);
},
drawLine: function () {
var points = this.pointArray;
if(points.length ==4){
if(points[1].x!==points[0].x && points[1].y!=points[0].y){
var temp = points[1];
points[1]=points[2];
points[2] = temp;
}
}
var lines = [];
for (var i = 0; i < points.length - 1; i++) {
lines.push(this.draw(points[i], points[i + 1]));
}
return lines;
},
draw: function (from, to) {
//同列
var div = document.createElement("div");
div.className = "line";
if (from.x == to.x)
{
var minY = Math.min(from.y, to.y),
maxY = Math.max(from.y, to.y);
div.style.width = "2px";
div.style.height = ((maxY - minY) * (30+2) +2) + "px";
div.style.top = (100 + (30 +2) * minY + 15) + "px";
div.style.left = (115 + (30 +2) * from.x) + "px";
//this.lines.push(div);
}
//同行
else if (from.y == to.y)
{
var minX = Math.min(from.x, to.x),
maxX = Math.max(from.x, to.x);
div.style.height = "2px";
div.style.width = ((maxX - minX ) * (30+2) +2) + "px";
div.style.left = (100 + (30+2) * minX +15) + "px";
div.style.top = (100 + 15 + (30+2) * from.y) + "px";
//this.lines.push(div);
}
document.body.appendChild(div);
return div;
}
};
llk.prototype.setting = {
currentLevel: 1,
maxLevel: 9,
timeout: function () {
return (this.currentLevel -1) * 10 + 180;
}
}
</script>
注释写的不多，不过也没用啥“高级”的功能，纯面向过程的编程方式，适合入门学习。
这是第一版，这两天放假正好没事，继续修改，让代码写的好看，舒服些。
欢迎大家留言，批评，指教！
最后，附上完整代码：（不知道怎么附加文件，哪位可以指导下。。。）
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>连连看-JS版</title> <script type="text/javascript"> var llk = function () { var container = document.getElementById("Container"); var _this = this; var Images = []; for (var i = 0; i < 140; i++) { var shucai = document.createElement("div"); shucai.className = "shucai"; shucai.innerText = i; shucai.id = i; shucai.onclick = function () { _this.Select(this.id); } container.appendChild(shucai); Images.push(shucai); } this.Data = []; this.Scores =0; this.pointArray = []; this.From = null; this.To = null; this.Images = Images; this.leaveCount = 0; this.life = 6; this.InitData(); this.Init(); } llk.prototype = { Init: function () { this.Data.sort(function () { return 0.5 - Math.random() }); this.Data.sort(function () { return 0.5 - Math.random() }); for (var i = 0; i < 140; i++) { var shucai = this.Images[i]; if(this.Data[i]!==null && this.Data[i]!=undefined){ shucai.innerText = this.Data[i]; shucai.className = "shucai"; }else{ shucai.className = "shucai removed"; shucai.innerHTML = " "; } } document.getElementById("leavel").innerText = this.setting.currentLevel; document.getElementById("life").innerText = this.life; this.Start(); }, InitData: function () { if(this.leaveCount ==0 ){ var Data = []; var level = Math.min(this.setting.currentLevel - 1, 5); for (var i = 0; i < 70; i++) { var _d = Math.round(Math.random() * (10+level)); Data.push(_d); Data.push(_d); } this.Data = Data; this.leaveCount =140; } }, Select: function (index) { var shucai = this.Images[index]; if (shucai.className.indexOf("removed") > -1) return; if (this.From == null) { var select = document.getElementsByClassName("select"); for (var i = select.length-1; i >= 0; i--) { select[i].className = "shucai"; } this.From = index; var shucai = this.Images[index]; shucai.className = shucai.className + " select"; } else { this.To = index; this.Check(); } }, Unselect: function (index) { var shucai = this.Images[index]; var _class = shucai.className.split(' ');// = shucai.className + " select"; shucai.className = ""; for (var i = 0; i < _class.length; i++) { if (_class[i] != "select") { shucai.className += _class[i] + " "; } } this.From = null; if(this.To!=null){ this.Select(this.To); } this.To = null; }, Check: function () { if (this.To == this.From) { this.Unselect(this.To); } else { if (this.CheckType() && this.CheckPath()) { var from = this.From; var to = this.To; this.From =null; this.TO =null; this.Remove(from,to); } else { this.Unselect(this.From); } } }, CheckType: function () { var from = this.Images[this.From], to = this.Images[this.To]; if (from.innerText != to.innerText) { return false; } return true; }, CheckPath: function () { var from = this.GetFromPosition(), to = this.GetToPosition(); this.pointArray = []; this.addPath(from); //相邻 if ((from.x == to.x && Math.abs(from.y - to.y) == 1) || (from.y == to.y && Math.abs(from.x - to.x) == 1)) { this.addPath(to); return true; } //邻边 if(0 == from.x && 0== to.x){ this.addPath({x:-1,y:from.y}); this.addPath({x:-1,y:to.y}); this.addPath(to); return true; }else if(0==from.y && 0 == to.y){ this.addPath({x:from.x,y:-1}); this.addPath({x:to.x,y:-1}); this.addPath(to); return true; }else if(13 == from.x&& 13 == to.x){ this.addPath({x:14,y:from.y}); this.addPath({x:14,y:to.y}); this.addPath(to); return true; }else if(9 == from.y && 9 == to.y){ this.addPath({x:from.x,y:10}); this.addPath({x:to.x,y:10}); this.addPath(to); return true; } // 相同行 if (from.y == to.y) { return this.CheckSameRow(from,to); } //相同列 if (from.x == to.x) { return this.CheckSameColumns(from, to); } //对角相邻 if (Math.abs(from.x - to.x) == 1 && Math.abs(from.y - to.y) == 1) { var x1 = this.Images[from.x + to.y * 14], x2 = this.Images[from.y * 14 + to.x]; if (x1.className.indexOf("removed") > -1) { this.addPath({x:from.x,y:to.y}); this.addPath(to); return true; } else if (x2.className.indexOf("removed") > -1) { this.addPath({ x: to.x, y: from.y }); this.addPath(to); return true; } return false; } //任意位置 var maxX = Math.max(from.x, to.x), minX = Math.min(from.x, to.x), maxY = Math.max(from.y, to.y), minY = Math.min(from.y, to.y); //从两点之间连接 var flag = true; //矩形边相通 var index = to.y * 14 + from.x; if (this.Images[index].className.indexOf("removed") > -1) { if (this.CheckSameColumns(from, { x: from.x, y: to.y }, true) && this.CheckSameRow({ x: from.x, y: to.y }, to, true)) { this.addPath({ x: from.x, y: to.y }); this.addPath(to); return true; } } else { flag = false; } if (!flag) { var index = from.y * 14 + to.x; if (this.Images[index].className.indexOf("removed") > -1) { if (this.CheckSameRow(from, { x: to.x, y: from.y }, true) && this.CheckSameColumns({ x: to.x, y: from.y }, to, true)) { this.addPath({ x: to.x, y: from.y }); this.addPath(to); return true; } } else { flag = false; } } var y = from.x == minX ? from.y : to.y; for(var x= minX+1;x<=maxX;x++) { flag = true; var index = y * 14 + x; if (this.Images[index].className.indexOf("removed") == -1) { flag = false; break; } var p1 = { x: x, y: y }, p2 = { x: x, y: y == minY ? maxY : minY }; var index = p2.y * 14 + p2.x; if (this.Images[index].className.indexOf("removed") == -1) { flag = false; continue; } if (this.CheckSameColumns(p1, p2, true) && this.CheckSameRow(p2, { x: maxX, y: p2.y }, true)) { this.addPath(p1); this.addPath(p2); this.addPath(to); flag = true; break; } else { flag = false; } } if (!flag) { var x = from.y == minY ? from.x : to.x; for (var y = minY + 1; y <= maxY; y++) { flag = true; var index = y * 14 + x; if (this.Images[index].className.indexOf("removed") == -1) { flag = false; break; } var p1 = { x: x, y: y }, p2 = { x: x == minX ? maxX : minX, y: y }; var index = p2.y * 14 + p2.x; if (this.Images[index].className.indexOf("removed") == -1) { flag = false; continue; } if (this.CheckSameRow(p1, p2, true) && this.CheckSameColumns(p2, { x: p2.x, y: maxY }, true)) { this.addPath(p1); this.addPath(p2); this.addPath(to); flag = true; break; } else { flag = false; } } } if (flag) return true; //从左边往回连接 flag = true; var y = from.x == minX ? from.y : to.y; for (var x = minX - 1; x >= -1; x--) { if (x == -1) { var p2 = { x: 0, y: y == minY ? maxY : minY }; var index = p2.y * 14 + p2.x; if (this.Images[index].className.indexOf("removed") == -1) { flag = false; break; } flag = this.CheckSameRow(p2, { x: maxX, y: p2.y }, true); if(flag){ this.addPath({x:-1,y:from.y}); this.addPath({x:-1,y:to.y}); this.addPath(to); } break; } flag = true; var x1 = this.Images[x + minY * 14], x2 = this.Images[maxY * 14 + x]; if (x1.className.indexOf("removed") == -1 || x2.className.indexOf("removed") == -1) { flag = false; break; } var p1 = { x: x, y: y }, p2 = { x: x, y: y == minY ? maxY : minY }; var index = p2.y * 14 + p2.x; if (this.Images[index].className.indexOf("removed") == -1) { flag = false; continue; } if (this.CheckSameColumns(p1, p2, true) && this.CheckSameRow(p2, { x: maxX, y: p2.y }, true)) { this.addPath(p1); this.addPath(p2); this.addPath(to); flag = true; break; } else { flag = false; } } if (flag) return true; //从右边连接 flag = true; var y = from.x == maxX ? from.y : to.y; for (var x = maxX + 1; x <= 14; x++) { if (x == 14) { var p2 = { x: 13, y: y == minY ? maxY : minY }; var index = p2.y * 14 + p2.x; if (this.Images[index].className.indexOf("removed") == -1) { flag = false; break; } flag = this.CheckSameRow(p2, { x: minX, y: p2.y }, true); if(flag){ this.addPath({x:x,y:from.y}); this.addPath({x:x,y:to.y}); this.addPath(to); } break; } flag = true; var x1 = this.Images[x + minY * 14], x2 = this.Images[maxY * 14 + x]; if (x1.className.indexOf("removed") == -1 || x2.className.indexOf("removed") == -1) { flag = false; break; } var p1 = { x: x, y: y }, p2 = { x: x, y: y == minY ? maxY : minY }; var index = p2.y * 14 + p2.x; if (this.Images[index].className.indexOf("removed") == -1) { flag = false; continue; } if (this.CheckSameColumns(p1, p2, true) && this.CheckSameRow(p2, { x: minX, y: p2.y }, true)) { this.addPath(p1); this.addPath(p2); this.addPath(to); flag = true; break; } else { flag = false; } } if (flag) return true; //从上边连接 flag = true; var x = from.y == minY ? from.x : to.x; for (var y = minY - 1; y >= -1; y--) { if (y == -1) { var p2 = { x: x == minX ? maxX : minX, y: 0 }; var index = p2.y * 14 + p2.x; if (this.Images[index].className.indexOf("removed") == -1) { flag = false; break; } flag = this.CheckSameColumns(p2, { x: p2.x, y: maxY }, true); if(flag){ this.addPath({x:from.x,y:y}); this.addPath({x:to.x,y:y}); this.addPath(to); } break; } flag = true; var x1 = this.Images[minX + y * 14], x2 = this.Images[y * 14 + maxX]; if (x1.className.indexOf("removed") == -1 || x2.className.indexOf("removed") == -1) { flag = false; break; } var p1 = { x: x, y: y }, p2 = { x: x == minX ? maxX : minX, y: y }; var index = p2.y * 14 + p2.x; if (this.Images[index].className.indexOf("removed") == -1) { flag = false; continue; } if (this.CheckSameRow(p1, p2, true) && this.CheckSameColumns(p2, { x: p2.x, y: maxY }, true)) { this.addPath(p1); this.addPath(p2); this.addPath(to); flag = true; break; } else { flag = false; } } if (flag) return true; //从下边连接 flag = true; var x = from.y == maxY ? from.x : to.x; for (var y = maxY + 1; y <= 10; y++) { if (y == 10) { var p2 = { x: x == minX ? maxX : minX, y: 9 }; var index = p2.y * 14 + p2.x; if (this.Images[index].className.indexOf("removed") == -1) { flag = false; break; } flag = this.CheckSameColumns(p2, { x: p2.x, y: minY }, true); if(flag){ this.addPath({x:from.x,y:y}); this.addPath({x:to.x,y:y}); this.addPath(to); } break; } flag = true; var x1 = this.Images[minX + y * 14], x2 = this.Images[y * 14 + maxX]; if (x1.className.indexOf("removed") == -1 || x2.className.indexOf("removed") == -1) { flag = false; break; } var p1 = { x: x, y: y }, p2 = { x: x == minX ? maxX : minX, y: y }; var index = p2.y * 14 + p2.x; if (this.Images[index].className.indexOf("removed") == -1) { flag = false; continue; } if (this.CheckSameRow(p1, p2, true) && this.CheckSameColumns(p2, { x: p2.x, y: minY }, true)) { this.addPath(p1); this.addPath(p2); this.addPath(to); flag = true; break; } else { flag = false; } } if (flag) return true; return false; }, CheckSameColumns: function (from, to,onlyLine) { var flag = true; //直线路径 for (var i = Math.min(from.y, to.y) + 1 ; i < Math.max(from.y, to.y) ; i++) { if (this.Images[from.x + i* 14].className.indexOf("removed") == -1) { flag = false; break; } } if (!(onlyLine === true)) { if (!flag) { flag = true; //往左 var x = from.x - 1; var _pf,_pt; while (x >= 0) { flag = true; _pf = {x:x,y:from.y}; _pt = {x:x,y:to.y}; var _f = this.Images[x + from.y * 14], _t = this.Images[x + to.y * 14]; if (_f.className.indexOf("removed") == -1 || _t.className.indexOf("removed") == -1) { flag = false; break; } else { for (var i = Math.min(from.y, to.y) + 1 ; i < Math.max(from.y, to.y) ; i++) { if (this.Images[x + i * 14].className.indexOf("removed") == -1) { flag = false; break; } } } if (flag) break; x--; } if(flag){ this.addPath(_pf); this.addPath(_pt); } if (x < 0){ this.addPath({x:-1,y:from.y}); this.addPath({x:-1,y:to.y}); flag = true; } } if (!flag) { flag = true; //往下 var x = from.x + 1; var _pf,_pt; while (x <= 13) { flag = true; _pf = {x:x,y:from.y}; _pt = {x:x,y:to.y}; var _f = this.Images[x + from.y * 14], _t = this.Images[x + to.y * 14]; if (_f.className.indexOf("removed") == -1 || _t.className.indexOf("removed") == -1) { flag = false; break; } else { for (var i = Math.min(from.y, to.y) + 1 ; i < Math.max(from.y, to.y) ; i++) { if (this.Images[x + i * 14].className.indexOf("removed") == -1) { flag = false; break; } } } if (flag) break; x++; } if(flag){ this.addPath(_pf); this.addPath(_pt); } if (x > 13){ this.addPath({x:14,y:from.y}); this.addPath({x:14,y:to.y}); flag = true; } } } if(!(onlyLine === true) && flag){ this.addPath(to); } return flag; }, CheckSameRow: function (from, to, onlyLine) { var flag = true; //直线路径 for (var i = Math.min(from.x, to.x) + 1 ; i < Math.max(from.x, to.x) ; i++) { if (this.Images[from.y * 14 + i].className.indexOf("removed") == -1) { flag = false; break; } } if (!(onlyLine === true)) { if (!flag) { flag = true; //往上 var y = from.y - 1; var _pf,_pt; while (y >= 0) { flag = true; _pf = {x:from.x,y:y}; _pt = {x:to.x,y:y}; var _f = this.Images[from.x + y * 14], _t = this.Images[to.x + y * 14]; if (_f.className.indexOf("removed") == -1 || _t.className.indexOf("removed") == -1) { flag = false; break; } else { for (var i = Math.min(from.x, to.x) + 1 ; i < Math.max(from.x, to.x) ; i++) { if (this.Images[y * 14 + i].className.indexOf("removed") == -1) { flag = false; break; } } } if (flag) { break; } y--; } if(flag){ this.addPath(_pf); this.addPath(_pt); } if (y < 0){ this.addPath({x:from.x,y:-1}); this.addPath({x:to.x,y:-1}); flag = true; } } if (!flag) { flag = true; //往下 var y = from.y + 1; var _pf,_pt; while (y <= 9) { flag = true; _pf = {x:from.x,y:y}; _pt = {x:to.x,y:y}; var _f = this.Images[from.x + y * 14], _t = this.Images[to.x + y * 14]; if (_f.className.indexOf("removed") == -1 || _t.className.indexOf("removed") == -1) { flag = false; break; } else { for (var i = Math.min(from.x, to.x) + 1 ; i < Math.max(from.x, to.x) ; i++) { if (this.Images[y * 14 + i].className.indexOf("removed") == -1) { flag = false; break; } } } if (flag) break; y++; } if(flag){ this.addPath(_pf); this.addPath(_pt); } if (y > 9){ this.addPath({x:from.x,y:10}); this.addPath({x:to.x,y:10}); flag = true; } } } if(!(onlyLine === true) && flag){ this.addPath(to); } return flag; }, Parse: function (index) { var y = Math.floor(index / 14); var x = index % 14; return { x: x, y: y }; }, GetFromPosition: function () { return this.Parse(this.From); }, GetToPosition: function () { return this.Parse(this.To); }, Clue: function () { var select = document.getElementsByClassName("select"); for (var i = select.length - 1; i >= 0; i--) { select[i].className = "shucai"; } var flag = false; var i = 0, j = 0; for (; i < 140 - 1; i++) { if (this.Data[i] != null) { for ( j = i + 1; j < 140; j++) { if (this.Data[j] != null) { this.From = i; this.To = j; if (this.CheckType()) { if (this.CheckPath()) { flag = true; break; } } } } if (flag) break; } } this.From = null; this.To = null; if (flag) { this.life--; if (this.life < 0) { this.Over(); } document.getElementById("life").innerText = this.life; var shucai = this.Images[i]; shucai.className = shucai.className + " select"; var shucai = this.Images[j]; shucai.className = shucai.className + " select"; } }, HasNext: function () { var flag = false; if (this.leaveCount > 0) { for (var i = 0; i < 140-1; i++) { if (this.Data[i] != null) { for (var j = i + 1; j < 140; j++) { if (this.Data[j] != null) { this.From = i; this.To = j; if (this.CheckType()) { if (this.CheckPath()) { flag = true; break; } } } } if (flag) break; } } } this.From = null; this.To = null; return flag; }, Remove: function (from,to) { var lines = this.drawLine(); var _this = this; this.timeout+=5; this.timeout = Math.min(this.timeout,this.setting.timeout()); this.Scores +=10; document.getElementById("scores").innerText = this.Scores; document.getElementById("time").innerText = _this.timeout; this.Data[from] = null; this.Data[to] = null; this.leaveCount -=2; setTimeout(function () { var shucai = _this.Images[from]; shucai.className = "shucai removed"; shucai.innerHTML = " "; shucai = _this.Images[to]; shucai.className = "shucai removed"; shucai.innerHTML = " "; for (var i = 0; i < lines.length; i++) { document.body.removeChild(lines[i]); } lines = null; _this.Change(); }, 100); }, Change: function () { if (this.leaveCount == 0) { this.NextLevel(); return; } var leavel = this.setting.currentLevel; if (leavel == 3) {//左右分离 for (var y = 0; y < 10; y++) { for (var x = 0; x < 7; x++) { var index = y * 14 + x; if (this.Data[index] != null) { continue; } var flag = false; for (var i = x + 1; i < 7; i++) { var _index = y * 14 + i; if (this.Data[_index] != null) { this.Data[index] = this.Data[_index]; this.Data[_index] = null; flag = true; break; } } if (!flag) break; } for (var x = 13; x >= 7; x--) { var index = y * 14 + x; if (this.Data[index] != null) { continue; } var flag = false; for (var i = x - 1; i >= 7; i--) { var _index = y * 14 + i; if (this.Data[_index] != null) { this.Data[index] = this.Data[_index]; this.Data[_index] = null; flag = true; break; } } if (!flag) break; } } } else if (leavel == 4) {//上下分离 for (var x = 0; x < 14; x++) { for (var y = 0; y < 5; y++) { var index = y * 14 + x; if (this.Data[index] != null) { continue; } var flag = false; for (var i = y + 1; i < 5; i++) { var _index = i * 14 + x; if (this.Data[_index] != null) { this.Data[index] = this.Data[_index]; this.Data[_index] = null; flag = true; break; } } if (!flag) break; } for (var y = 9; y >= 5; y--) { var index = y * 14 + x; if (this.Data[index] != null) { continue; } var flag = false; for (var i = y - 1; i >= 5; i--) { var _index = i * 14 + x; if (this.Data[_index] != null) { this.Data[index] = this.Data[_index]; this.Data[_index] = null; flag = true; break; } } if (!flag) break; } } } else if (leavel == 5) {//往左移 for (var y = 0; y < 10; y++) { for (var x = 0; x < 14; x++) { var index = y * 14 + x; if (this.Data[index] != null) { continue; } var flag = false; for (var i = x + 1; i < 14; i++) { var _index = y * 14 + i; if (this.Data[_index] != null) { this.Data[index] = this.Data[_index]; this.Data[_index] = null; flag = true; break; } } if (!flag) break; } } } else if (leavel == 6) {//向右移 for (var y = 0; y < 10; y++) { for (var x = 13; x >= 0; x--) { var index = y * 14 + x; if (this.Data[index] != null) { continue; } var flag = false; for (var i = x - 1; i >= 0; i--) { var _index = y * 14 + i; if (this.Data[_index] != null) { this.Data[index] = this.Data[_index]; this.Data[_index] = null; flag = true; break; } } if (!flag) break; } } } else if (leavel == 7) {//向下移 for (var x = 0; x < 14; x++) { for (var y = 9; y >= 0; y--) { var index = y * 14 + x; if (this.Data[index] != null) { continue; } var flag = false; for (var i = y - 1; i >= 0; i--) { var _index = i * 14 + x; if (this.Data[_index] != null) { this.Data[index] = this.Data[_index]; this.Data[_index] = null; flag = true; break; } } if (!flag) break; } } } else if (leavel == 8) {//向上移 for (var x = 0; x < 14; x++) { for (var y = 0; y < 10; y++) { var index = y * 14 + x; if (this.Data[index] != null) { continue; } var flag = false; for (var i = y + 1; i < 10; i++) { var _index = i * 14 + x; if (this.Data[_index] != null) { this.Data[index] = this.Data[_index]; this.Data[_index] = null; flag = true; break; } } if (!flag) break; } } } else if (leavel == 9) {//向内紧缩 for (var y = 5; y < 10; y++) { for (var x = 7; x < 14; x++) { var index = y * 14 + x; if (this.Data[index] != null) { continue; } var flag = false; for (var i = x + 1; i < 14; i++) { var _index = y * 14 + i; if (this.Data[_index] != null) { this.Data[index] = this.Data[_index]; this.Data[_index] = null; flag = true; break; } } if (!flag) break; } for (var x = 6; x >= 0; x--) { var index = y * 14 + x; if (this.Data[index] != null) { continue; } var flag = false; for (var i = x - 1; i >= 0; i--) { var _index = y * 14 + i; if (this.Data[_index] != null) { this.Data[index] = this.Data[_index]; this.Data[_index] = null; flag = true; break; } } if (!flag) break; } } for (var y = 4; y > 0; y--) { for (var x = 7; x < 14; x++) { var index = y * 14 + x; if (this.Data[index] != null) { continue; } var flag = false; for (var i = x + 1; i < 14; i++) { var _index = y * 14 + i; if (this.Data[_index] != null) { this.Data[index] = this.Data[_index]; this.Data[_index] = null; flag = true; break; } } if (!flag) break; } for (var x = 6; x >= 0; x--) { var index = y * 14 + x; if (this.Data[index] != null) { continue; } var flag = false; for (var i = x - 1; i >= 0; i--) { var _index = y * 14 + i; if (this.Data[_index] != null) { this.Data[index] = this.Data[_index]; this.Data[_index] = null; flag = true; break; } } if (!flag) break; } } for (var x = 0; x < 7; x++) { for (var y = 5; y < 10; y++) { var index = y * 14 + x; if (this.Data[index] != null) { continue; } var flag = false; for (var i = y + 1; i < 10; i++) { var _index = i * 14 + x; if (this.Data[_index] != null) { this.Data[index] = this.Data[_index]; this.Data[_index] = null; flag = true; break; } } if (!flag) break; } for (var y = 4; y >= 0; y--) { var index = y * 14 + x; if (this.Data[index] != null) { continue; } var flag = false; for (var i = y - 1; i >= 0; i--) { var _index = i * 14 + x; if (this.Data[_index] != null) { this.Data[index] = this.Data[_index]; this.Data[_index] = null; flag = true; break; } } if (!flag) break; } } for (var x = 7; x < 14; x++) { for (var y = 5; y < 10; y++) { var index = y * 14 + x; if (this.Data[index] != null) { continue; } var flag = false; for (var i = y + 1; i < 10; i++) { var _index = i * 14 + x; if (this.Data[_index] != null) { this.Data[index] = this.Data[_index]; this.Data[_index] = null; flag = true; break; } } if (!flag) break; } for (var y = 4; y >= 0; y--) { var index = y * 14 + x; if (this.Data[index] != null) { continue; } var flag = false; for (var i = y - 1; i >= 0; i--) { var _index = i * 14 + x; if (this.Data[_index] != null) { this.Data[index] = this.Data[_index]; this.Data[_index] = null; flag = true; break; } } if (!flag) break; } } } for (var i = 0; i < 140; i++) { var shucai = this.Images[i]; if (this.Data[i] !== null && this.Data[i] != undefined) { shucai.innerText = this.Data[i]; shucai.className = "shucai"; } else { shucai.className = "shucai removed"; shucai.innerHTML = " "; } } if (!this.HasNext()) { this.life--; if (this.life < 0) { this.Over(); return; } this.Refresh(); } }, Refresh: function () { this.Init(); }, NextLevel: function () { this.life++; this.setting.currentLevel++; if (this.setting.currentLevel > this.setting.maxLevel) { this.Stop(); } else { this.InitData(); this.Init(); } }, Start: function () { this.timeout = this.setting.timeout(); document.getElementById("time").innerHTML = this.timeout; this.TimeStart(); }, ReStart: function () { this.TimeStart(); }, TimeStart: function () { var _this = this; this.time = setTimeout(function () { _this.timeout--; document.getElementById("time").innerText = _this.timeout; if (_this.timeout <= 0) { _this.Over(); } else { _this.TimeStart(); } }, 1000); }, TimeStop: function () { if (this.time != null) { clearTimeout(this.time); this.time = null; } else { this.TimeStart(); } }, Stop: function () { alert("恭喜你通关了游戏！"); var container = document.getElementById("Container"); container.innerHTML = ""; container.innerText = "恭喜你通关了游戏！"; }, Over: function () { if (this.time != null) { clearTimeout(this.time); this.time = null; } alert("游戏结束了！"); var container = document.getElementById("Container"); container.innerHTML = ""; container.innerText = "游戏结束了！"; }, addPath: function (pt) { this.pointArray.push(pt); }, drawLine: function () { var points = this.pointArray; if(points.length ==4){ if(points[1].x!==points[0].x && points[1].y!=points[0].y){ var temp = points[1]; points[1]=points[2]; points[2] = temp; } } var lines = []; for (var i = 0; i < points.length - 1; i++) { lines.push(this.draw(points[i], points[i + 1])); } return lines; }, draw: function (from, to) { //同列 var div = document.createElement("div"); div.className = "line"; if (from.x == to.x) { var minY = Math.min(from.y, to.y), maxY = Math.max(from.y, to.y); div.style.width = "2px"; div.style.height = ((maxY - minY) * (30+2) +2) + "px"; div.style.top = (100 + (30 +2) * minY + 15) + "px"; div.style.left = (115 + (30 +2) * from.x) + "px"; //this.lines.push(div); } //同行 else if (from.y == to.y) { var minX = Math.min(from.x, to.x), maxX = Math.max(from.x, to.x); div.style.height = "2px"; div.style.width = ((maxX - minX ) * (30+2) +2) + "px"; div.style.left = (100 + (30+2) * minX +15) + "px"; div.style.top = (100 + 15 + (30+2) * from.y) + "px"; //this.lines.push(div); } document.body.appendChild(div); return div; } }; llk.prototype.setting = { currentLevel: 1, maxLevel: 9, timeout: function () { return (this.currentLevel -1) * 10 + 180; } } </script> <style type="text/css"> * { padding:0px; margin:0px; } body { width:100%; height:100%; text-align:center; vertical-align:central; } div.shucai { width:30px; height:30px; border:1px solid silver; display:inline-block; cursor:pointer; } div.removed { cursor:default; } div.select { background-color:green; } div#Container { left:100px; top:100px; position:absolute; width:448px; height:320px; border:1px solid black; } div.line { background-color:red; z-index:999; position:absolute; } </style> <style type="text/css"> </style> </head> <body> <div id="Container"> </div> <input id="Button1" value="暂停/继续" onclick="_llk.TimeStop()" type="button" /> <input id="clue" value="提示" onclick="_llk.Clue()" type="button" /> <label>级别：</label><label id="leavel" ></label> <label>生命：</label><label id="life" ></label> <label>时间：</label><!--<label id="time"/>--><label id="time"></label> <label>分数：</label><label id="scores"></label> <script type="text/javascript"> var _llk = new llk(); </script> </body> </html>