新建立一个html页面。body里面加如下代码。写好六个面。2021-3-25希望大家留言
<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个面,类名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="cside face"> <!--魔方第3个面,类名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="dside face"> <!--魔方第一4个面,类名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="eside face"> <!--魔方第5个面,类名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="fside face"> <!--魔方第6个面,类名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>
</div>
</div>
</body>
然后在head里增加css:顺便引入jquery.
<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;
}
.minibox{
width: 54px;
height:54px;
border-radius: 4px;
float: left;
border:3px solid #000;
}
</style>
我们预览应该得到一个这样的魔方
接下来,表演开始。在文件中加入代码。付给颜色。
var colors = ["green","yellow","red","blue","white","pink"];
var sidenames = ["aside","bside","cside","dside","eside","fside"];
//六面赋值颜色
sidenames.map(function(value,index,array) {
$("."+value+" div").css("background",colors[index]);
})
结果:只显示了一个颜色。其他几个颜色应该是重叠了。我让他们都显示。
我们给每个面平移170px.
//开始表演。把每个面都平移170pxpx
sidenames.map(function(value,index,array) {
$("."+value+"").css("left", ( 0+index*170 ) +"px");
})
好的,每面都显示正确的颜色。先旋转看下,最好能看完整6面。
$(".content").css("transform","rotateX(-30deg) rotateY(30deg) rotateZ(0deg)");
魔方这个被旋转了一下,xy方向各旋转了30°。
//调整各个面的方向
$(".bside").css("transform","rotateY(90deg)");
$(".cside").css("transform","rotateY(-90deg)");
$(".eside").css("transform","rotateX(90deg)");
$(".fside").css("transform","rotateX(-90deg)");
$(".bside").css("transform","rotateY(90deg) translateX(90px) translateZ(-90px)");
$(".cside").css("transform","rotateY(-90deg) translateX(-71px) translateZ(-71px)");
$(".dside").css("transform","translateZ(-161px)");
$(".eside").css("transform","rotateX(90deg) translateY(-71px) translateZ(-71px) ");
$(".fside").css("transform","rotateX(-90deg) translateY(90px) translateZ(-90px)");
分别调整后面几个面。最后去掉开始的平移。最后结果是:
然后比较复杂了。
当我们想要旋转魔方时,例如黄面取代绿面。即b->a,a->c,c->d,d->b,e旋转90,f旋转90。
我们只需设置最终的结果。然后让数字渐变吧。看下效果。
细心的你会发现,每一个操作,面的第5个方块,颜色不会改变。它反应着我们这个面的名字。
然后我们需要看下,数据情况。修改之前的代码,我们构造一个数组colordata[]来存储我们的数据。
var colors = ["green","yellow","red","blue","white","pink"];
var sidenames = ["aside","bside","cside","dside","eside","fside"];
var colordata=[];
$(function (argument) {
//六面赋值颜色
sidenames.map(function(value,index,array) {
$("."+value+" div").css("background",colors[index]);
})
//初始化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);
}
console.log(colordata);
当我们做顶逆这个操作的时候,我们数据也要相应变化。
当操作完后,数据变成标准数组的时候,我们就判定魔方已经完成。记录下时间。
当然开始的时候我们需要用一个ran来初始化我们的魔方。不能乱调。实际上是做ran次操作。把结果赋值给初始。
所以我们先写操作:
顶逆:(分2部,先让abcd四面的第一行转,然后让f面的自转
function dingni() {
var rotefaces=['aside','bside','dside','cside']; //本次操作的4个相关面,一个顶面
var rotepos=[0,1,2]; //本次操作的块
var movefave = "fside"; //本次操作的4个相关面,一个顶面
var bn = "36785210".split("");// 顶面的操作是这8个格子依次前进3次 "01258763"顺时针
//为复制先存一个a面的顶上3个块颜色
var tmpcolordata = [];
for (var i = 0; i < rotepos.length; i++) {
tmpcolordata.push(colordata[sidenames.indexOf(rotefaces[0])][i]); //保存第一个数据
}
for (var i = 0; i < rotefaces.length; i++) { //4个面轮流复制,最后一个面的时候使用保存的数据
for (var j = 0; j < rotepos.length; j++) {
if(i>=rotefaces.length-1){//c=a
colordata[sidenames.indexOf(rotefaces[i])][j] = tmpcolordata[j];
}else{ //aside=bside,b=d,d=c
colordata[sidenames.indexOf(rotefaces[i])][j] = colordata[sidenames.indexOf(rotefaces[i+1])][j];
}
}
}
//顶面旋转
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]] ;
}
}
}
//把数据对应到格子上
fillcolor2box(colordata);
}
//把数据对应到格子上
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]);
}
});
}
function dingni() {
var rotefaces=['aside','bside','dside','cside']; //本次操作的4个相关面,一个顶面
var rotepos=[0,1,2]; //本次操作的块
var movefave = "fside"; //本次操作的4个相关面,一个顶面
var bno = "36785210";
roteall(rotefaces,rotepos,movefave,bno);
}
function dingshun() {
var rotefaces=['aside','cside','dside','bside']; //本次操作的4个相关面,一个顶面
var rotepos=[0,1,2]; //本次操作的块
var movefave = "fside"; //本次操作的4个相关面,一个顶面
var bno = "01258763";
roteall(rotefaces,rotepos,movefave,bno);
}
把上面的修改下就可以顶顺。
最后贴下全部的代码吧先上修改过的图 前面的代码都不算。
完整代码
<!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>
当然还是需要检测一下。