緒論

其實好久以前就看到這個數字華容道了，只是一直沒時間自己寫一個，十月份就在草稿箱(⊙o⊙)…，所以整理了一下，代碼上會存在一些問題，多擴展的部分也沒去做，後面會說明原因。

思路

初始化數組。
隨機打亂。
邏輯判斷，只要用全局變量記住0的位置，其它邏輯判斷可移動方向就好，每次操作之後，驗證是否還原，若還原彈出通關時長。

代碼

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    
    <style>
    	
    </style>
</head>
<body>
	<header class="mui-bar mui-bar-nav">
	    <h1 class="mui-title">數字華容道</h1>
	</header>
	<div class="mui-content">
		<div class="yang-div1">
			<div class="yang-div2">
				<button id="btn1" type="button" class="mui-btn mui-btn-blue">三階</button>
				<button id="btn2" type="button" class="mui-btn mui-btn-blue">四階</button>
				<button id="btn3" type="button" class="mui-btn mui-btn-blue">五階</button>
				<button id="btn4" type="button" class="mui-btn mui-btn-blue">六階</button>
				<button id="btn5" type="button" class="mui-btn mui-btn-blue">七階</button>
				<button id="btn6" type="button" class="mui-btn mui-btn-blue">八階</button>
			</div>
		</div>
	</div>
	
	<script type="text/javascript" charset="utf-8">
      	mui.init({});
      	
      	mui.plusReady(function(){
			
		});
      	
      	document.getElementById("btn1").addEventListener('tap', function() {
			mui.openWindow({
      			id:'three',
      			url:'html/three.html',
      			waiting: {
      				autoShow: true,
      				title: '正在加載...'
      			}
      		});
      		var apage = plus.webview.getWebviewById("three");		
			mui.fire(apage, 'three_init', {
				
			});
		});
		
		document.getElementById("btn2").addEventListener('tap', function() {
			mui.openWindow({
      			id:'four',
      			url:'html/four.html',
      			waiting: {
      				autoShow: true,
      				title: '正在加載...'
      			}
      		});
      		var apage = plus.webview.getWebviewById("four");		
			mui.fire(apage, 'four_init', {
				
			});
		});
		
		document.getElementById("btn3").addEventListener('tap', function() {
			mui.openWindow({
      			id:'five',
      			url:'html/five.html',
      			waiting: {
      				autoShow: true,
      				title: '正在加載...'
      			}
      		});
      		var apage = plus.webview.getWebviewById("five");		
			mui.fire(apage, 'five_init', {
				
			});
		});
		
		document.getElementById("btn4").addEventListener('tap', function() {
			mui.openWindow({
      			id:'six',
      			url:'html/six.html',
      			waiting: {
      				autoShow: true,
      				title: '正在加載...'
      			}
      		});
      		var apage = plus.webview.getWebviewById("six");		
			mui.fire(apage, 'six_init', {
				
			});
		});
		
		document.getElementById("btn5").addEventListener('tap', function() {
			mui.openWindow({
      			id:'seven',
      			url:'html/seven.html',
      			waiting: {
      				autoShow: true,
      				title: '正在加載...'
      			}
      		});
      		var apage = plus.webview.getWebviewById("seven");		
			mui.fire(apage, 'seven_init', {
				
			});
		});
		
		document.getElementById("btn6").addEventListener('tap', function() {
			mui.openWindow({
      			id:'eight',
      			url:'html/eight.html',
      			waiting: {
      				autoShow: true,
      				title: '正在加載...'
      			}
      		});
      		var apage = plus.webview.getWebviewById("eight");		
			mui.fire(apage, 'eight_init', {
				
			});
		});
    </script>
</body>
</html>

three.html

