有趣的代码之魔方（html版）

代码如下：

<!doctype html>  
<html>  
<head>  
<meta charset="utf-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">  
<meta name="renderer" content="webkit">  
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>  
<style>  
* {  
margin:0;  
padding:0;  
list-style:none;  
box-sizing:border-box;  
}  
.container {  
  
width:180px;  
height:180px;  
margin:100px auto;  
}  
.box {  
perspective:500px;  
position:relative;  
}  
.content {  
width:180px;  
height:180px;  
transform-style:preserve-3d;  
animation:run 10s infinite;  
}  
.face {  
width:180px;  
height:180px;  
position:absolute;  
text-align:center;  
line-height:180px;  
  
}  
  
/*@keyframes run {  
0% {  
transform:rotateY(0);  
}  
10% {  
transform:rotateY(180deg);  
}  
20% {  
transform:rotateX(360deg);  
transform:rotateY(360deg);  
  
}  
}*/  
  
.minibox{  
width: 54px;  
height:54px;  
border-radius: 4px;  
float: left;  
border:3px solid #000;  
}  
  
.divbuttons{  
height:280px;  
margin:10px auto;  
text-align: center;  
}  
.button{font-size: xx-large;width: 120px;  
padding: 3px;  
margin: 3px;}  
  
</style>  
<script type="text/javascript">  
  
var colors = ["green","yellow","red","blue","white","pink"];  
var sidenames = ["aside","bside","cside","dside","eside","fside"];  
var colordata=[];  
  
$(function (argument) {  
  
//初始化colordata[]  
for (var i = 0; i < colors.length; i++) {  
var tmp =[];  
for (var j = 0; j < 9; j++) {  
tmp.push(colors[i]);  
}  
colordata.push(tmp);  
}  
fillcolor2box(colordata);  
  
//整体有个旋转角度可以让我们看到3面  
$(".content").css("transform","rotateX(-30deg) rotateY(30deg) rotateZ(0deg)");  
  
// 各面旋转拼凑正方体  
$(".bside").css("transform","rotateY(-90deg) translateX(-71px) translateZ(90px)");  
$(".cside").css("transform","rotateY(90deg) translateX(90px) translateZ(71px)");  
$(".dside").css("transform","rotateY(180deg) translateX(17px) translateZ(161px)");  
$(".eside").css("transform","rotateX(269deg) translateY(90px) translateZ(71px) ");  
$(".fside").css("transform","rotateX(90deg) translateY(-71px) translateZ(90px)");  
});  
</script>  
</head>  
<body>  
<div class="container">  
<div class="box">  
<div class="content">  
<div class="aside face"> <!--魔方第一个面，类名aside-->  
<div class="minibox"></div>  
<div class="minibox"></div>  
<div class="minibox"></div>  
<div class="minibox"></div>  
<div class="minibox"></div>  
<div class="minibox"></div>  
<div class="minibox"></div>  
<div class="minibox"></div>  
<div class="minibox"></div>  
</div>  
<div class="bside face"> <!--魔方第2个面，类名bside-->  
<div class="minibox"></div>  
<div class="minibox"></div>  
<div class="minibox"></div>  
<div class="minibox"></div>  
<div class="minibox"></div>  
<div class="minibox"></div>  
<div class="minibox"></div>  
<div class="minibox"></div>  
<div class="minibox"></div>  
</div>  
<div class="cside face"> <!--魔方第3个面，类名cside-->  
<div class="minibox"></div>  
<div class="minibox"></div>  
<div class="minibox"></div>  
<div class="minibox"></div>  
<div class="minibox"></div>  
<div class="minibox"></div>  
<div class="minibox"></div>  
<div class="minibox"></div>  
<div class="minibox"></div>  
</div>  
<div class="dside face"> <!--魔方第一4个面，类名dside-->  
<div class="minibox"></div>  
<div class="minibox"></div>  
<div class="minibox"></div>  
<div class="minibox"></div>  
<div class="minibox"></div>  
<div class="minibox"></div>  
<div class="minibox"></div>  
<div class="minibox"></div>  
<div class="minibox"></div>  
</div>  
<div class="eside face"> <!--魔方第5个面，类名eside-->  
<div class="minibox"></div>  
<div class="minibox"></div>  
<div class="minibox"></div>  
<div class="minibox"></div>  
<div class="minibox"></div>  
<div class="minibox"></div>  
<div class="minibox"></div>  
<div class="minibox"></div>  
<div class="minibox"></div>  
</div>  
<div class="fside face"> <!--魔方第6个面，类名fside-->  
<div class="minibox"></div>  
<div class="minibox"></div>  
<div class="minibox"></div>  
<div class="minibox"></div>  
<div class="minibox"></div>  
<div class="minibox"></div>  
<div class="minibox"></div>  
<div class="minibox"></div>  
<div class="minibox"></div>  
</div>  
</div>  
</div>  
  
  
</div>  
<div class="divbuttons">  
<input type="button" class="button" value="左正" onclick="zuoshun()" >  
<input type="button" class="button" value="左逆" onclick="zuoni()">  
<input type="button" class="button" value="前正" onclick="qianshun()">  
<input type="button" class="button" value="前逆" onclick="qianni()">  
<input type="button" class="button" value="顶正" onclick="dingshun()">  
<input type="button" class="button" value="顶逆" onclick="dingni()">  
</div>  
  
