html 三阶魔方最少记忆法 自动还原 纯原生js实现
效果图:
直接上代码:
3dcube.html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>3 step</title>
<meta charset="UTF-8">
<style>
b{width:25px;height:25px;text-align:center;line-height:25px;display:inline-block;}
#s3view b{margin:0 1px 1px 0;}
.left{float:left;border:1px solid #000;}
.cubes{position:relative;z-index:0;left:-70px;top:110px;transform-style: preserve-3d;transform: rotateX(-30deg) rotateY(-30deg);}
.cube {position:absolute;width: 200px;height: 200px;transform-style: preserve-3d;animation-iteration-count:1;animation-fill-mode:forwards;}
.cube span {box-sizing:border-box;border:5px solid #000;border-radius:10px;display: block;width: 100px;height: 100px;position: absolute;top: 50px;left: 50px;font-size:30px;text-align:center;line-height:100px;cursor:default;}
.cube .in_front {background:green;transform: rotateY(0deg) translateZ(50px);color:#fff;}
.cube .in_back {background:yellow;transform: translateZ(-50px) rotateY(180deg);}
.cube .in_left {background:cyan;transform: rotateY(-90deg) translateZ(50px);}
.cube .in_right {background:#fcf;transform: rotateY(90deg) translateZ(50px);}
.cube .in_top {background:purple;translateY(50px);transform: rotateX(90deg) translateZ(50px);color:#fff;}
.cube .in_bottom {background:red;transform: rotateX(-90deg) translateZ(50px);color:#fff}
/*动画*/
/*z轴旋转操作*/
@keyframes rotatez00{from{transform:rotateZ(0deg)}to{transform:rotateZ(90deg)}}
@keyframes rotatez01{from{transform:rotateZ(90deg)}to{transform:rotateZ(180deg)}}
@keyframes rotatez02{from{transform:rotateZ(180deg)}to{transform:rotateZ(270deg)}}
@keyframes rotatez03{from{transform:rotateZ(270deg)}to{transform:rotateZ(360deg)}}
@keyframes rotatez10{from{transform:rotateZ(0deg) translateZ(-100px)}to{transform:rotateZ(90deg) translateZ(-100px)}}
@keyframes rotatez11{from{transform:rotateZ(90deg) translateZ(-100px)}to{transform:rotateZ(180deg) translateZ(-100px)}}
@keyframes rotatez12{from{transform:rotateZ(180deg) translateZ(-100px)}to{transform:rotateZ(270deg) translateZ(-100px)}}
@keyframes rotatez13{from{transform:rotateZ(270deg) translateZ(-100px)}to{transform:rotateZ(360deg) translateZ(-100px)}}
@keyframes rotatez20{from{transform:rotateZ(0deg) translateZ(-200px)}to{transform:rotateZ(90deg) translateZ(-200px)}}
@keyframes rotatez21{from{transform:rotateZ(90deg) translateZ(-200px)}to{transform:rotateZ(180deg) translateZ(-200px)}}
@keyframes rotatez22{from{transform:rotateZ(180deg) translateZ(-200px)}to{transform:rotateZ(270deg) translateZ(-200px)}}
@keyframes rotatez23{from{transform:rotateZ(270deg) translateZ(-200px)}to{transform:rotateZ(360deg) translateZ(-200px)}}
/*y轴旋转操作*/
@keyframes rotatey000{from{transform:rotateY(0deg)}to{transform:rotateY(90deg)}}
@keyframes rotatey001{from{transform:rotateY(0deg) translateZ(-100px)}to{transform:rotateY(90deg) translateZ(-100px)}}
@keyframes rotatey002{from{transform:rotateY(0deg) translateZ(-200px)}to{transform:rotateY(90deg) translateZ(-200px)}}
@keyframes rotatey010{from{transform:rotateY(90deg)}to{transform:rotateY(180deg)}}
@keyframes rotatey011{from{transform:rotateY(90deg) translateZ(-100px)}to{transform:rotateY(180deg) translateZ(-100px)}}
@keyframes rotatey012{from{transform:rotateY(90deg) translateZ(-200px)}to{transform:rotateY(180deg) translateZ(-200px)}}
@keyframes rotatey020{from{transform:rotateY(180deg)}to{transform:rotateY(270deg)}}
@keyframes rotatey021{from{transform:rotateY(180deg) translateZ(-100px)}to{transform:rotateY(270deg) translateZ(-100px)}}
@keyframes rotatey022{from{transform:rotateY(180deg) translateZ(-200px)}to{transform:rotateY(270deg) translateZ(-200px)}}
@keyframes rotatey030{from{transform:rotateY(270deg)}to{transform:rotateY(360deg)}}
@keyframes rotatey031{from{transform:rotateY(270deg) translateZ(-100px)}to{transform:rotateY(360deg) translateZ(-100px)}}
@keyframes rotatey032{from{transform:rotateY(270deg) translateZ(-200px)}to{transform:rotateY(360deg) translateZ(-200px)}}
@keyframes rotatey100{from{transform:rotateY(0deg)}to{transform:rotateY(90deg)}}
@keyframes rotatey101{from{transform:rotateY(0deg) translateZ(-100px)}to{transform:rotateY(90deg) translateZ(-100px)}}
@keyframes rotatey102{from{transform:rotateY(0deg) translateZ(-200px)}to{transform:rotateY(90deg) translateZ(-200px)}}
@keyframes rotatey110{from{transform:rotateY(90deg)}to{transform:rotateY(180deg)}}
@keyframes rotatey111{from{transform:rotateY(90deg) translateZ(-100px)}to{transform:rotateY(180deg) translateZ(-100px)}}
@keyframes rotatey112{from{transform:rotateY(90deg) translateZ(-200px)}to{transform:rotateY(180deg) translateZ(-200px)}}
@keyframes rotatey120{from{transform:rotateY(180deg)}to{transform:rotateY(270deg)}}
@keyframes rotatey121{from{transform:rotateY(180deg) translateZ(-100px)}to{transform:rotateY(270deg) translateZ(-100px)}}
@keyframes rotatey122{from{transform:rotateY(180deg) translateZ(-200px)}to{transform:rotateY(270deg) translateZ(-200px)}}
@keyframes rotatey130{from{transform:rotateY(270deg)}to{transform:rotateY(360deg)}}
@keyframes rotatey131{from{transform:rotateY(270deg) translateZ(-100px)}to{transform:rotateY(360deg) translateZ(-100px)}}
@keyframes rotatey132{from{transform:rotateY(270deg) translateZ(-200px)}to{transform:rotateY(360deg) translateZ(-200px)}}
@keyframes rotatey200{from{transform:rotateY(0deg)}to{transform:rotateY(90deg)}}
@keyframes rotatey201{from{transform:rotateY(0deg) translateZ(-100px)}to{transform:rotateY(90deg) translateZ(-100px)}}
@keyframes rotatey202{from{transform:rotateY(0deg) translateZ(-200px)}to{transform:rotateY(90deg) translateZ(-200px)}}
@keyframes rotatey210{from{transform:rotateY(90deg)}to{transform:rotateY(180deg)}}
@keyframes rotatey211{from{transform:rotateY(90deg) translateZ(-100px)}to{transform:rotateY(180deg) translateZ(-100px)}}
@keyframes rotatey212{from{transform:rotateY(90deg) translateZ(-200px)}to{transform:rotateY(180deg) translateZ(-200px)}}
@keyframes rotatey220{from{transform:rotateY(180deg)}to{transform:rotateY(270deg)}}
@keyframes rotatey221{from{transform:rotateY(180deg) translateZ(-100px)}to{transform:rotateY(270deg) translateZ(-100px)}}
@keyframes rotatey222{from{transform:rotateY(180deg) translateZ(-200px)}to{transform:rotateY(270deg) translateZ(-200px)}}
@keyframes rotatey230{from{transform:rotateY(270deg)}to{transform:rotateY(360deg)}}
@keyframes rotatey231{from{transform:rotateY(270deg) translateZ(-100px)}to{transform:rotateY(360deg) translateZ(-100px)}}
@keyframes rotatey232{from{transform:rotateY(270deg) translateZ(-200px)}to{transform:rotateY(360deg) translateZ(-200px)}}
/*x轴旋转操作*/
@keyframes rotatex000{from{transform:rotateX(360deg)}to{transform:rotateX(270deg)}}
@keyframes rotatex001{from{transform:rotateX(360deg) translateZ(-100px)}to{transform:rotateX(270deg) translateZ(-100px)}}
@keyframes rotatex002{from{transform:rotateX(360deg) translateZ(-200px)}to{transform:rotateX(270deg) translateZ(-200px)}}
@keyframes rotatex010{from{transform:rotateX(270deg)}to{transform:rotateX(180deg)}}
@keyframes rotatex011{from{transform:rotateX(270deg) translateZ(-100px)}to{transform:rotateX(180deg) translateZ(-100px)}}
@keyframes rotatex012{from{transform:rotateX(270deg) translateZ(-200px)}to{transform:rotateX(180deg) translateZ(-200px)}}
@keyframes rotatex020{from{transform:rotateX(180deg)}to{transform:rotateX(90deg)}}
@keyframes rotatex021{from{transform:rotateX(180deg) translateZ(-100px)}to{transform:rotateX(90deg) translateZ(-100px)}}
@keyframes rotatex022{from{transform:rotateX(180deg) translateZ(-200px)}to{transform:rotateX(90deg) translateZ(-200px)}}
@keyframes rotatex030{from{transform:rotateX(90deg)}to{transform:rotateX(0deg)}}
@keyframes rotatex031{from{transform:rotateX(90deg) translateZ(-100px)}to{transform:rotateX(0deg) translateZ(-100px)}}
@keyframes rotatex032{from{transform:rotateX(90deg) translateZ(-200px)}to{transform:rotateX(0deg) translateZ(-200px)}}
@keyframes rotatex100{from{transform:rotateX(360deg)}to{transform:rotateX(270deg)}}
@keyframes rotatex101{from{transform:rotateX(360deg) translateZ(-100px)}to{transform:rotateX(270deg) translateZ(-100px)}}
@keyframes rotatex102{from{transform:rotateX(360deg) translateZ(-200px)}to{transform:rotateX(270deg) translateZ(-200px)}}
@keyframes rotatex110{from{transform:rotateX(270deg)}to{transform:rotateX(180deg)}}
@keyframes rotatex111{from{transform:rotateX(270deg) translateZ(-100px)}to{transform:rotateX(180deg) translateZ(-100px)}}
@keyframes rotatex112{from{transform:rotateX(270deg) translateZ(-200px)}to{transform:rotateX(180deg) translateZ(-200px)}}
@keyframes rotatex120{from{transform:rotateX(180deg)}to{transform:rotateX(90deg)}}
@keyframes rotatex121{from{transform:rotateX(180deg) translateZ(-100px)}to{transform:rotateX(90deg) translateZ(-100px)}}
@keyframes rotatex122{from{transform:rotateX(180deg) translateZ(-200px)}to{transform:rotateX(90deg) translateZ(-200px)}}
@keyframes rotatex130{from{transform:rotateX(90deg)}to{transform:rotateX(0deg)}}
@keyframes rotatex131{from{transform:rotateX(90deg) translateZ(-100px)}to{transform:rotateX(0deg) translateZ(-100px)}}
@keyframes rotatex132{from{transform:rotateX(90deg) translateZ(-200px)}to{transform:rotateX(0deg) translateZ(-200px)}}
@keyframes rotatex200{from{transform:rotateX(360deg)}to{transform:rotateX(270deg)}}
@keyframes rotatex201{from{transform:rotateX(360deg) translateZ(-100px)}to{transform:rotateX(270deg) translateZ(-100px)}}
@keyframes rotatex202{from{transform:rotateX(360deg) translateZ(-200px)}to{transform:rotateX(270deg) translateZ(-200px)}}
@keyframes rotatex210{from{transform:rotateX(270deg)}to{transform:rotateX(180deg)}}
@keyframes rotatex211{from{transform:rotateX(270deg) translateZ(-100px)}to{transform:rotateX(180deg) translateZ(-100px)}}
@keyframes rotatex212{from{transform:rotateX(270deg) translateZ(-200px)}to{transform:rotateX(180deg) translateZ(-200px)}}
@keyframes rotatex220{from{transform:rotateX(180deg)}to{transform:rotateX(90deg)}}
@keyframes rotatex221{from{transform:rotateX(180deg) translateZ(-100px)}to{transform:rotateX(90deg) translateZ(-100px)}}
@keyframes rotatex222{from{transform:rotateX(180deg) translateZ(-200px)}to{transform:rotateX(90deg) translateZ(-200px)}}
@keyframes rotatex230{from{transform:rotateX(90deg)}to{transform:rotateX(0deg)}}
@keyframes rotatex231{from{transform:rotateX(90deg) translateZ(-100px)}to{transform:rotateX(0deg) translateZ(-100px)}}
@keyframes rotatex232{from{transform:rotateX(90deg) translateZ(-200px)}to{transform:rotateX(0deg) translateZ(-200px)}}
</style>
<head>
<body>
<br>四位数：第一位：颜色（面）；第二位：位置；第三位：数字；第四位：方向
<br>颜色代码：
<br>1：红色（底面）2：绿色（前面）3：白色（右面）
<br>4：黄色（背面）5：青色（左面）6：紫色（上面）
<br>位置：1 ~ 9 每个面的块位置
<br>块值：1 ~ 9, A ~ Z
<br>方向：1:→, 2:↓, 3:←, 4:↑<br><br>
<button onclick="$('byall').style.display='block';$('byone').style.display='none';">文本输入</button><button onclick="$('byall').style.display='none';$('byone').style.display='block';">手动输入</button>
<button onclick="init();">最终结果</button><button onclick="autoS3data()">打乱魔方</button><button onclick="runall();viewbyall();">自动执行</button><br>
<button onclick="FTR();viewbyall();">FTR </button><button onclick="FMR();viewbyall();">FMR </button><button onclick="FBR();viewbyall();">FBR </button>
<button onclick="FLB();viewbyall();">FLB </button><button onclick="FMB();viewbyall();">FMB </button><button onclick="FRB();viewbyall();">FRB </button>
<button onclick="RLB();viewbyall();">RLB </button><button onclick="RMB();viewbyall();">RMB </button><button onclick="RRB();viewbyall();">RRB </button>
<br>
<button onclick="FTRo();viewbyall();">FTR'</button><button onclick="FMRo();viewbyall();">FMR'</button><button onclick="FBRo();viewbyall();">FBR'</button>
<button onclick="FLBo();viewbyall();">FLB'</button><button onclick="FMBo();viewbyall();">FMB'</button><button onclick="FRBo();viewbyall();">FRB'</button>
<button onclick="RLBo();viewbyall();">RLB'</button><button onclick="RMBo();viewbyall();">RMB'</button><button onclick="RRBo();viewbyall();">RRB'</button>
<br>
<div style="display:none;" id=byall>
<textarea id="fall" name="fall" cols=50 rows=10 onchange="getTAdata()"></textarea>
</div>
<div style="display:none" id=byone>
<div style="clear:both">
<div class="left">
第一面(底面):<br>
<input size=4 type=text name=f11 id=f11 onChange="view(this.value,this.id)"><b id=f11b></b>
<input size=4 type=text name=f12 id=f12 onchange="view(this.value,this.id)"><b id=f12b></b>
<input size=4 type=text name=f13 id=f13 onchange="view(this.value,this.id)"><b id=f13b></b><br>
<input size=4 type=text name=f14 id=f14 onchange="view(this.value,this.id)"><b id=f14b></b>
<input size=4 type=text name=f15 id=f15 onchange="view(this.value,this.id)"><b id=f15b></b>
<input size=4 type=text name=f16 id=f16 onchange="view(this.value,this.id)"><b id=f16b></b><br>
<input size=4 type=text name=f17 id=f17 onchange="view(this.value,this.id)"><b id=f17b></b>
<input size=4 type=text name=f18 id=f18 onchange="view(this.value,this.id)"><b id=f18b></b>
<input size=4 type=text name=f19 id=f19 onchange="view(this.value,this.id)"><b id=f19b></b><br>
</div>
<div class="left">
第二面(前面):<br>
<input size=4 type=text name=f21 id=f21 onchange="view(this.value,this.id)"><b id=f21b></b>
<input size=4 type=text name=f22 id=f22 onchange="view(this.value,this.id)"><b id=f22b></b>
<input size=4 type=text name=f23 id=f23 onchange="view(this.value,this.id)"><b id=f23b></b><br>
<input size=4 type=text name=f24 id=f24 onchange="view(this.value,this.id)"><b id=f24b></b>
<input size=4 type=text name=f25 id=f25 onchange="view(this.value,this.id)"><b id=f25b></b>
<input size=4 type=text name=f26 id=f26 onchange="view(this.value,this.id)"><b id=f26b></b><br>
<input size=4 type=text name=f27 id=f27 onchange="view(this.value,this.id)"><b id=f27b></b>
<input size=4 type=text name=f28 id=f28 onchange="view(this.value,this.id)"><b id=f28b></b>
<input size=4 type=text name=f29 id=f29 onchange="view(this.value,this.id)"><b id=f29b></b><br>
</div>
<div class="left">
第三面(右面):<br>
<input size=4 type=text name=f31 id=f31 onchange="view(this.value,this.id)"><b id=f31b></b>
<input size=4 type=text name=f32 id=f32 onchange="view(this.value,this.id)"><b id=f32b></b>
<input size=4 type=text name=f33 id=f33 onchange="view(this.value,this.id)"><b id=f33b></b><br>
<input size=4 type=text name=f34 id=f34 onchange="view(this.value,this.id)"><b id=f34b></b>
<input size=4 type=text name=f35 id=f35 onchange="view(this.value,this.id)"><b id=f35b></b>
<input size=4 type=text name=f36 id=f36 onchange="view(this.value,this.id)"><b id=f36b></b><br>
<input size=4 type=text name=f37 id=f37 onchange="view(this.value,this.id)"><b id=f37b></b>
<input size=4 type=text name=f38 id=f38 onchange="view(this.value,this.id)"><b id=f38b></b>
<input size=4 type=text name=f39 id=f39 onchange="view(this.value,this.id)"><b id=f39b></b><br>
</div>
</div>
<div style="clear:both">
<div class="left">
第四面(背面):<br>
<input size=4 type=text name=f41 id=f41 onChange="view(this.value,this.id)"><b id=f41b></b>
<input size=4 type=text name=f42 id=f42 onchange="view(this.value,this.id)"><b id=f42b></b>
<input size=4 type=text name=f43 id=f43 onchange="view(this.value,this.id)"><b id=f43b></b><br>
<input size=4 type=text name=f44 id=f44 onchange="view(this.value,this.id)"><b id=f44b></b>
<input size=4 type=text name=f45 id=f45 onchange="view(this.value,this.id)"><b id=f45b></b>
<input size=4 type=text name=f46 id=f46 onchange="view(this.value,this.id)"><b id=f46b></b><br>
<input size=4 type=text name=f47 id=f47 onchange="view(this.value,this.id)"><b id=f47b></b>
<input size=4 type=text name=f48 id=f48 onchange="view(this.value,this.id)"><b id=f48b></b>
<input size=4 type=text name=f49 id=f49 onchange="view(this.value,this.id)"><b id=f49b></b><br>
</div>
<div class="left">
第五面(左面):<br>
<input size=4 type=text name=f51 id=f51 onchange="view(this.value,this.id)"><b id=f51b></b>
<input size=4 type=text name=f52 id=f52 onchange="view(this.value,this.id)"><b id=f52b></b>
<input size=4 type=text name=f53 id=f53 onchange="view(this.value,this.id)"><b id=f53b></b><br>
<input size=4 type=text name=f54 id=f54 onchange="view(this.value,this.id)"><b id=f54b></b>
<input size=4 type=text name=f55 id=f55 onchange="view(this.value,this.id)"><b id=f55b></b>
<input size=4 type=text name=f56 id=f56 onchange="view(this.value,this.id)"><b id=f56b></b><br>
<input size=4 type=text name=f57 id=f57 onchange="view(this.value,this.id)"><b id=f57b></b>
<input size=4 type=text name=f58 id=f58 onchange="view(this.value,this.id)"><b id=f58b></b>
<input size=4 type=text name=f59 id=f59 onchange="view(this.value,this.id)"><b id=f59b></b><br>
</div>
<div class="left">
第六面(上面):<br>
<input size=4 type=text name=f61 id=f61 onchange="view(this.value,this.id)"><b id=f61b></b>
<input size=4 type=text name=f62 id=f62 onchange="view(this.value,this.id)"><b id=f62b></b>
<input size=4 type=text name=f63 id=f63 onchange="view(this.value,this.id)"><b id=f63b></b><br>
<input size=4 type=text name=f64 id=f64 onchange="view(this.value,this.id)"><b id=f64b></b>
<input size=4 type=text name=f65 id=f65 onchange="view(this.value,this.id)"><b id=f65b></b>
<input size=4 type=text name=f66 id=f66 onchange="view(this.value,this.id)"><b id=f66b></b><br>
<input size=4 type=text name=f67 id=f67 onchange="view(this.value,this.id)"><b id=f67b></b>
<input size=4 type=text name=f68 id=f68 onchange="view(this.value,this.id)"><b id=f68b></b>
<input size=4 type=text name=f69 id=f69 onchange="view(this.value,this.id)"><b id=f69b></b><br>
</div>
</div>
</div><br clear=all>
<div id="rlt" style="width:500px;max-height:500px;overflow:auto;"></div>
<div id=s3view style="border:1px solid red;height:260px;width:340px;background:#ccc;position:absolute;right:0;top:50px;">
<button onclick="clearall()">清空</button><button onclick="fortest();viewbyall();">恢复数据</button><button onclick="showstep();">显示当前魔方数据</button><span id="runtime"></span><br>
<b style="width:85px;height:25px;"> </b><b id=f61v></b><b id=f62v></b><b id=f63v></b><br>
<b style="width:85px;height:25px;"> </b><b id=f64v></b><b id=f65v></b><b id=f66v></b><br>
<b style="width:85px;height:25px;"> </b><b id=f67v></b><b id=f68v></b><b id=f69v></b><br>
<div style="height:2px;font-size:2px;line-height:2px;"></div>
<b id=f51v></b><b id=f52v></b><b id=f53v></b> <b id=f21v></b><b id=f22v></b><b id=f23v></b> <b id=f31v></b><b id=f32v></b><b id=f33v></b> <b id=f41v></b><b id=f42v></b><b id=f43v></b><br>
<b id=f54v></b><b id=f55v></b><b id=f56v></b> <b id=f24v></b><b id=f25v></b><b id=f26v></b> <b id=f34v></b><b id=f35v></b><b id=f36v></b> <b id=f44v></b><b id=f45v></b><b id=f46v></b><br>
<b id=f57v></b><b id=f58v></b><b id=f59v></b> <b id=f27v></b><b id=f28v></b><b id=f29v></b> <b id=f37v></b><b id=f38v></b><b id=f39v></b> <b id=f47v></b><b id=f48v></b><b id=f49v></b><br>
<div style="height:2px;font-size:2px;line-height:2px;"></div>
<b style="width:85px;height:25px;"> </b><b id=f11v></b><b id=f12v></b><b id=f13v></b><br>
<b style="width:85px;height:25px;"> </b><b id=f14v></b><b id=f15v></b><b id=f16v></b><br>
<b style="width:85px;height:25px;"> </b><b id=f17v></b><b id=f18v></b><b id=f19v></b><br>
</div>
<div style="border:1px solid red;height:340px;width:340px;background:#ccc;position:absolute;right:0;top:330px;">
<div style="transform:scale(0.7);"><div class="cubes" id="cubes"></div></div>
</div>
<script type="text/javascript" src="data.js"></script>
<script type="text/javascript" src="turn.js"></script>
<script type="text/javascript" src="run.js"></script>
<script type="text/javascript" src="3dcube.js"></script>
</body>
</html>
data.js
function $(id){return(document.getElementById(id));}
var s3=new Array(54);
var s3old = null; //缓存用
for(var i=0;i<54;i++){s3[i]="";}
var col=new Array("red","green","#fff","#ff0","#0ff","purple");
var der=new Array("→","↓","←","↑");
init();
function view(da,id){
if(da!=""){
var clrt=parseInt(da.charAt(0));
//alert(col[clrt-1]);
var fn=parseInt(da.charAt(1));
$(id+"b").style.background=col[clrt-1];
$(id+"b").innerHTML=da.charAt(2)+"<font size=1>"+der[parseInt(da.charAt(3))-1]+"</font>";
$(id+"v").style.background=col[clrt-1];
$(id+"v").innerHTML=da.charAt(2)+"<font size=1>"+der[parseInt(da.charAt(3))-1]+"</font>";
s3[(parseInt(id.charAt(1))-1)*9+parseInt(id.charAt(2))-1]=da;
//alert((parseInt(id.charAt(1))-1)*9+parseInt(id.charAt(2))-1);
}else{
$(id+"b").style.background="";
$(id+"b").innerHTML="";
$(id+"v").style.background="";
$(id+"v").innerHTML="";
s3[(clrt-1)*9+fn-1]="";
}
}
function init(){
var da_done="11A1,12B1,13C1,14D1,15E1,16F1,17G1,18H1,19I1,2193,2283,2373,2463,2553,2643,2733,2823,2913,3193,3283,3373,3463,3553,3643,3733,3823,3913,4193,4283,4373,4463,4553,4643,4733,4823,4913,51X2,52V2,53S2,54Y2,55*2,56T2,57Z2,58W2,59U2,67R3,64Q3,61P3,68O3,65N3,62M3,69L3,66K3,63J3";
s3=da_done.split(",");
viewbyall();
}
function viewbyall(){
var j,k;
for(var i=0;i<54;i++){
j=Math.floor(i/9)+1;k=i%9+1;
if(s3[i]!=""){//alert("f"+j+k+"v");
$("f"+j+k+"v").style.background=col[parseInt(s3[i].charAt(0))-1];
$("f"+j+k+"v").innerHTML=s3[i].charAt(2)+"<font size=1>"+der[parseInt(s3[i].charAt(3))-1]+"</font>";
}else{
$("f"+j+k+"v").style.background="";
$("f"+j+k+"v").innerHTML="";
}
}
}
function clearall(){
for(var i=0;i<54;i++){
s3[i]="";
id='f'+((parseInt(i/9)+1)*10+i%9+1);
$(id).value='';
$(id+'b').innerHTML='';
$(id+"b").style.background='';
}
$('fall').value = '';
viewbyall();
}
String.prototype.replaceAll=function(s1,s2){return this.replace(new RegExp(s1,"gm"),s2);}
function getTAdata(){
var da=document.getElementById("fall").innerText;
da=da.replaceAll("\r\n\r\n",",");
da=da.replaceAll("\r\n",",");
var data=da1.split(",");
for(var i=0;i<data.length;i++){
s3[i]=data[i];
}
viewbyall();
}
function fortest(){
/*var da="59U4,58W4,63J2,54Y2,4551,2643,13C3,4281,53S1,4934,56T1,57Z4,18H2,15E1,4461,11A4,14D4,3191,4911,52V2,3373,3641,3552,2822,2371,3462,69L2,4193,38X1,57X3,12B4,65N4,2284,2192,64Q1,2913,63R3,3283,19I4,66K4,55*4,4822,3733,4644,2732,4172,16F4,61P3,62M1,2552,68O1,3714,2462,17G4";
var data=da.split(",");
for(var i=0;i<data.length;i++){
s3[i]=data[i];
}*/
for(var i=0;i<s3old.length;i++){
s3[i]=s3old[i];
}
s3old = null;
}
function showstep(){
var str = '';
for(var i=0;i<54;i++){
y = i % 9 + 1;
x = parseInt(i / 9) + 1;
id = 'f' + (x * 10 + y);
$(id).value = s3[i];
view(s3[i], id);
str += s3[i] + ",";
}
$('fall').value = str;
$('byall').style.display = 'block';
$('byone').style.display = 'block';
}
function autoS3data(){
if(s3[0] == "") return;
var allturn="";
var orders=new Array("FTR();","FTRo();","FMR();","FMRo();","FBR();","FBRo();","FLB();","FLBo();","FMB();","FMBo();","FRB();","FRBo();","RLB();","RLBo();","RMB();","RMBo();","RRB();","RRBo();","allFR();","allFRo();","allFB();","allFBo();","allRB();","allRBo();");
var times = Math.floor(Math.random() * 50 + 50);
$("runtime").innerHTML=times+"次";
for(var i=0;i<times;i++){
allturn+=orders[Math.floor(Math.random() * 23)];
}
eval(allturn);
viewbyall();
s3old = new Array(s3.length);
for(i=0; i<s3.length; i++) s3old[i] = s3[i];
}
turn.js
var side=new Array(12);
var face=new Array(9);
var logflag = 1;
var br = true;
var stepNum = 1;
function log(msg){
if(br && msg) msg = '第'+ (stepNum++) +'步: ' + msg;
if(logflag) $('rlt').innerHTML += msg + (br ? '<br>' : '');
}
function clearArray(){
for(var i=0;i<12;i++){side[i]="";}
for(var j=0;j<9;j++){face[j]="";}
}
function chgp(){
for(var i=0;i<54;i++){
s3[i]=s3[i].charAt(0)+(i%9+1)+s3[i].charAt(2)+s3[i].charAt(3);
}
}
//旋转操作
function FTRo(){log('FTRo->');br=false;FTR();FTR();FTR();br=true;log('');}
function FTR(){//前面顶层向右转90度
log('FTR,');
ftr3d();
clearArray();
var i=0,j=0;
for(i=0;i<12;i++){//savedata
j=(Math.floor(i/3)+1)*9+i%3;
side[i]=s3[j];
}
for(i=0;i<12;i++){
j=((Math.floor(i/3)+1)%4+1)*9+i%3;
s3[j]=side[i];
}
for(i=0;i<9;i++){face[i]=s3[45+i];}
{//方阵顶面逆转90度:a[i][j]与a[n-i][j]互换后a[i][j]与a[j][i]互换
s3[45+0]=face[2];s3[45+1]=face[5];s3[45+2]=face[8];
s3[45+3]=face[1];s3[45+4]=face[4];s3[45+5]=face[7];
s3[45+6]=face[0];s3[45+7]=face[3];s3[45+8]=face[6];
for(i=0;i<9;i++){//数值方向也改
j=parseInt(s3[45+i].charAt(3));
var k=(j-1-1+4)%4+1;
s3[45+i]=s3[45+i].charAt(0)+s3[45+i].charAt(1)+s3[45+i].charAt(2)+k;
}
}
//chgp();
}
function FMRo(){log('FMRo->');br=false;FMR();FMR();FMR();br=true;log('');}
function FMR(){//前面中间层向右转90度
log('FMR,');
fmr3d();
clearArray();
var i=0,j=0;
for(i=0;i<12;i++){//savedata
j=(Math.floor(i/3)+1)*9+i%3+3;
side[i]=s3[j];
}
for(i=0;i<12;i++){
j=((Math.floor(i/3)+1)%4+1)*9+i%3+3;
s3[j]=side[i];
}
//chgp();
}
function FBRo(){log('FBRo->');br=false;FBR();FBR();FBR();br=true;log('');}
function FBR(){//前面底层向右转90度
log('FBR,');
fbr3d();
clearArray();
var i=0,j=0;
for(i=0;i<12;i++){//savedata
j=(Math.floor(i/3)+1)*9+i%3+6;
side[i]=s3[j];
}
for(i=0;i<12;i++){
j=((Math.floor(i/3)+1)%4+1)*9+i%3+6;
s3[j]=side[i];
}
for(i=0;i<9;i++){face[i]=s3[i];}
{//方阵底面顺转90度:a[i][j]与a[j][i]互换后a[i][j]与a[n-i][j]互换
s3[0]=face[6];s3[1]=face[3];s3[2]=face[0];
s3[3]=face[7];s3[4]=face[4];s3[5]=face[1];
s3[6]=face[8];s3[7]=face[5];s3[8]=face[2];
for(i=0;i<9;i++){//数值方向也改
j=parseInt(s3[i].charAt(3));
var k=(j-1+1+4)%4+1;
s3[i]=s3[i].charAt(0)+s3[i].charAt(1)+s3[i].charAt(2)+k;
}
}
//chgp();
}
function FLBo(){log('FLBo->');br=false;FLB();FLB();FLB();br=true;log('');}
function FLB(){//前面左层向下转90度
log('FLB,');
fld3d();
clearArray();
var i=0,j=0;
{
side[0]=s3[0];side[1]=s3[3];side[2]=s3[6];
side[3]=s3[9];side[4]=s3[12];side[5]=s3[15];
side[6]=s3[45];side[7]=s3[48];side[8]=s3[51];
side[9]=s3[29];side[10]=s3[32];side[11]=s3[35];
}
for(i=9;i<15;i++){
j=parseInt(side[i%12].charAt(3));
var k=(j-1+2+4)%4+1;
side[i%12]=side[i%12].charAt(0)+side[i%12].charAt(1)+side[i%12].charAt(2)+k;
}
{
s3[0]=side[3];s3[3]=side[4];s3[6]=side[5];
s3[9]=side[6];s3[12]=side[7];s3[15]=side[8];
s3[45]=side[11];s3[48]=side[10];s3[51]=side[9];
s3[29]=side[2];s3[32]=side[1];s3[35]=side[0];
}
for(i=0;i<9;i++){face[i]=s3[36+i];}
{//方阵左面顺转90度
s3[36+0]=face[6];s3[36+1]=face[3];s3[36+2]=face[0];
s3[36+3]=face[7];s3[36+4]=face[4];s3[36+5]=face[1];
s3[36+6]=face[8];s3[36+7]=face[5];s3[36+8]=face[2];
for(i=0;i<9;i++){//数值方向也改
j=parseInt(s3[36+i].charAt(3));
var k=(j-1+1+4)%4+1;
s3[36+i]=s3[36+i].charAt(0)+s3[36+i].charAt(1)+s3[36+i].charAt(2)+k;
}
}
//chp();
}
function FMBo(){log('FMBo->');br=false;FMB();FMB();FMB();br=true;log('');}
function FMB(){//前面中间层向下转90度
log('FMB,');
fmd3d();
clearArray();
var i=0,j=0;
{
side[0]=s3[1+0];side[1]=s3[1+3];side[2]=s3[1+6];
side[3]=s3[1+9];side[4]=s3[1+12];side[5]=s3[1+15];
side[6]=s3[1+45];side[7]=s3[1+48];side[8]=s3[1+51];
side[9]=s3[1+27];side[10]=s3[1+30];side[11]=s3[1+33];
}
for(i=9;i<15;i++){
j=parseInt(side[i%12].charAt(3));
var k=(j-1+2+4)%4+1;
side[i%12]=side[i%12].charAt(0)+side[i%12].charAt(1)+side[i%12].charAt(2)+k;
}
{
s3[1+0]=side[3];s3[1+3]=side[4];s3[1+6]=side[5];
s3[1+9]=side[6];s3[1+12]=side[7];s3[1+15]=side[8];
s3[1+45]=side[11];s3[1+48]=side[10];s3[1+51]=side[9];
s3[1+27]=side[2];s3[1+30]=side[1];s3[1+33]=side[0];
}
//chgp();
}
function FRBo(){log('FRBo->');br=false;FRB();FRB();FRB();br=true;log('');}
function FRB(){//前面右层向下转90度
log('FRB,');
frd3d();
clearArray();
var i=0,j=0;
{
side[0]=s3[2+0];side[1]=s3[2+3];side[2]=s3[2+6];
side[3]=s3[2+9];side[4]=s3[2+12];side[5]=s3[2+15];
side[6]=s3[2+45];side[7]=s3[2+48];side[8]=s3[2+51];
side[9]=s3[27];side[10]=s3[30];side[11]=s3[33];
}
for(i=9;i<15;i++){
j=parseInt(side[i%12].charAt(3));
var k=(j-1+2+4)%4+1;
side[i%12]=side[i%12].charAt(0)+side[i%12].charAt(1)+side[i%12].charAt(2)+k;
}
{
s3[2+0]=side[3];s3[2+3]=side[4];s3[2+6]=side[5];
s3[2+9]=side[6];s3[2+12]=side[7];s3[2+15]=side[8];
s3[2+45]=side[11];s3[2+48]=side[10];s3[2+51]=side[9];
s3[27]=side[2];s3[30]=side[1];s3[33]=side[0];
}
for(i=0;i<9;i++){face[i]=s3[18+i];}
{//方阵右面逆转90度
s3[18+0]=face[2];s3[18+1]=face[5];s3[18+2]=face[8];
s3[18+3]=face[1];s3[18+4]=face[4];s3[18+5]=face[7];
s3[18+6]=face[0];s3[18+7]=face[3];s3[18+8]=face[6];
for(i=0;i<9;i++){//数值方向也改
j=parseInt(s3[18+i].charAt(3));
var k=(j-1-1+4)%4+1;
s3[18+i]=s3[18+i].charAt(0)+s3[18+i].charAt(1)+s3[18+i].charAt(2)+k;
}
}
//chgp();
}
function RLBo(){log('RLBo->');br=false;RLB();RLB();RLB();br=true;log('');}
function RLB(){//右面左层向下转90度
log('RLB,');
rld3d();
clearArray();
var i=0,j=0;
{
side[0]=s3[0];side[1]=s3[1];side[2]=s3[2];
side[3]=s3[18];side[4]=s3[21];side[5]=s3[24];
side[6]=s3[51];side[7]=s3[52];side[8]=s3[53];
side[9]=s3[38];side[10]=s3[41];side[11]=s3[44];
}
for(i=0;i<12;i++){//数值方向也改
j=parseInt(side[i].charAt(3));
var k=(j-1+1+4)%4+1;
side[i]=side[i].charAt(0)+side[i].charAt(1)+side[i].charAt(2)+k;
}
{
s3[0]=side[5];s3[1]=side[4];s3[2]=side[3];
s3[18]=side[6];s3[21]=side[7];s3[24]=side[8];
s3[51]=side[11];s3[52]=side[10];s3[53]=side[9];
s3[38]=side[0];s3[41]=side[1];s3[44]=side[2];
}
for(i=0;i<9;i++){face[i]=s3[9+i];}
{//方阵前面顺转90度
s3[9+0]=face[6];s3[9+1]=face[3];s3[9+2]=face[0];
s3[9+3]=face[7];s3[9+4]=face[4];s3[9+5]=face[1];
s3[9+6]=face[8];s3[9+7]=face[5];s3[9+8]=face[2];
for(i=0;i<9;i++){//数值方向也改
j=parseInt(s3[9+i].charAt(3));
var k=(j-1+1+4)%4+1;
s3[9+i]=s3[9+i].charAt(0)+s3[9+i].charAt(1)+s3[9+i].charAt(2)+k;
}
}
//chgp();
}
function RMBo(){log('RMBo->');br=false;RMB();RMB();RMB();br=true;log('');}
function RMB(){//右面中间层向下转90度
log('RMB,');
rmd3d();
clearArray();
var i=0,j=0;
{
side[0]=s3[3+0];side[1]=s3[3+1];side[2]=s3[3+2];
side[3]=s3[1+18];side[4]=s3[1+21];side[5]=s3[1+24];
side[6]=s3[-3+51];side[7]=s3[-3+52];side[8]=s3[-3+53];
side[9]=s3[-1+38];side[10]=s3[-1+41];side[11]=s3[-1+44];
}
for(i=0;i<12;i++){//数值方向也改
j=parseInt(side[i].charAt(3));
var k=(j-1+1+4)%4+1;
side[i]=side[i].charAt(0)+side[i].charAt(1)+side[i].charAt(2)+k;
}
{
s3[3+0]=side[5];s3[3+1]=side[4];s3[3+2]=side[3];
s3[1+18]=side[6];s3[1+21]=side[7];s3[1+24]=side[8];
s3[-3+51]=side[11];s3[-3+52]=side[10];s3[-3+53]=side[9];
s3[-1+38]=side[0];s3[-1+41]=side[1];s3[-1+44]=side[2];
}
//chgp();
}
function RRBo(){log('RRBo->');br=false;RRB();RRB();RRB();br=true;log('');}
function RRB(){//右面右层向下转90度
log('RRB,');
rrd3d();
clearArray();
var i=0,j=0;
{
side[0]=s3[6+0];side[1]=s3[6+1];side[2]=s3[6+2];
side[3]=s3[2+18];side[4]=s3[2+21];side[5]=s3[2+24];
side[6]=s3[-6+51];side[7]=s3[-6+52];side[8]=s3[-6+53];
side[9]=s3[-2+38];side[10]=s3[-2+41];side[11]=s3[-2+44];
}
for(i=0;i<12;i++){//数值方向也改
j=parseInt(side[i].charAt(3));
var k=(j-1+1+4)%4+1;
side[i]=side[i].charAt(0)+side[i].charAt(1)+side[i].charAt(2)+k;
}
{
s3[6+0]=side[5];s3[6+1]=side[4];s3[6+2]=side[3];
s3[2+18]=side[6];s3[2+21]=side[7];s3[2+24]=side[8];
s3[-6+51]=side[11];s3[-6+52]=side[10];s3[-6+53]=side[9];
s3[-2+38]=side[0];s3[-2+41]=side[1];s3[-2+44]=side[2];
}
for(i=0;i<9;i++){face[i]=s3[27+i];}
{//方阵后面逆转90度
s3[27+0]=face[2];s3[27+1]=face[5];s3[27+2]=face[8];
s3[27+3]=face[1];s3[27+4]=face[4];s3[27+5]=face[7];
s3[27+6]=face[0];s3[27+7]=face[3];s3[27+8]=face[6];
for(i=0;i<9;i++){//数值方向也改
j=parseInt(s3[27+i].charAt(3));
var k=(j-1-1+4)%4+1;
s3[27+i]=s3[27+i].charAt(0)+s3[27+i].charAt(1)+s3[27+i].charAt(2)+k;
}
}
//chgp();
}
function allFR(){log('allFR->');br=false;FTR();FMR();FBR();br=true;log('');}
function allFRo(){log('allFRo->');br=false;FTRo();br=false;FMRo();br=false;FBRo();br=true;}
function allFB(){log('allFB->');br=false;FLB();FMB();FRB();br=true;log('');}
function allFBo(){log('allFBo->');br=false;FLBo();br=false;FMBo();br=false;FRBo();br=true;}
function allRB(){log('allRB->');br=false;RLB();RMB();RRB();br=true;log('');}
function allRBo(){log('allRBo->');br=false;RLBo();br=false;RMBo();br=false;RRBo();br=true;}
run.js
//本算法用的是“最少记忆法”，具体介绍可
//参考http://www.rubik.com.cn/new.htm
function runall(){
stepNum = 1; //在turn.js中定义
$('rlt').innerHTML = '';
var d=new Date();
tFC();//底层十字
tFX();//底层四角
//第一层完成
tSC();//中层位置和方向
tSX();//中层四角
//第二层完成
tTC();//顶层十字
tTX();//顶层四角/**/
$("runtime").innerHTML=((new Date())-d)+"毫秒";
viewbyall();
}
function findPos(v){//找出当前要转的数在什么位置
var i=0;
for(i=0;i<54;i++){
if(v.length==1){if(s3[i].charAt(2)==v)break;}
else{if(s3[i].charAt(2)==v.charAt(1)&&s3[i].charAt(0)==v.charAt(0))break;}
}
if(i==54){alert("此值不存在，请检查输入是否正确！");return(0);}
return(s3[i]+(Math.floor(i/9)+1));
}
function tFC(){//turn first corse转好第一层十字
var flr1C=new Array("B","F","H","D");
var v="",i=0,j=0,k=0;
//将“E”转到底面,并对好方向
v=findPos("E");
f=v.charAt(4);
if(f=="2"){FMB();}
if(f=="6"){FMB();FMB();}
if(f=="4"){FMBo();}
if(f=="3"){RMB();}
if(f=="5"){RMBo();}
f1=s3[4].charAt(3);
if(f1=="4"){FBR();}
if(f1=="3"){FBR();FBR();}
if(f1=="2"){FBRo();}
//E校对完毕
for(i=0;i<4;i++){//十字
if(i!=0){FBRo();}
chgp();
v=findPos(flr1C[i]);
f=v.charAt(4);
f1=v.charAt(1);
if(f=="6"){//如果在顶面
var topfC=new Array("8","4","2","6");//顶层顺时针位置
if(f1=="4"){FTR();}
if(f1=="2"){FTR();FTR();}
if(f1=="6"){FTRo();}
RLB();RLB();
}else if(f=="2"||f=="3"||f=="4"||f=="5"){//在侧面
//侧面分为三种情况
if(f1=="2"){//上层
for(k=0;k<parseInt(f)-2;k++){FTRo();}
RLBo();FMR();RLB();
}else if(f1=="8"){//下层
for(k=0;k<parseInt(f)-2;k++){FBRo();}
RLB();FMRo();RLBo();
for(k=0;k<parseInt(f)-2;k++){FBR();}
RLBo();FMR();FMR();RLB();
}else{//中层
for(k=0;k<parseInt(f)-2;k++){FMRo();}
if(f1=="4"){FMR();RLB();}
if(f1=="6"){FMRo();RLBo();}
}
}else if(f=="1"){//在底面
if(f1!="2"){//不在正确位置
var footfC=new Array("2","4","8","6");//底层逆时针
for(k=0;k<4;k++){
if(f1==footfC[k]){
for(j=0;j<k;j++){FBR();}
RLB();RLB();
for(j=0;j<k;j++){FBRo();}
RLB();RLB();
}
}
}
}
}FBRo();
//alert("FCdone");
}
function tFX(){//转好第一层四角
var flr1X=new Array("A","C","I","G");
var v="",f="",f1="",i=0,j=0,k=0;
for(i=0;i<4;i++){//四角
if(i>0){FBRo();}
chgp();
v=findPos(flr1X[i]);
f=v.charAt(4);
f1=v.charAt(1);
//viewbyall();alert(v);
if(f=="6"){//如果在顶面
var topf=new Array("7","1","3","9");//顶层顺时针位置
for(k=0;k<4;k++){
if(topf[k]==f1){for(j=0;j<k;j++){FTR();}break;}
}//左上,上左,左下,上180(上右二次),左上,上右,左下
FLBo();FTRo();FLB();FTR();FTR();FLBo();FTR();FLB();
}else if(f=="2"||f=="3"||f=="4"||f=="5"){//在侧面
//四角四种情况
if(f1=="1"){//上层左
for(k=0;k<parseInt(f)-2;k++){FTRo();}
FTR();FLBo();FTRo();FLB();
}else if(f1=="3"){//上层右
for(k=0;k<(parseInt(f)-1)%4;k++){FTRo();}
FLBo();FTR();FLB();
}else if(f1=="7"){//下层左
for(k=0;k<parseInt(f)-2;k++){FBRo();}
RLB();FTRo();RLBo();FTR();
for(k=0;k<parseInt(f)-2;k++){FBR();}
i=i-1;if(i!=-1){FBR();}
}else if(f1=="9"){//下层右
for(k=0;k<(parseInt(f)-1)%4;k++){FBRo();}
FLBo();FTR();FLB();FTRo();
for(k=0;k<(parseInt(f)-1)%4;k++)FBR();
i=i-1;if(i!=-1){FBR();}
}
}else if(f=="1"){//在底面
if(f1!="1"){//不在正确位置
var footfX=new Array("1","7","9","3");//底层逆时针
for(k=1;k<4;k++){
if(footfX[k]==f1){
for(j=0;j<k;j++){FBR();}
RLB();FTR();RLBo();
for(j=0;j<k;j++){FBRo();}
i=i-1;if(i!=-1){FBR();}
}
}
}
}
}FBRo();
//alert("FXdone");
}
function tSC(){//对好第二层中间位置和方向
var i=0,j=0;
for(i=0;i<4;i++){if(s3[13].charAt(0)=="2"&&s3[13].charAt(2)=="5"){break;}FMRo();}
for(i=1;i<5;i++){//对方向
var p1=parseInt(s3[i*9+4].charAt(3));
var p2=parseInt(s3[i*9+7].charAt(3));
var p=(p2-p1-1+4)%4+1;
if(p1!=p2){
for(j=0;j<i-1;j++){allFRo();}
RLB();RLB();FTR();FTR();
for(j=0;j<p;j++){RLB();}
FTR();FTR();RLB();RLB();
for(j=0;j<i-1;j++){allFR();}
}
}
}
function tSX(){//对中层四角
var flr2X=new Array("26","5Y","46","36");
var v="",f="",f1="",i=0,j=0,k=0;
for(i=0;i<4;i++){
if(i>0){FMR();}
chgp();
v=findPos(flr2X[i]);
f=v.charAt(4);
f1=v.charAt(1);
//viewbyall();alert(v);
if(f=="6"){//如果在顶面
var topf=new Array("2","6","8","4");//顶层顺时针位置
for(k=0;k<4;k++){if(topf[k]==f1){break;}FTR();}
RLB();FTR();RLBo();FTR();
FLBo();FTRo();FLB();
}else if(f=="2"||f=="3"||f=="4"||f=="5"){
if(f1=="2"){
if(f=="2"){FTR();}
if(f=="4"){FTRo();}
if(f=="5"){FTR();FTR();}
}else if(f1=="4"&&f!="2"){
if(f=="3"){FMRo();}
if(f=="4"){FMR();FMR();}
if(f=="5"){FMR();}
}else if(f1=="6"){
if(f=="2"){FMRo();}
if(f=="3"){FMR();FMR();}
if(f=="4"){FMR();}
}
if((f=="2"&&f1=="4")!=1){
FLBo();FTRo();FLB();FTRo();
RLB();FTR();RLBo();
}
if(f1=="4"&&f!="2"){
if(f=="3"){FMR();}
if(f=="4"){FMR();FMR();}
if(f=="5"){FMRo();}
i=i-1;if(i!=-1){FMRo();}
}
if(f1=="6"){
if(f=="2"){FMR();}
if(f=="3"){FMR();FMR();}
if(f=="4"){FMRo();}
i=i-1;if(i!=-1){FMRo();}
}
}
}FMR();
}
function tTC(){//对顶层十字
var flr3C=new Array("K","O","Q","M");
var v="",f="",f1="",i=0,j=0,k=0;
for(i=0;i<4;i++){if(s3[49].charAt(3)=="1"){break;}FTR();}
for(i=0;i<4;i++){
if(i>0){FTR();}
chgp();
v=findPos(flr3C[i]);
f=v.charAt(4);
f1=v.charAt(1);
//viewbyall();alert(v);
if(f=="6"&&f1!="2"){//在顶层
if(f1=="6"){FTR();}
if(f1=="8"){FTR();FTR()}
if(f1=="4"){FTRo();}
RRBo();
if(f1=="6"){FTRo();}
if(f1=="8"){FTR();FTR()}
if(f1=="4"){FTR();}
RRB();
}else if(f=="2"||f=="3"||f=="4"||f=="5"){
if(f1=="4"){//在中层的二种情况
FTRo();FRB();FTR();FRBo();
}else if(f1=="6"){
RRBo();FTR();RRB();FTRo();
}else{//在顶层侧面
if(f=="2"){FTR();RRBo();FTR();RRB();FTR();FRB();FTR();FRBo();}
if(f=="3"){RRBo();FTR();RRB();FTR();FTR();FRB();FTR();FRBo();}
if(f=="4"){FTRo();RRBo();FTR();RRB();FTRo();FRB();FTRo();FRBo();FTR();FTR();}
if(f=="5"){RRBo();FTRo();RRB();FRB();FTRo();FRBo();FTR();FTR();}
}
}
}FTR();
}
function tTX(){//对顶层四角
var flr3X=new Array("P","J","L","R");
var v="",f="",f1="",i=0,j=0,k=0,sinal=0;
for(i=0;i<4;i++){
if(i>1){//判断是否出现只剩二个没对好的情况
//转完二次后，只有三个位置不确定的，这时候可能会出现
//三个都已经好了，或者有其中一个好了，出现这些情况就
//需要另作处理，不能再循环操作下去，会把原先转好的破坏
if(s3[45].charAt(2)=="L"){sinal+=1;}
if(s3[47].charAt(2)=="R"){sinal+=1;}
if(s3[26].charAt(0)=="2"&&s3[26].charAt(2)=="1"&&
s3[33].charAt(0)=="3"&&s3[33].charAt(2)=="3"&&
s3[8].charAt(0)=="1"&&s3[8].charAt(2)=="I"){sinal+=1;}
if(sinal>0){break;}
}
if(i>0){FTR();}
chgp();
v=findPos(flr3X[i]);
f=v.charAt(4);
f1=v.charAt(1);
//viewbyall();alert(v);
if(f=="6"&&f1!="7"){
if(f1=="1"){FTR();}
if(f1=="3"){FTR();FTR();}
if(f1=="9"){FTRo();}
FLB();FBR();FBR();FLBo();
if(f1=="1"){FTRo();}
if(f1=="3"){FTR();FTR();}
if(f1=="9"){FTR();}
FLB();FBR();FBR();FLBo();
}else if(f=="3"&&f1=="9"){//右下后
RLBo();FBR();FBR();RLB();FTR();RLBo();FBR();FBR();RLB();FTRo();
}else if(f=="4"&&f1=="7"){//后下左
FLB();FBR();FBR();FLBo();FTR();FLB();FBR();FBR();FLBo();FTRo();
}else if(f=="1"&&f1=="9"){//在底面
FTR();FLB();FBR();FBR();FLBo();
FTRo();FLB();FBR();FBR();FLBo();
i=i-1;if(i!=-1){FTRo();}
}else{//在顶层侧面
if(f1=="1"){
if(f=="2"){FTR();RLBo();FBR();FBR();RLB();FTRo();RLBo();FBR();FBR();RLB();}
if(f=="3"){RLBo();FBR();FBR();RLB();FTRo();RLBo();FBR();FBR();RLB();FTR();}
if(f=="4"){RLBo();FBR();FBR();RLB();FTR();FTR();RLBo();FBR();FBR();RLB();FTR();FTR();}
if(f=="5"){RLBo();FBR();FBR();RLB();FTR();RLBo();FBR();FBR();RLB();FTRo();}
FLB();FBR();FBR();FLBo();FTR();FLB();FBR();FBR();FLBo();FTRo();
}
if(f1=="3"){
if(f=="2"){FLB();FBR();FBR();FLBo();FTRo();FLB();FBR();FBR();FLBo();FTR();}
if(f=="3"){FLB();FBR();FBR();FLBo();FTR();FTR();FLB();FBR();FBR();FLBo();FTR();FTR();}
if(f=="4"){FLB();FBR();FBR();FLBo();FTR();FLB();FBR();FBR();FLBo();FTRo();}
if(f=="5"){FTR();FLB();FBR();FBR();FLBo();FTRo();FLB();FBR();FBR();FLBo();}
RLBo();FBR();FBR();RLB();FTR();RLBo();FBR();FBR();RLB();FTRo();
}
}
}
if(sinal==1){
if(s3[45].charAt(2)=="L"||s3[47].charAt(2)=="R"){
if(s3[45].charAt(2)=="L"&&s3[47].charAt(2)!="R"){FTR();}
FLB();FMB();FRB();
if(s3[51].charAt(0)=="6"){
FLB();FBR();FBR();FLBo();RLBo();FBR();FBR();RLB();FTR();FTR();
RLBo();FBR();FBR();RLB();FLB();FBR();FBR();FLBo();FTR();FTR();
}else{
RLBo();FBR();FBR();RLB();FLB();FBR();FBR();FLBo();FTR();FTR();
FLB();FBR();FBR();FLBo();RLBo();FBR();FBR();RLB();FTR();FTR();
}
FLBo();FMBo();FRBo();
}else{alert(2);
FLB();FLB();FMB();FRB();
if(s3[51].charAt(0)=="2"){
FLB();FBR();FBR();FLBo();RLBo();FBR();FBR();RLB();FTR();FTR();
RLBo();FBR();FBR();RLB();FLB();FBR();FBR();FLBo();FTR();FTR();
}else{
RLBo();FBR();FBR();RLB();FLB();FBR();FBR();FLBo();FTR();FTR();
FLB();FBR();FBR();FLBo();RLBo();FBR();FBR();RLB();FTR();FTR();
}
FLBo();FMBo();FRBo();FLBo();
}
}
for(i=0;i<4;i++){if(s3[49].charAt(3)=="3"){break;}FTR();}
}
3dcube.js (这个没有完成, 能力有限)
var tmpl = `<div class="cube" id="{ID}"><span class="in_front">{F}</span><span class="in_back">{B}</span><span class="in_left">{L}</span><span class="in_right">{R}</span><span class="in_top">{T}</span><span class="in_bottom">{M}</span></div>`;
function $(id){return document.getElementById(id);}
var mousex = -1, mousey = -1, mousepid = '';
$('cubes').onmousedown = function(e){
//console.log(e.clientX,e.clientY);
var tag = e.target.tagName.toLowerCase();
var pid = e.target.parentNode.id;
if((tag == 'span') && (pid.substring(0,4) == 'cube')){
mousex = e.clientX - $('cubes').parentNode.parentNode.getBoundingClientRect().left;
mousey = e.clientY - $('cubes').parentNode.parentNode.getBoundingClientRect().top;
mousepid = pid;
}
}
$('cubes').onmouseup = function(e){
if(mousex < 0 || mousey < 0) return; //不在魔方内
var x = e.clientX - $('cubes').parentNode.parentNode.getBoundingClientRect().left - mousex;
var y = e.clientY - $('cubes').parentNode.parentNode.getBoundingClientRect().top - mousey;
if((Math.abs(x) < 5) && (Math.abs(y) < 5)) return; //小范围移动当成点击
var d, f, a, b, c; //方向,面, abc临时变量
var pid = parseInt(mousepid.replace('cube',''));
f = chkInRect(mousex,mousey);
if(Math.abs(x) <= Math.abs(y)) {
if(y < 0){ d = 'u'; } else { d = 'd'; } //上下移动
//if(pid > 9) return;
a = pid % 3;
b = parseInt(pid / 9);
//console.log(pid,f,a,b);
if(f == '') return;
if(f == 'f'){
if(a == 0){ p = 'l'; }
if(a == 1){ p = 'm'; }
if(a == 2){ p = 'r'; }
}
if((f == 'r')){
if(b == 0){ p = 'l'; }
if(b == 1){ p = 'm'; }
if(b == 2){ p = 'r'; }
}
exec = ''+f+p+'d3d();';
if(d=='d'){eval(exec);}else{eval(exec+exec+exec);}
}else{
if(x > 0){ d = 'r'; } else { d = 'l'; } //左右移动
c = parseInt((pid % 9) / 3);
if(c == 0){ p = 't'; }
if(c == 1){ p = 'm'; }
if(c == 2){ p = 'b'; }
exec = ''+f+p+'r3d();';
if(d=='r'){eval(exec);}else{eval(exec+exec+exec);}
}
mousex = mousey = -1;
mousepid = '';
}
function chkInRect(x, y){
var arrf = [[33,105],[209,155],[209,330],[33,280]]; //front
var arrr = [[217,156],[315,70],[315,240],[217,326]]; //right
if((x > arrf[0][0]) && (x < arrf[1][0])){ //front
y0 = parseInt(arrf[0][1] + (arrf[1][1] - arrf[0][1]) * (x - arrf[0][0]) / (arrf[1][0] - arrf[0][0]));
y1 = parseInt(arrf[2][1] - (arrf[2][1] - arrf[3][1]) * (arrf[2][0] - x) / (arrf[2][0] - arrf[3][0]));
if((y >= y0) && (y <= y1)) return 'f';
} else if((x > arrr[0][0]) && (x < arrr[1][0])){ //right
y0 = parseInt(arrr[0][1] - (arrr[0][1] - arrr[1][1]) * (x - arrr[0][0]) / (arrr[1][0] - arrr[0][0]));
y1 = parseInt(arrr[3][1] - (arrr[3][1] - arrr[2][1]) * (x - arrr[3][0]) / (arrr[2][0] - arrr[3][0]));
if((y >= y0) && (y <= y1)) return 'r';
}
return '';
}
var str = '';
var txts = {
'020' : '9←', '050' : '6←', '080' : '3←', '120' : '8←', '150' : '5←', '180' : '2←', '220' : '7←', '250' : '4←', '280' : '1←', // white
'001' : 'S↓', '031' : 'T↓', '061' : 'U↓', '101' : 'V↓', '131' : '*↓', '161' : 'W↓', '201' : 'X↓', '231' : 'Y↓', '261' : 'Z↓', // cyan
'002' : 'L←', '012' : 'K←', '022' : 'J←', '102' : 'O←', '112' : 'N←', '122' : 'M←', '202' : 'R←', '212' : 'Q←', '222' : 'P←', // purple
'063' : 'A→', '073' : 'B→', '083' : 'C→', '163' : 'D→', '173' : 'E→', '183' : 'F→', '263' : 'G→', '273' : 'G→', '283' : 'I→', // red
'004' : '9←', '014' : '8←', '024' : '7←', '034' : '6←', '044' : '5←', '054' : '4←', '064' : '3←', '074' : '2←', '084' : '1←', // green
'225' : '9←', '215' : '8←', '205' : '7←', '255' : '6←', '245' : '5←', '235' : '4←', '285' : '3←', '275' : '2←', '265' : '1←' // yellow
};
for(i=0; i<27; i++){
x = parseInt(i / 9);
y = i % 9;
l = y % 3;
t = parseInt(y / 3);
id = "cube"+ i +"\" rotatex='0' rotatey='0' rotatez='0' style=\"z-index:"+((2-x)*10+9-(2-l)-t*3)+";left:"+(l*100)+"px;top:"+(t*100)+"px;transform:translateZ(-"+(100*x)+"px);";
str += tmpl.replace("{ID}", id).replace("{F}",txts[''+x+y+'4']?txts[''+x+y+'4']:'').replace("{B}",txts[''+x+y+'5']?txts[''+x+y+'5']:'').replace("{L}",txts[''+x+y+'1']?txts[''+x+y+'1']:'').replace("{R}",txts[''+x+y+'0']?txts[''+x+y+'0']:'').replace("{T}",txts[''+x+y+'2']?txts[''+x+y+'2']:'').replace("{M}",txts[''+x+y+'3']?txts[''+x+y+'3']:'');
}
$('cubes').innerHTML = str;
$('cubes').onselectstart = function(){return false;}
function rotate90(arr){
n = 3;
var arr1 = [];
for(i=0; i<n; i++){
for(j=0; j<n; j++){
arr1[j * n + n - 1 - i] = arr[i * n + j];
}}
return arr1;
}
//x面操作
function fld3d(){
var elsn = [0,9,18,3,12,21,6,15,24];
roundx(elsn, 0);
}
function fmd3d(){
var elsn = [1,10,19,4,13,22,7,16,25];
roundx(elsn, 1);
}
function frd3d(){
var elsn = [2,11,20,5,14,23,8,17,26];
roundx(elsn, 2);
}
//y面操作
function ftr3d(){
var elsn = [0,1,2,9,10,11,18,19,20];
roundy(elsn, 0);
}
function fmr3d(){
var elsn = [3,4,5,12,13,14,21,22,23];
roundy(elsn, 1);
}
function fbr3d(){
var elsn = [6,7,8,15,16,17,24,25,26];
roundy(elsn, 2);
}
//z面操作
function rld3d(){
var elsn = [0,1,2,3,4,5,6,7,8];
roundz(elsn, 0);
}
function rmd3d(){
var elsn = [9,10,11,12,13,14,15,16,17];
roundz(elsn, 1);
}
function rrd3d(){
var elsn = [18,19,20,21,22,23,24,25,26];
roundz(elsn, 2);
}
function roundx(elsn, goZ){
var zis = [];
var lt = [];
for (var i=0; i<elsn.length; i++){
zis[i] = $('cube'+elsn[i]).style.zIndex;
lt[i] = [parseInt($('cube'+elsn[i]).style.left.replace('px','')),parseInt($('cube'+elsn[i]).style.top.replace('px',''))];
}
//zis = rotate90(zis);
for (var i=0; i<elsn.length; i++){
const newDiv = $('cube'+elsn[i]);
goX = (200-lt[i][0])+'px';
goY = (200-lt[i][1])+'px';
newDiv.style.transformOrigin = goX+" "+goY + " -100px";
var rx = parseInt(newDiv.getAttribute('rotatex')) % 4;
newDiv.setAttribute('rotatex', (rx+1)%4);
newDiv.style.animation = 'rotatex'+goZ+rx+parseInt(i%3)+' 0.3s linear infinite';
newDiv.style.animationIterationCount = 1; // 动画只执行一次
newDiv.style.animationFillMode = 'forwards'; //动画结束后停留在最后一帧
}
}
function roundy(elsn, goZ){
var zis = [];
var lt = [];
for (var i=0; i<elsn.length; i++){
zis[i] = $('cube'+elsn[i]).style.zIndex;
lt[i] = [parseInt($('cube'+elsn[i]).style.left.replace('px','')),parseInt($('cube'+elsn[i]).style.top.replace('px',''))];
}
//zis = rotate90(zis);
for (var i=0; i<elsn.length; i++){
const newDiv = $('cube'+elsn[i]);
goX = (200-lt[i][0])+'px';
goY = (200-lt[i][1])+'px';
newDiv.style.transformOrigin = goX+" "+goY + " -100px";
var ry = parseInt(newDiv.getAttribute('rotatey')) % 4;
newDiv.setAttribute('rotatey', (ry+1)%4);
newDiv.style.animation = 'rotatey'+goZ+ry+parseInt(i/3)+' 0.3s linear infinite';
newDiv.style.animationIterationCount = 1; // 动画只执行一次
newDiv.style.animationFillMode = 'forwards'; //动画结束后停留在最后一帧
}
}
function roundz(elsn, goZ){
var zis = [];
var lt = [];
for (var i=0; i<elsn.length; i++){
zis[i] = $('cube'+elsn[i]).style.zIndex;
lt[i] = [parseInt($('cube'+elsn[i]).style.left.replace('px','')),parseInt($('cube'+elsn[i]).style.top.replace('px',''))];
}
//zis = rotate90(zis);
for (var i=0; i<elsn.length; i++){
const newDiv = $('cube'+elsn[i]);
goX = (200-lt[i][0])+'px';
goY = (200-lt[i][1])+'px';
newDiv.style.transformOrigin = goX+" "+goY;
var rz = parseInt(newDiv.getAttribute('rotatez')) % 4;
newDiv.setAttribute('rotatez', (rz+1)%4);
newDiv.style.animation = 'rotatez'+goZ+rz+' 0.3s linear infinite';
newDiv.style.animationIterationCount = 1; // 动画只执行一次
newDiv.style.animationFillMode = 'forwards'; //动画结束后停留在最后一帧
}
}
浙公网安备 33010602011771号