mui做一个数字华容道

最新推荐文章于 2022-06-27 20:01:33 发布
最新推荐文章于 2022-06-27 20:01:33 发布
阅读量870 收藏 4
点赞数 1
分类专栏： # JavaScript - mui.js 文章标签： MUI 数字华容道
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39237801/article/details/82763452
版权

绪论

其实好久以前就看到这个数字华容道了，只是一直没时间自己写一个，十月份就在草稿箱(⊙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）

3y先生
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
C语言开发数字华容道实现,从技术角度实现实现数字华容道
weixin_30348079的博客
05-20 1402
目的上周新一期的最强大脑出来了，虽然上季被称为最强黑幕，不过呢。我决定还是看看= =。它里面第一关是叫做数字华容道。说白了，就是和拼图差不多。一开始我准备下一个玩玩的。结果没搜到。所以决定写了一个。最后效果差不多是这样：思路以及实现首先，我们应该考虑如何去实现这个效果。细想一下，其实和之前的2048有点像，但是又不是完全一直。于是，便又折腾了一波。这次布局和内容项参考之前2048的，下面放上代码：...
Dev-c++编写 数字华容道
mikenth
01-18 906
Dev-c++编写数字华容道 详解
数字华容道算法生有解
qq_15117535的博客
03-14 1765
数字华容道NxN数字随机排列的阵列有解的充要条件是： N为奇数，总逆序数为偶数， N为偶数，总逆序数为奇数。 --数字华容道算法2*2-10*10 --随机生成有解算法 --作者，韩永旗 --迷你号247312290 local A={} local N=0 local t="" local n=0 local function addt() print(unpack(A)) local t=N.."*"..N.."数字华容道随机面板[有解]\n" for k,v in ipai...
c++数字华容道
qi_programmer的博客
09-24 2541
#include <bits/stdc++.h> #include <windows.h> #include <conio.h> using namespace std; int num[10005]={0}; int n,p[105][105],x,y,sum; bool iswin(){ int f=1; for(int i=1;i<=n-1;i++){ for(int j=1;j<=n;j++){ .
数字华容道关键算法（有序随机数生成）
qq_40872999的博客
12-17 6952
关于数字华容道的随机数据参数 玩过数字华容道的都知道，随机数是由原来的顺序排列通过随机移动块产生的，但是如果把块扣出来重新组合就会导致可能永远不会回到初始状态 例如： 1   2   3   1   2   3 4   5   6    4   5   6 7   8        8   7 正常结果只能是左边这个，而右边这个肯定是错误的，是一个永远也回不去的方法，所以避免这种情况发生，我特...
MUI数字华容道
12-24
【MUI数字华容道】是一款基于MUI框架开发的数字益智游戏，它结合了传统的华容道玩法与现代的移动应用技术，为用户提供了一种全新的数字娱乐体验。MUI是中国阿里巴巴集团推出的轻量级前端框架，专为移动互联网设计，...
微信小程序实现MUI数字输入框效果
08-28
在微信小程序开发中，有时我们需要创建一个类似于MUI框架中的数字输入框（Number Input）效果，以便用户能够方便地增加或减少数值。本文将详细介绍如何在微信小程序中实现这一功能，并提供具体的代码示例。 首先，...
mui：一个漂亮的webcomponent组件库！
02-06
【标题】：“mui：一个漂亮的webcomponent组件库！” 【描述】：虽然描述中没有提供具体信息，但我们可以推测“mui”是一个专注于WebComponent技术的前端框架或库，旨在提供美观且易于使用的组件，帮助开发者快速...
mui制作的一级联动选择demo
12-07
在移动应用开发中，Mui是一个常用的前端框架，它提供了丰富的组件和便捷的API，帮助开发者快速构建高性能的移动Web应用。本示例“mui制作的一级联动选择demo”旨在展示如何利用Mui中的Picker组件实现简单的一级联动...
C++小游戏之数字华容道
06-26
1234移动键
八数码问题（数字华容道，九宫格）深度搜索（DFS）广度搜索（BFS）和A*算法C++源码
03-27
本C++代码解决了八数码问题，采用深度优先，广度优先和A*算法实现，基于visual studio 2017
数字华容道游戏源码（C#）
10-17
完善的数字华容道游戏，这是中国古代的智慧，案例使用C#的winform结构来构建。
游戏 华容道 源代码
11-18
用c++实现的华容道的源代码，为一个工程文件，可在VS上运行
用C++实现的华容道游戏
08-01
用C++实现的华容道游戏，直接编译直接运行，如果有bug请及时跟我说明哦！谢谢啦 (^_^)
华容道游戏VB版源码
10-25
华容道游戏VB版源码，程序执行效率很高，非常好用！！！
完整数字华容道04：游戏主体逻辑
C与Python实战
06-27 1332
在做页面切换的时候遇到了问题：MainForm 为 QWidget ，设置一个 Layout 简单，给它切换 Layout 后第一个 Layout并没有消失，导致两个 Layout 重叠。
C++源码，遍历法解华容道问题
11-06
二叉树遍历法解决类似华容道的迷宫问题，同时解决了内存占用量发散的问题。
华容道源代码
02-23
华容道源代码
使用mui生成一个首页
最新发布
07-09
下面是一个使用MUI生成一个简单首页的示例代码： ```html <!DOCTYPE html> 首页 <link rel="stylesheet" href="path/to/mui.min.css"> <script src="path/to/mui.min.js"> <header class="mui-bar mui-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值