连连看-js

前几天写了,算是一个小小的总结吧.

//连连看  2010.07.14 isw2 zhoux
(function () {
	var cellDivCSS = "cellDiv";//选中前样式
	var selectDivCSS = "selectDiv";//选中后样式
	var maxChangePath = 2;//最多转向2次
	//图块
	var cell = function (panel, con, row) {//显示的图块
		this.elem = document.createElement("div");
		this.disImage;
		this.con = con;
		this.row = row;
		this.display = false;
		var height = "48", width = "48";
		$(this.elem).attr("class", cellDivCSS);
		$(this.elem).click(function () {
			panel.cellClick(con, row);
		});
		this.init = function (imageSrc) {//初始化图块
			this.disImage = document.createElement("img");
			this.disImage.src = imageSrc;
			this.elem.appendChild(this.disImage);
			$(this.disImage).attr({height:height,width:width,alt:imageSrc});
			this.display = true;
		};
		this.hide = function (speed) {//隐藏图块
			$(this.disImage).hide(speed);
			this.display = false;
		};
		this.show = function (speed) {//显示图块
			$(this.disImage).show(speed);
			this.display = true;
		};
		this.selectByPath = function (changePath, path, selectPath, endCell) {//根据路径查找
			var tempCell = panel.cellPath(selectPath, this.con, this.row);
			if (null == tempCell) {//图块不可使用
				return false;
			}
			if (tempCell.con === endCell.con && tempCell.row == endCell.row) {//图块找到
				return true;
			}
			if (tempCell.display) {//如果此图块有显示
				return false;
			}
			if (path !== selectPath && changePath < maxChangePath && tempCell.selectPath(changePath + 1, path, endCell)) {//如需转向
				return true;
			} else if (path === selectPath && tempCell.selectPath(changePath, path, endCell)) {//不需转向
				return true;
			}else{
				return false;
			}
		};
		this.selectPath = function (changePath, path, endCell) {//选择路径
			if (path != "down" && this.selectByPath(changePath, path, "up", endCell)) {//上
				return true;
			}
			if (path != "up" && this.selectByPath(changePath, path, "down", endCell)) {//下
				return true;
			}
			if (path != "right" && this.selectByPath(changePath, path, "left", endCell)) {//左
				return true;
			}
			if (path != "left" && this.selectByPath(changePath, path, "right", endCell)) {//右
				return true;
			}
			return false;
		};
	};
	//面板
	var panel = function () {
		this.row = 6, this.con = 6;
		var cellList, elem, selected = [];
		var imageList = ["image/chrome.png", "image/firefox.png", "image/google.png", "image/ie.png", "image/java.png", "image/opera.png", "image/ubuntu.png","image/eclipse.png","image/gnome.png","image/msn.png","image/redhat.png","image/windows.png"];
		var selectDisplayImage = function () {//筛选出显示在面板上的图层(私有)
			var row, con, i, j, tempArr = [], countArr = 0;
			for (row = 0, i = cellList.length; row < i; row++) {
				for (con = 0, j = cellList[row].length; con < j; con++) {
					if (cellList[row][con].display === true) {
						tempArr[countArr++] = cellList[row][con];
					}
				}
			}
			return tempArr;
		};
		var setSelect = function (cell) {//设置选中
			$(cell.elem).attr("class", selectDivCSS);
		};
		var setUnselect = function (cell) {//取消选中
			$(cell.elem).attr("class", cellDivCSS);
		};
		this.init = function (panelId) {//初始化面板
			var row, con, i, j;
			elem = $("#" + panelId)[0];
			cellList = new Array(this.row + 2);
			for (row = 0, i = cellList.length; row < i; row++) {//初始化DIV
				cellList[row] = new Array(this.con + 2);
				for (con = 0, j = cellList[row].length; con < j; con++) {
					cellList[row][con] = new cell(this, con, row);
					elem.appendChild(cellList[row][con].elem);
					if (row > 0 && row < i - 1 && con > 0 && con < j - 1) {//设置是否显示
						cellList[row][con].display = true;
					}
				}
			}
			this.radomImage();
		};
		this.radomImage = function () {//在现有的块上生成随机图片
			var i, j, count, countArr = 0, imageLength = imageList.length, indexImage, tempArr;
			tempArr = selectDisplayImage();//筛选出在面板上显示的图块
			for (indexImage in tempArr) {//删除原有图片
				$(tempArr.disImage).remove();
			}
			for (countArr = 0, count = tempArr.length; countArr < count / 2; countArr++) {//随机生成新图片,每次两张,保证配对
				do {
					i = Math.floor(Math.random() * count);
					j = Math.floor(Math.random() * count);
				} while (i == j || (tempArr[i].disImage != null) || (tempArr[j].disImage != null));
				indexImage = Math.floor(Math.random() * imageLength);
				tempArr[i].init(imageList[indexImage]);
				tempArr[j].init(imageList[indexImage]);
			}
		};
		this.cellClick = function (con, row) {
			if (!cellList[row][con].display) {
				return;
			}
			if (cellList[row][con] == selected[0] || cellList[row][con] == selected[1]) {
				if (cellList[row][con] == selected[0]) {//取消选中第一个
					selected[0] = selected[1];
					selected[1] = null;
				} else if (cellList[row][con] == selected[1]) {//取消选中第二个
					selected[1] = null;
				}
				setUnselect(cellList[row][con]);
			} else {
				if (null == selected[0]) {//选中第一个
					selected[0] = cellList[row][con];
					setSelect(selected[0]);
				} else {
					if (null == selected[1]) {//选中第二个
						selected[1] = cellList[row][con];
						if(selected[1].disImage.src == selected[0].disImage.src){//如果图片相同
							if (selected[1].selectPath(0, "up", selected[0]) || selected[1].selectPath(0, "down", selected[0]) || selected[1].selectPath(0, "left", selected[0]) || selected[1].selectPath(0, "right", selected[0])) {
								selected[1].hide("slow");
								selected[0].hide("slow");
								if(!this.checkUse()){//检查是否可继续操作
									this.radomImage();
								}
							}
						}
						setUnselect(selected[0]);//取消选中的第一个
						setUnselect(selected[1]);//取消选中的第二个
						selected[1] = null;
						selected[0] = null;
					}
				}
			}
		};
		this.cellPath = function (path, con, row) {//选择旁边的cell
			try {//数组越界
				switch (path) {
				  case "up":
					return cellList[++row][con];
				  case "down":
					return cellList[--row][con];
				  case "right":
					return cellList[row][++con];
				  case "left":
					return cellList[row][--con];
				}
			}
			catch (e) {
			}
			return null;
		};
		this.checkUse = function(){//查看是否还可以继续操作
			var tempArr = selectDisplayImage(),i,j,k;
			if(tempArr.length == 0){
				return true;
			}
			for(i in tempArr){
				for(j = parseInt(i)+1,k = tempArr.length;j < k ;j++){
					if(tempArr[i].disImage.src == tempArr[j].disImage.src){//如果图片相同
						if (tempArr[i].selectPath(0, "up", tempArr[j]) || tempArr[i].selectPath(0, "down", tempArr[j]) || tempArr[i].selectPath(0, "left", tempArr[j]) || tempArr[i].selectPath(0, "right", tempArr[j])) {
							return true;
						}
					}
				}
			}
			alert("error");
			return false;
		};
	};
	window._ = window.panel = new panel();
})();

 

 

评论

1 楼 xulei1992 2014-10-31  

打开只有一个读到一半的进度条啊亲