连连看的原生JS实现
那天闲来无事，便想找个小游戏来打发时间，后来便找到了连连看，
玩了一会儿感觉无聊，想到各位高手用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>
连连看的原生JS实现的更多相关文章
- 连连看的原生JS实现V2
对上一次的连连看程序进行了一点修改: var llk = function () { this.ReStart(); } llk.prototype = { Init: function () { / ...
- 原生JS封装Ajax插件(同域&&jsonp跨域)
抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...
- 常用原生JS方法总结（兼容性写法）
经常会用到原生JS来写前端...但是原生JS的一些方法在适应各个浏览器的时候写法有的也不怎么一样的... 今天下班有点累... 就来总结一下简单的东西吧…… 备注:一下的方法都是包裹在一个EventU ...
- 原生JS实现"旋转木马"效果的图片轮播插件
一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...
- 再谈React.js实现原生js拖拽效果
前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...
- React.js实现原生js拖拽效果及思考
一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
- 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前
思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...
- 原生js实现autocomplete插件
在实际的项目中,能用别人写好的插件实现相关功能是最好不过,为了节约时间成本,因为有的项目比较紧急,没充分时间让你自己来写,即便写了,你还要花大量时间调试兼容性.但是出于学习的目的,你可以利用闲暇时间, ...
- 原生js封装ajax：传json，str，excel文件上传表单提交
由于项目中需要在提交ajax前设置header信息,jquery的ajax实现不了,我们自己封装几个常用的ajax方法. jQuery的ajax普通封装 var ajaxFn = function(u ...
随机推荐
- UVa 11790 - Murcia's Skyline
题目大意:给一个建筑的序列,建筑用高度和宽度描述,找出按高度的LIS和LDS,最长XX子序列的长度按照序列中建筑的宽度和进行计算. 其实就是带权的最长XX子序列问题,原来是按个数计算,每个数权都是1, ...
- 在Android 中使用KSOAP2调用WebService
WebService 是一种基于SOAP协议的远程调用标准.通过WebService可以将不同操作系统平台,不同语言.不同技术整合到一起.在Android SDK中并没有提供调用WebService的 ...
- max-width
#main { max-width: 600px; margin: 0 auto; } <div id="main"> Using max-width instead ...
- 让表格table呈现边框，不用给tr、td加边框的写法
<table width="100%" cellspacing="1" cellpadding="1" bgcolor="# ...
- MariaDB与MySQL在一台服务器同时运行
[root@HE3 ~]#groupadd mariadb -g 513 [root@HE3 ~]#useradd-u 513 -gmariadb -s /sbin/nologin -d /home/ ...
- sitemap.xml 的 几个东西
https://github.com/PureKrome/SimpleSitemap/wiki/Sitemap-Index-example 简单类实现 支持sitemapindex 有说明向导 ht ...
- lufylegend库 鼠标事件 循环事件 键盘事件
lufylegend库 鼠标事件 循环事件 键盘事件 <!DOCTYPE html> <html lang="en"> <head> <m ...
- 通过浏览器navigator判断浏览器版本或者手机类型&&判断微信访问
javascript 的navigator属性,不常用,但是用处也不少,主要用处是在做浏览器兼容的问题的时候,现在有的网站已经不兼容IE6,用户假如用IE6浏览网页的话,会提示浏览器升级等信息.或者判 ...
- web前端性能调优（二）
项目经过第一波优化之后APP端已基本已经符合我们的要求了,但是TV端还是反应比较慢,页面加载和渲染都比较慢了一点,我觉的还是有必要在进行一些优化,经过前面的优化,我们的优化空间已经小了一部分,不过还是 ...
- Codeforces Round #257 (Div. 1)A~C(DIV.2-C~E)题解
今天老师(orz sansirowaltz)让我们做了很久之前的一场Codeforces Round #257 (Div. 1),这里给出A~C的题解,对应DIV2的C~E. A.Jzzhu and ...