<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		
		<style>
			.yang-table{
				border: 1px solid #ccc;
			}
			.yang-table td{
				width: 110px;
				height: 110px;
				border:solid #ccc 1px;
				text-align: center;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">三階</h1>
		</header>
		
		<div class="mui-content">
			<a href="../index.html"></a>
		    <div class="yang-div1">
		    	<table id="table1" class="yang-table">
		    		<tr>
		    			<td></td>
		    			<td></td>
		    			<td></td>
		    		</tr>
		    		<tr>
		    			<td></td>
		    			<td></td>
		    			<td></td>
		    		</tr>
		    		<tr>
		    			<td></td>
		    			<td></td>
		    			<td></td>
		    		</tr>
		    	</table>
		    </div>
		    <span id="span1"></span>
		</div>
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/yang.js" ></script>
		<script type="text/javascript">
			mui.init({});
			
			var arr;
			var table;
			var row = 2;	// 行
			var col = 2;	// 列
			var rowMax = 2;	// 最大行
			var colMax = 2;	// 最大列
			
			mui.plusReady(function(){
				
			});
			
			window.addEventListener('three_init',function(event){
				start();
			});
			
			function start(){
				arr = yang.createArr(3);
				table = document.getElementById('table1');
				for(var i=0; i < 3; i++){
					for(var j=0; j < 3; j++) {
						table.rows[i].cells[j].innerHTML = arr[i][j];
						table.rows[i].cells[j].style.backgroundColor = 'yellow';
					}
				}
				table.rows[2].cells[2].style.backgroundColor = '#FFFFFF';
				
				// 隨機打亂
				disorganize();
				// 時間
				var hour = 0, minute = 0, second = 0;
				setInterval(function(){
					second = second + 1;
					if(second >= 60){
						second = 0;
						minute = minute + 1;
					}
					if(minute >= 60){
						minute = 0;
						hour = hour + 1;
					}
					document.getElementById(span1).innerHTML = hour + '時' + minute + '分' + second + '秒';
				}, 1000);
			}
			
			window.addEventListener('swipeleft',function(event){
				console.log('向左滑動');
				left();
			});
			
			window.addEventListener('swiperight',function(event){
				console.log('向右滑動');
				right();
			});
			
			window.addEventListener('swipeup',function(event){
				console.log('向上滑動');
				up();
			});
			
			window.addEventListener('swipedown',function(event){
				console.log('向下滑動');
				down();
			});
			
			function disorganize(){
				for(var i = 0; i < 666; i++){
					// 向下取整
					var num = Math.floor(Math.random()*4);
					if(num == 1){
						var td1 = table.rows[row].cells[col + 1].innerHTML;
						table.rows[row].cells[col].innerHTML = td1;
						table.rows[row].cells[col + 1].innerHTML = 0;
						table.rows[row].cells[col].style.backgroundColor = 'yellow';
						table.rows[row].cells[col + 1].style.backgroundColor = '#FFFFFF';
						arr[row][col] = td1;
						arr[row][col + 1] = 0;
						col = col + 1;
					}else if(num == 2){
						var td1 = table.rows[row].cells[col - 1].innerHTML;
						table.rows[row].cells[col].innerHTML = td1;
						table.rows[row].cells[col - 1].innerHTML = 0;
						table.rows[row].cells[col].style.backgroundColor = 'yellow';
						table.rows[row].cells[col - 1].style.backgroundColor = '#FFFFFF';
						arr[row][col] = td1;
						arr[row][col - 1] = 0;
						col = col - 1;
					}else if(num == 3){
						var td1 = table.rows[row + 1].cells[col].innerHTML;
						table.rows[row].cells[col].innerHTML = td1;
						table.rows[row + 1].cells[col].innerHTML = 0;
						table.rows[row].cells[col].style.backgroundColor = 'yellow';
						table.rows[row + 1].cells[col].style.backgroundColor = '#FFFFFF';
						arr[row][col] = td1;
						arr[row + 1][col] = 0;
						row = row + 1;
					}else{
						var td1 = table.rows[row - 1].cells[col].innerHTML;
						table.rows[row].cells[col].innerHTML = td1;
						table.rows[row - 1].cells[col].innerHTML = 0;
						table.rows[row].cells[col].style.backgroundColor = 'yellow';
						table.rows[row - 1].cells[col].style.backgroundColor = '#FFFFFF';
						arr[row][col] = td1;
						arr[row - 1][col] = 0;
						row = row - 1;
					}
				}
			}
			
			function left(){
				if(col == colMax){
					return;
				}else{
					// 交換
					var td1 = table.rows[row].cells[col + 1].innerHTML;
					table.rows[row].cells[col].innerHTML = td1;
					table.rows[row].cells[col + 1].innerHTML = 0;
					table.rows[row].cells[col].style.backgroundColor = 'yellow';
					table.rows[row].cells[col + 1].style.backgroundColor = '#FFFFFF';
					arr[row][col] = td1;
					arr[row][col + 1] = 0;
					col = col + 1;
					// 驗證是否過關
					if(row != rowMax || col != colMax){
						return;
					}else{
						if(yang.ifPass(arr, 3)){
							// 通關
							var btnArray = ['返回首頁', '再來一局'];
							mui.confirm('時長：', '恭喜通關', btnArray, function(e) {
								if (e.index == 1) {
									disorganize();
								} else {
									mui.back();
								}
							});
						}else{
							return;
						}
					}
				}
			}
			
			function right(){
				if(col == 0){
					return;
				}else{
					// 交換
					var td1 = table.rows[row].cells[col - 1].innerHTML;
					table.rows[row].cells[col].innerHTML = td1;
					table.rows[row].cells[col - 1].innerHTML = 0;
					table.rows[row].cells[col].style.backgroundColor = 'yellow';
					table.rows[row].cells[col - 1].style.backgroundColor = '#FFFFFF';
					arr[row][col] = td1;
					arr[row][col - 1] = 0;
					col = col - 1;
					// 驗證是否過關
					if(row != rowMax || col != colMax){
						return;
					}else{
						if(yang.ifPass(arr, 3)){
							// 通關
							var btnArray = ['返回首頁', '再來一局'];
							mui.confirm('時長：', '恭喜通關', btnArray, function(e) {
								if (e.index == 1) {
									disorganize();
								} else {
									mui.back();
								}
							});
						}else{
							return;
						}
					}
				}
			}
			
			function up(){
				if(row == rowMax){
					return;
				}else{
					// 交換
					var td1 = table.rows[row + 1].cells[col].innerHTML;
					table.rows[row].cells[col].innerHTML = td1;
					table.rows[row + 1].cells[col].innerHTML = 0;
					table.rows[row].cells[col].style.backgroundColor = 'yellow';
					table.rows[row + 1].cells[col].style.backgroundColor = '#FFFFFF';
					arr[row][col] = td1;
					arr[row + 1][col] = 0;
					row = row + 1;
					// 驗證是否過關
					if(row != rowMax || col != colMax){
						return;
					}else{
						if(yang.ifPass(arr, 3)){
							// 通關
							var btnArray = ['返回首頁', '再來一局'];
							mui.confirm('時長：', '恭喜通關', btnArray, function(e) {
								if (e.index == 1) {
									disorganize();
								} else {
									mui.back();
								}
							});
						}else{
							return;
						}
					}
				}
			}
			
			function down(){
				if(row == 0){
					return;
				}else{
					// 交換
					var td1 = table.rows[row - 1].cells[col].innerHTML;
					table.rows[row].cells[col].innerHTML = td1;
					table.rows[row - 1].cells[col].innerHTML = 0;
					table.rows[row].cells[col].style.backgroundColor = 'yellow';
					table.rows[row - 1].cells[col].style.backgroundColor = '#FFFFFF';
					arr[row][col] = td1;
					arr[row - 1][col] = 0;
					row = row - 1;
					// 驗證是否過關
					if(row != rowMax || col != colMax){
						return;
					}else{
						if(yang.ifPass(arr, 3)){
							// 通關
							var btnArray = ['返回首頁', '再來一局'];
							mui.confirm('時長：', '恭喜通關', btnArray, function(e) {
								if (e.index == 1) {
									disorganize();
								} else {
									mui.back();
								}
							});
						}else{
							return;
						}
					}
				}
			}
		</script>
	</body>

</html>

yang.js

(function($, owner) {

	/**
	 * 初始化頁面數組
	 * @param {Object} num
	 */
	owner.createArr = function(num) {
		var arr = new Array();
		var init = 1;
		for(var i = 0; i < num; i++) {
			arr[i] = new Array(i);
			for(var j = 0; j < num; j++) {
				arr[i][j] = init;
				init++;
			}
		}
		arr[num-1][num-1] = 0;
		return arr;
	}
	
	/**
	 * 判斷是否通關
	 * @param {Object} arr
	 * @param {Object} num
	 */
	owner.ifPass = function(arr, num){
		var init = 1;
		for(var i = 0; i < num; i++) {
			for(var j = 0; j < num; j++) {
				if((i + 1) == num && (j + 1) == num){
					
				}else{
					if(arr[i][j] != init){
						return false;
					}
				}
				init++;
			}
		}
		return true;
	}
	
	owner.showTime = function(){
		var hour = 0, minute = 0, second = 0;
		setInterval(function(){
			
		}, 1000);
	}
}(mui, window.yang = {}));

結果

其實這個代碼也存在一些問題，但是沒什麼必要去優化，太浪費時間。
最近也看了一些文章，在談論爲什麼寫博客還有寫一些自己的小項目，大部分人只在最初的時候寫了一點代碼，之後就不知道扔到哪裏去了，最後不了了之，並沒有學到多少東西，就像我去年想自己寫個博客系統，最後也沒堅持下來。

這還有八月份的草稿，有些代碼依然沒有來的及整理，最近這幾天希望能整理完。

對於寫項目給大家（更是給我自己，畢竟沒多少人看）的一點建議：

項目儘量小，太大的項目花費時間長，容易放棄。
不要追求完美代碼，否則會花費自己大量的時間。
最終我們要以學知識爲目的。

源代碼下載地址

（若有什麼錯誤，請留言指正，3Q）

mui做一個數字華容道

緒論

思路

代碼

結果

vue項目獲取富文本編輯器wangEditor內容導出爲word（html轉word格式並下載）

dotnet C# 創建 X11 應用時設置窗口背景顏色

Navicat安裝與激活教程

TDengine docker安裝方法

vue3組件通信與props

sapui5

Alpine Linux apk add DNS lookup error

部分JDK版本的發佈時間

工作中用到的腳本合集

合併代碼時Beyond Compare設置

Qt：一鍵導出客戶端（二）-- 管理員窗口

Qt：一鍵導出客戶端（一）-- 登錄窗口

git使用筆記

Spring Boot 定時任務

IntelliJ IDEA 2019.1.3激活

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結