</body>  
</html>  
<script type="text/javascript">  
  
function dingni() {  
var rotefaces=['aside','cside','dside','bside','aside']; //本次操作的4个相关面，一个顶面  
var rotepos=[[0,1,2],[0,1,2],[0,1,2],[0,1,2],[0,1,2]]; //本次操作的块  
var movefave = "fside"; //本次操作的4个相关面，一个顶面  
var bno = "01258763"; //01258763 36785210  
roteall(rotefaces,rotepos,movefave,bno);  
//把数据对应到格子上  
fillcolor2box(colordata);  
}  
function dingshun() {  
var rotefaces=['aside','bside','dside','cside','aside']; //本次操作的4个相关面，一个顶面  
var rotepos=[[0,1,2],[0,1,2],[0,1,2],[0,1,2],[0,1,2]]; //本次操作的块  
var movefave = "fside"; //本次操作的4个相关面，一个顶面  
var bno = "36785210";  
roteall(rotefaces,rotepos,movefave,bno);  
//把数据对应到格子上  
fillcolor2box(colordata);  
}  
  
function zuoni() {  
var rotefaces=['aside','fside','dside','eside','aside']; //本次操作的4个相关面，一个顶面  
var rotepos=[[6,3,0],[6,3,0],[2,5,8],[6,3,0],[6,3,0]]; //本次操作的块  
var movefave = "bside"; //本次操作的4个相关面，一个顶面  
var bno = "01258763"; //01258763 36785210  
roteall(rotefaces,rotepos,movefave,bno);  
//把数据对应到格子上  
fillcolor2box(colordata);  
}  
function zuoshun() {  
var rotefaces=['aside','eside','dside','fside','aside']; //本次操作的4个相关面，一个顶面  
var rotepos=[[6,3,0],[6,3,0],[2,5,8],[6,3,0],[6,3,0]]; //本次操作的块  
var movefave = "bside"; //本次操作的4个相关面，一个顶面  
var bno = "36785210"; //01258763 36785210  
roteall(rotefaces,rotepos,movefave,bno);  
//把数据对应到格子上  
fillcolor2box(colordata);  
}  
  
//前逆  
function qianni() {  
var rotefaces=['fside','bside','eside','cside','fside']; //本次操作的4个相关面，一个顶面  
var rotepos=[[8,7,6],[2,5,8],[0,1,2],[6,3,0],[8,7,6]]; //本次操作的块  
var movefave = "aside"; //本次操作的4个相关面，一个顶面  
var bno = "01258763"; //01258763 36785210  
roteall(rotefaces,rotepos,movefave,bno);  
//把数据对应到格子上  
fillcolor2box(colordata);  
}  
function qianshun() {  
var rotefaces=['fside','cside','eside','bside','fside']; //本次操作的4个相关面，一个顶面  
var rotepos=[[8,7,6],[6,3,0],[0,1,2],[2,5,8],[8,7,6]]; //本次操作的块  
var movefave = "aside"; //本次操作的4个相关面，一个顶面  
var bno = "36785210"; //01258763 36785210  
roteall(rotefaces,rotepos,movefave,bno);  
//把数据对应到格子上  
fillcolor2box(colordata);  
}  
  
  
  
function roteall(rotefaces,rotepos,movefave,bno ) {  
// var rotefaces=['fside','cside','eside','bside','fside']; //本次操作的4个相关面，一个顶面  
// var rotepos=[[8,7,6],[6,3,0],[0,1,2],[2,5,8],[8,7,6]]; //本次操作的块  
// var movefave = "aside"; //本次操作的4个相关面，一个顶面  
// var bno = "36785210"; //01258763 36785210  
var bn = bno.split("");// 顶面的操作是这8个格子依次前进3次 "01258763"顺时针  
  
//为复制先存一个a面的顶上3个块颜色  
var tmpcolordata = [];  
for (var i = 0; i < colordata.length; i++) {  
tmpcolordata.push(colordata[i].concat() ); //保存第一个数据  
}  
  
for (var i = 0; i < rotefaces.length; i++) { //4个面轮流复制，最后一个面的时候使用保存的数据  
for (var j = 0; j < rotepos[i].length; j++) {  
if(i<4){  
colordata[sidenames.indexOf(rotefaces[i+1])][rotepos[i+1][j]] =  
tmpcolordata[sidenames.indexOf(rotefaces[i])][rotepos[i][j]];  
}  
}  
}  
tmpcolordata=[];  
  
//顶面旋转  
var ci = sidenames.indexOf(movefave);  
for (var i = 0; i < 2; i++) {  
var tmp = colordata[ci][bn[0]]; //保存第一个数据  
for (var j = 0; j < bn.length; j++) {  
if(j>=bn.length-1){  
colordata[ci][bn[j]]= tmp ;  
}else{  
colordata[ci][bn[j]]= colordata[ci][bn[j+1]] ;  
}  
}  
}  
}  
  
//把数据对应到格子上  
function fillcolor2box(colordata) {  
sidenames.map(function(value,index,array) {  
var k= sidenames.indexOf(value);  
for (var i = 0; i < 9; i++) {  
$("."+value+" div").eq(i).css("background",colordata[k][i]);  
}  
});  
}  
  
  
</script>

大家可以看看效果：

点击按钮，可以变换魔方方向，如图所示：

结语

平时闲来无事可以玩一玩，提高思维敏捷程度。