mui做一个数字华容道

绪论

其实好久以前就看到这个数字华容道了,只是一直没时间自己写一个,十月份就在草稿箱(⊙o⊙)…,所以整理了一下。
代码上会存在一些问题,多扩展的部分也没去做,后面会说明原因。

思路

  1. 初始化数组。
  2. 随机打乱。
  3. 逻辑判断,只要用全局变量记住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 = {}));

结果

在这里插入图片描述

其实这个代码也存在一些问题,但是没什么必要去优化,太浪费时间。
最近也看了一些文章,在谈论为什么写博客还有写一些自己的小项目,大部分人只在最初的时候写了一点代码,之后就不知道扔到哪里去了,最后不了了之,并没有学到多少东西,就像我去年想自己写个博客系统,最后也没坚持下来。
在这里插入图片描述
这还有八月份的草稿,有些代码依然没有来的及整理,最近这几天希望能整理完。

对于写项目给大家(更是给我自己,毕竟没多少人看)的一点建议:

  1. 项目尽量小,太大的项目花费时间长,容易放弃。
  2. 不要追求完美代码,否则会花费自己大量的时间。
  3. 最终我们要以学知识为目的。

源代码下载地址

(若有什么错误,请留言指正,3Q)

发布了101 篇原创文章 · 获赞 140 · 访问量 8万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 技术黑板 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览