用Javascript编写魔方程序（完整版）

新建立一个html页面。body里面加如下代码。写好六个面。2021-3-25希望大家留言

然后在head里增加css:顺便引入jquery.

我们预览应该得到一个这样的魔方

接下来，表演开始。在文件中加入代码。付给颜色。

		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.

		//开始表演。把每个面都平移170pxpxsidenames.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=acolordata[sidenames.indexOf(rotefaces[i])][j] =  tmpcolordata[j]; }else{ //aside=bside,b=d,d=ccolordata[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);}

把上面的修改下就可以顶顺。

最后贴下全部的代码吧先上修改过的图 前面的代码都不算。

完整代码

当然还是需要检测一下。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！