万普插件库

春节在家无聊，自己编写一个数字华容道小游戏来玩玩。

但不顺，代码有BUG，随机打散生成的数字会存在78颠倒，无解的情况。

有点点小挫败感

不过呢，做代码积累吧。

可供积累的代码点：

（1）jQuery的attr使用（现在都用vue了，jq估计过时了）

（2）单元格按钮响应

先上图

相关视频：

数字华容道的视频

几个技术点：

1、随机打散数字

2、绘制表格

3、单元格响应按钮事件

4、计时器（有点问题，好像不能自动清掉定时器）

5、判断答案是否正确

一、随机打散数字

// 生成随机数 //
function randomNumberArray(maxNum) {
	let result = [];
	let i = 0;
	for (i = 0; i < maxNum; ++i) {
		result[i] = i + 1;
	}
	result.sort(() => Math.random() - 0.5);
	return result;
}

二、绘制表格

function tdClick(oThis) {
	let row = parseInt($(oThis).attr("data-row"), 10);
	let col = parseInt($(oThis).attr("data-col"), 10);
	let dataValue = parseInt($(oThis).attr("data-value"), 10);
	if (dataValue == 0) {
		return;
	}
	let removeCtrl = findEmptyTd(row, col);
	if (removeCtrl == null) {
		return;
	}

	$(removeCtrl).attr("data-value", dataValue);
	$(removeCtrl).html(dataValue);


	$(oThis).attr("data-value", 0);
	$(oThis).html("");
	addStep();
}

function buildTdCtrlId(i, j) {
	return "td_game_" + i + "_" + j;
}

function drawTd(i, j, data) {
	let result = "";
	let dataValue = "";
	let cssClass = "game";
	let ctrlId = buildTdCtrlId(i, j);
	if (data > 0) {
		dataValue = data;
	}
	result += "";
	result += "";


	for (i = 0; i < num; ++i) {
		result += "";
		for (j = 0; j < num; ++j) {
			idx = i * num + j;
			if (idx == maxNum) {
				data = 0;
			} else {
				data = dataArray[idx];
			}
			result += drawTd(i, j, data);
		}

		result += "";
	}

	result += "";
	result += "";

	return result;
}

三、单元格响应按钮事件

function findEmptyTdByRowCol(i, j) {
	if (i == -1 || j == -1) {
		return null;
	}

	let ctrlId = buildTdCtrlId(i, j);
	let tdCtrl = $("#" + ctrlId);
	// 为空代表越界 //
	if (tdCtrl == null) {
		return null;
	}

	let dataValue = parseInt($(tdCtrl).attr("data-value"), 10);
	if (dataValue != 0) {
		return null;
	}

	return tdCtrl;

}

function findEmptyTd(row, col) {
	let i = 0;
	let j = 0;
	let result = null;
	for (i = 0; i < 2; ++i) {
		for (j = 0; j < 2; ++j) {
			if (i == 0) {
				result = findEmptyTdByRowCol(row + j * 2 - 1, col);
			} else {
				result = findEmptyTdByRowCol(row, col + j * 2 - 1);
			}

			if (result != null) {
				return result;
			}
		}
	}

	return null;
}

function gameIsSuccess() {
	let num = parseInt($("#tb_game").attr("data-num"), 10);
	let maxNum = num * num;
	let i = 0;
	let j = 0;
	let dataValue = 0;
	let ctrlId = null;
	let ctrlDataValue = null;
	for (i = 0; i < num; ++i) {
		for (j = 0; j < num; ++j) {
			dataValue = i * num + j + 1;
			if (dataValue == maxNum) {
				dataValue = 0;
			}
			ctrlId = buildTdCtrlId(i, j);
			ctrlDataValue = parseInt($("#" + ctrlId).attr("data-value"), 10);
			if (ctrlDataValue != dataValue) {
				return false;
			}

		}
	}

	return true;
}

function addStep() {
	let successFlag = gameIsSuccess();
	let step = parseInt($("#span_step").html(), 10);
	$("#span_step").html((step + 1) + "");
	if (successFlag) {
		doClearInterval();
		$("#span_step").attr("class", "end");
	}
}

function tdClick(oThis) {
	let row = parseInt($(oThis).attr("data-row"), 10);
	let col = parseInt($(oThis).attr("data-col"), 10);
	let dataValue = parseInt($(oThis).attr("data-value"), 10);
	if (dataValue == 0) {
		return;
	}
	let removeCtrl = findEmptyTd(row, col);
	if (removeCtrl == null) {
		return;
	}

	$(removeCtrl).attr("data-value", dataValue);
	$(removeCtrl).html(dataValue);


	$(oThis).attr("data-value", 0);
	$(oThis).html("");
	addStep();
}

四、计时器（有点问题，好像不能自动清掉定时器）

let intervalId = null;
let timeValue = 0;
let endIntervalFlag = false;

function showTimeText(data) {

	if (data < 60) {
		return data + "秒";
	}

	let m = Math.floor(data / 60);
	let s = data - m * 60;

	if (m < 60) {
		return m + "分" + s + "秒";
	}

	let h = Math.floor(m / 60);
	m = m - h * 60;
	return h + "小时" + m + "分" + s + "秒";

}

function printTimeOut() {
	if(endIntervalFlag){
		return;
	}
	++timeValue;
	let showText = showTimeText(timeValue);
	$("#span_time").html(showText);
}

function doStartInterval() {
	endIntervalFlag = false;
	timeValue = 0;
	intervalId = setInterval(printTimeOut, 1000);
}

function doClearInterval() {
	endIntervalFlag = true;
	if (intervalId == null) {
		return;
	}

	clearInterval(intervalId);
}

五、判断答案是否正确

function gameIsSuccess() {
	let num = parseInt($("#tb_game").attr("data-num"), 10);
	let maxNum = num * num;
	let i = 0;
	let j = 0;
	let dataValue = 0;
	let ctrlId = null;
	let ctrlDataValue = null;
	for (i = 0; i < num; ++i) {
		for (j = 0; j < num; ++j) {
			dataValue = i * num + j + 1;
			if (dataValue == maxNum) {
				dataValue = 0;
			}
			ctrlId = buildTdCtrlId(i, j);
			ctrlDataValue = parseInt($("#" + ctrlId).attr("data-value"), 10);
			if (ctrlDataValue != dataValue) {
				return false;
			}

		}
	}

	return true;
}

相关链接：

「链接」

完整代码：

	

	


		

			

				数字华容道
			
		
		

			

				
				
				|
				0
				|