连连看-js
时间：2010-07-17 来源：zhouxianglh
前几天写了,算是一个小小的总结吧.
//连连看 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({
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();
})();
相关阅读 更多 +
