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