连连看的原生JS实现

时间:2021-07-14 14:55:29

那天闲来无事,便想找个小游戏来打发时间,后来便找到了连连看,

玩了一会儿感觉无聊,想到各位高手用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>

  注释写的不多,不过也没用啥“高级”的功能,纯面向过程的编程方式,适合入门学习。

  这是第一版,这两天放假正好没事,继续修改,让代码写的好看,舒服些。

欢迎大家留言,批评,指教!

最后,附上完整代码:(不知道怎么附加文件,哪位可以指导下。。。)

连连看的原生JS实现连连看的原生JS实现
<!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 = "&nbsp;";
                    }
                }
                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 = "&nbsp;";

                    shucai = _this.Images[to];
                    shucai.className = "shucai removed";
                    shucai.innerHTML = "&nbsp;";

                    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 = "&nbsp;";
                    }
                }

                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>
View Code