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

最新推荐文章于 2024-03-15 14:53:05 发布

置顶东宇科技

最新推荐文章于 2024-03-15 14:53:05 发布

阅读量3.4k

点赞数 4

分类专栏： javascript

本文链接：https://blog.csdn.net/ldy889/article/details/104747463

版权

javascript 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

新建立一个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>

当然还是需要检测一下。

东宇科技

关注

4
点赞
踩
17

收藏

觉得还不错? 一键收藏
打赏
11
评论
用Javascript编写魔方程序（完整版）

新建立一个html页面。body里面加如下代码。写好六个面。<body> <div class="container"> <div class="box"> <div class="content"> <div class="aside face"> ...
复制链接

扫一扫