1. 程式人生 > >三階魔方 js

三階魔方 js

本文三階魔方的實現利用到了 jquery.min,用一個三維陣列來對魔方的面,方格,顏色位置來進行定義,在執行輸出,先上效果圖。


程式碼中的瀏覽器適配,只設置了一種webkit ,其他的ms,moz都沒有進行設定,所以最好用Google Chrome,或者360瀏覽器。

另外,魔方在其他兩側面的縱向旋轉上的視覺效果不太好,有興趣的朋友可以幫忙改進一下。

cube.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="css/style.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="js/cube.js"></script>
</head>
<body>
<div id="box">
<ul id="cube">
</ul>

</div>
</body>
</html>

style.css
@CHARSET "UTF-8";
*{padding:0;margin:0;}


html{
	background: -webkit-radial-gradient(center,farthest-corner,red,black);
	height:100%;
	
}

#box{
	position:absolute;
	top:50%;
	left:50%;
	width:300px;
	height:300px;
    margin-top:-150px;
    margin-left:-150px;
    -webkit-transform-style:preserve-3d;
	-webkit-perspective:800px;
	
}
#cube{
	width:100px;
	height:100px;
	margin:100px auto; 
    -webkit-transform-style:preserve-3d;
    -webkit-transition:0.5s ease all;
    -webkit-transform:rotateX(-30deg) rotateY(-30deg);
}
#cube li{
	display:block;
	position:absolute;
	width:98px;
	height:98px;
	border:1px solid black;
	-webkit-transform-style:preserve-3d;
	-webkit-transition:0.5s ease all;
 	-webkit-user-select:none; 
 		z-index:10;

	
}
#front,#back,#left,#right,#top,#bottom{
	-webkit-transform-style:preserve-3d;
	-webkit-transition:0.5s ease all;
}

cube.js
$(document).ready(function(){
	var surface=new Array();
	var facediv="";
	var mx;                   //x方向位移
	var my;                  //y方向位移
	var rox=-30;
	var roy=-30;
	var sfid;               //滑鼠點選魔方的位置
	/**
	 * 初始化魔方六個面,包括顏色,位置
	 */
	for(var i=1;i<=6;i++){
		surface[i]=new Array();
		for(var j=1;j<=9;j++){
			surface[i][j]=new Array();
			for(var k=1;k<=2;k++){
				surface[i][j][k]="";
			}
		}
	}
	
	for(var i=1;i<=6;i++){
		for(var j=1;j<=9;j++){
			switch(i){
			case 1:
				surface[i][j][1]="blue";
				break;
			case 2:
				surface[i][j][1]="lime";
				break;
			case 3:
				surface[i][j][1]="red";
				break;
			case 4:
				surface[i][j][1]="yellow";
				break;
			case 5:
				surface[i][j][1]="white";
				break;
			case 6:
				surface[i][j][1]="#FFB416";
				break;
			
			}
		}
	}
	/**
	 * 每個大面的位置
	 */
	local();
	function local(){
	for(var i=1;i<=6;i++){
		for(var j=1;j<=9;j++){
			switch(i){
			case 1:
				surface[i][j][2]="rotateY(0deg)";
				break;
			case 2:
				surface[i][j][2]="rotateY(180deg)";
				break;
			case 3:
				surface[i][j][2]="rotateY(-90deg)";
				break;
			case 4:
				surface[i][j][2]="rotateY(90deg)";
				break;
			case 5:
				surface[i][j][2]="rotateX(90deg)";
				break;
			case 6:
				surface[i][j][2]="rotateX(-90deg)";
				break;
			
			}
		}
	}
	/**
	 * 每個面子方塊的位置
	 */
	for(var i=1;i<=6;i++){
		surface[i][1][2] +="translateX(-100px) translateY(-100px)";
		surface[i][2][2] +="translateX(0px) translateY(-100px)";
		surface[i][3][2] +="translateX(100px) translateY(-100px)";
		surface[i][4][2] +="translateX(-100px) translateY(0px)";
		surface[i][5][2] +="translateX(0px) translateY(0px)";
		surface[i][6][2] +="translateX(100px) translateY(0px)";
		surface[i][7][2] +="translateX(-100px) translateY(100px)";
		surface[i][8][2] +="translateX(0px) translateY(100px)";
		surface[i][9][2] +="translateX(100px) translateY(100px)";
		
	}}
	/**
	 * 一個div就是一個面,一個li就是一個格子
	 */
	htmldiv();
	function htmldiv(){
		facediv="";
	for(var i=1;i<=6;i++){
		for(var j=1;j<=9;j++){
			if(j==1){
			switch(i){
			case 1:facediv +='<div id="front">';
				break;
			case 2:facediv +='<div id="back">';
				break;
			case 3:facediv +='<div id="left">';
				break;
			case 4:facediv +='<div id="right">';
				break;
			case 5:facediv +='<div id="top">';
				break;
			case 6:facediv +='<div id="bottom">';
				break;
			}}
			facediv +='<li id="sf'+i+'-'+j+'" style="background-color:'+surface[i][j][1]+'; -webkit-transform:'+surface[i][j][2]+'translateZ(150px);"></li>';
			if(j==9){
				facediv +='</div>';
			}
		}
	}
	$("#cube").html(facediv);
	$("li").bind("mousedown",function(){
		sfid=$(this).attr("id");
		
	});
	}
	$(document).mousedown(function(e){
		
		mx=e.pageX;
		my=e.pageY;
	});
	$(document).mouseup(function(e){
		mx=e.pageX-mx;
		my=e.pageY-my;
		
		rotate();
		
	});
	/**
	 * 
	 * 轉動
	 */
	function rotate(){
		if(!sfid){                  // 判斷是否有點選到魔方,整體轉動
			
		if(Math.abs(mx)>150){
			if(mx>0)roy+=90;
			if(mx<0)roy-=90;
		}
		if(Math.abs(my)>150){
			if(my>0)rox+=180;
			if(my<0)rox-=180;
		}
		//整體轉動
		$("#cube").css("-webkit-transform","rotateX("+rox+"deg) rotateY("+roy+"deg) ");
		
	}else{
		var sfi=sfid.charAt(2);
		var sfj=sfid.charAt(4);
		if((Math.abs(mx)<150&&Math.abs(my)>150)||(Math.abs(mx)>150&&Math.abs(my)<150)){
		if(Math.abs(mx)>150){                              //魔方橫向轉動
			if(sfi!=5&&sfi!=6){
				
			if(sfj<=3)sfj=3;
			if(sfj>3&&sfj<=6)sfj=6;
			if(sfj>6&&sfj<=9)sfj=9;
			changlocalX(sfj);
			}
		}
		if(Math.abs(my)>150){                             //魔方縱向轉動
			
			if(sfi==1){
			if(sfj%3==0)sfj=3;
			if(sfj==2||sfj==5||sfj==8)sfj=2;
			if(sfj==1||sfj==4||sfj==7)sfj=1;
			changlocalY(sfj,sfi);
			}
			if(sfi==4){
				if(sfj%3==0)
					{sfj=3;changlocalY1(sfj,sfi);}
				if(sfj==1||sfj==4||sfj==7)
					{sfj=1;changlocalY2(sfj,sfi);}
				if(sfj==2||sfj==5||sfj==8){
					sfj=2;changlocalY3(sfj,sfi);
				}
			}
			if(sfi==2){
				my=-my;
								
				if(sfj==2||sfj==5||sfj==8)sfj=2;
				if(sfj==1||sfj==4||sfj==7)sfj=3;
				else{
					if(sfj%3==0)sfj=1;
				}
					
				changlocalY(sfj,sfi);
			}
			if(sfi==3){
				my=-my;
				if(sfj%3==0)
				{sfj=1;changlocalY2(sfj,sfi);}
				else{
			if(sfj==1||sfj==4||sfj==7)
				{sfj=3;changlocalY1(sfj,sfi);}}
			if(sfj==2||sfj==5||sfj==8){
				sfj=2;changlocalY3(sfj,sfi);
			}
			}
					
		}}
	}
		sfid="";
	}	
	
	
	//魔方橫向轉動
	function changlocalX(sfj){

		if(mx>0){
			if(sfj==3){
		$("#top").css("-webkit-transform","rotateY(90deg)");
		topcolor1(5);
			}
			if(sfj==9){
				$("#bottom").css("-webkit-transform","rotateY(90deg)");
				topcolor2(6);
			}
		
		
		for(var j=sfj-2;j<=sfj;j++){
			$("#sf1-"+j).css("-webkit-transform",surface[4][j][2]+"translateZ(150px)");
			$("#sf2-"+j).css("-webkit-transform",surface[3][j][2].replace("Y(-90","Y(270")+"translateZ(150px)");
			$("#sf3-"+j).css("-webkit-transform",surface[1][j][2]+"translateZ(150px)");
			$("#sf4-"+j).css("-webkit-transform",surface[2][j][2]+"translateZ(150px)");
			
	
			var col =surface[1][j][1];
			surface[1][j][1]=surface[3][j][1];
			surface[3][j][1]=surface[2][j][1];
			surface[2][j][1]=surface[4][j][1];
			surface[4][j][1]=col;
			
		}
		}else{
			if(sfj==3){
			$("#top").css("-webkit-transform","rotateY(-90deg)");
			topcolor2(5);
			}
			if(sfj==9){
				$("#bottom").css("-webkit-transform","rotateY(-90deg)");
				topcolor1(6);
			}
			for(var j=sfj-2;j<=sfj;j++){
				$("#sf3-"+j).css("-webkit-transform",surface[2][j][2].replace("Y(180","Y(-180")+"translateZ(150px)");
				$("#sf2-"+j).css("-webkit-transform",surface[4][j][2]+"translateZ(150px)");
				$("#sf4-"+j).css("-webkit-transform",surface[1][j][2]+"translateZ(150px)");
				$("#sf1-"+j).css("-webkit-transform",surface[3][j][2]+"translateZ(150px)");
				var row =surface[1][j][1];
				surface[1][j][1]=surface[4][j][1];
				surface[4][j][1]=surface[2][j][1];
				surface[2][j][1]=surface[3][j][1];
				surface[3][j][1]=row;
			}
			
		}
		var time =setTimeout(function(){local()},500);     //重新整理方格位置
		var time1 =setTimeout(function(){htmldiv()},500);
	}
	
	//魔方第一,二面的縱向轉動
	function changlocalY(sfj,sfi){
		
		if(my<0){

			if(sfj==3&&(sfi==1||sfi==2)){
			$("#right").css("-webkit-transform","rotateX(90deg) translateY(-50px) translateZ(-50px)");
			topcolor2(4);
			}
			if(sfj==1&&(sfi==1||sfi==2)){
				$("#left").css("-webkit-transform","rotateX(90deg) translateY(-50px) translateZ(-50px)");
				topcolor1(3);
			}
			for(var j=sfj;j<=9;j+=3){
				
				$("#sf1-"+j).css("-webkit-transform",surface[5][j][2]+"translateZ(150px)");
				$("#sf5-"+j).css("-webkit-transform",surface[5][j][2].replace("X(90","X(180")+"translateZ(150px)");
				$("#sf2-"+(10-j)).css("-webkit-transform",surface[2][10-j][2].replace("deg)","deg) rotateX(270deg)")+"translateZ(150px)");
				$("#sf6-"+j).css("-webkit-transform",surface[1][j][2]+"translateZ(150px)");
				
				var col=surface[1][j][1];
				surface[1][j][1]=surface[6][j][1];
				surface[6][j][1]=surface[2][10-j][1];
				surface[2][10-j][1]=surface[5][j][1];
				surface[5][j][1]=col;
			}
		}
		else{
			if(sfj==3&&(sfi==1||sfi==2)){
			$("#right").css("-webkit-transform","rotateX(-90deg) translateY(-50px) translateZ(50px)");
			topcolor1(4);
			}
			if(sfj==1&&(sfi==1||sfi==2)){
				$("#left").css("-webkit-transform","rotateX(-90deg) translateY(-50px) translateZ(50px)");
				topcolor2(3);
			}
			for(var j=sfj;j<=9;j+=3){
				
				$("#sf1-"+j).css("-webkit-transform",surface[6][j][2]+"translateZ(150px)");
				$("#sf6-"+j).css("-webkit-transform",surface[6][j][2].replace("X(-90","X(-180")+"translateZ(150px)");
				$("#sf2-"+(10-j)).css("-webkit-transform",surface[2][(10-j)][2].replace("deg)","deg) rotateX(90deg)")+"translateZ(150px)");
				$("#sf5-"+j).css("-webkit-transform",surface[1][j][2]+"translateZ(150px)");
				
				var col=surface[1][j][1];
				surface[1][j][1]=surface[5][j][1];
				surface[5][j][1]=surface[2][10-j][1];
				surface[2][10-j][1]=surface[6][j][1];
				surface[6][j][1]=col;
			
			}
		}
		
		var time =setTimeout(function(){local()},500);

		var time1 =setTimeout(function(){htmldiv()},500);
		
	}
	// 側面轉動的顏色跳轉
    function topcolor1(i){
    	var col =surface[i][1][1];
    	var row=surface[i][2][1];
    	surface[i][1][1]=surface[i][3][1];
    	surface[i][3][1]=surface[i][9][1];
    	surface[i][9][1]=surface[i][7][1];
    	surface[i][7][1]=col;
    	surface[i][2][1]=surface[i][6][1];
    	surface[i][6][1]=surface[i][8][1];
    	surface[i][8][1]=surface[i][4][1];
    	surface[i][4][1]=row;

    }
	function topcolor2(i){
		var col=surface[i][1][1];
		var row=surface[i][2][1];
		surface[i][1][1]=surface[i][7][1];
		surface[i][7][1]=surface[i][9][1];
		surface[i][9][1]=surface[i][3][1];
		surface[i][3][1]=col;
		surface[i][2][1]=surface[i][4][1];
		surface[i][4][1]=surface[i][8][1];
		surface[i][8][1]=surface[i][6][1];
		surface[i][6][1]=row;
	
	}
	//魔方左右兩面的轉動,
	function changlocalY1(sfj,sfi){
		if(my<0){

			if(sfi==4||sfi==3){
			$("#back").css("-webkit-transform","rotateZ(-90deg) translateX(-50px) translateY(-50px) ");
			topcolor2(2);
			}
			
			for(var j=sfj;j<=9;j+=3){
				var k =j/3;
				$("#sf5-"+k).css("-webkit-transform",surface[5][k][2].replace("deg)","deg) rotateY(-90deg)")+" translateZ(150px)");
				$("#sf6-"+(10-k)).css("-webkit-transform",surface[6][10-k][2].replace("deg)","deg) rotateY(90deg)") +" translateZ(150px)");
				$("#sf4-"+j).css("-webkit-transform",surface[4][j][2].replace("deg)","deg) rotateX(90deg)")+" translateZ(150px)");
				$("#sf3-"+(10-j)).css("-webkit-transform",surface[3][10-j][2].replace("deg)","deg) rotateX(-90deg)")+" translateZ(150px)");		
				
				
//				
			var col=surface[4][j][1];
			surface[4][j][1]=surface[6][10-k][1];
			surface[6][10-k][1]=surface[3][10-j][1];
			surface[3][10-j][1]=surface[5][k][1];
			surface[5][k][1]=col;
//			
			
			}
			
		}
		else{
			if(sfi==4||sfi==3){
			$("#back").css("-webkit-transform","rotateZ(90deg) translateX(50px) translateY(-50px)");
			topcolor1(2);
			}
			
			
			for(var j=sfj;j<=9;j+=3){
				var k=j/3;
				$("#sf5-"+k).css("-webkit-transform",surface[5][k][2].replace("deg)","deg) rotateY(90deg)")+" translateZ(150px)");
				$("#sf6-"+(10-k)).css("-webkit-transform",surface[6][10-k][2].replace("deg)","deg) rotateY(-90deg)") +" translateZ(150px)");
				$("#sf4-"+j).css("-webkit-transform",surface[4][j][2].replace("deg)","deg) rotateX(-90deg)")+" translateZ(150px)");
				$("#sf3-"+(10-j)).css("-webkit-transform",surface[3][10-j][2].replace("deg)","deg) rotateX(90deg)")+" translateZ(150px)");		
					
				var col=surface[4][j][1];
				surface[4][j][1]=surface[5][k][1];
				surface[5][k][1]=surface[3][(10-j)][1];
				surface[3][10-j][1]=surface[6][(10-k)][1];
				surface[6][(10-k)][1]=col;
			
			}
		}
		
		var time =setTimeout(function(){local()},500);

		var time1 =setTimeout(function(){htmldiv()},500);
		
	}
	
	function changlocalY2(sfj,sfi){
		if(my<0){
		
			if(sfi==4||sfi==3){
				$("#front").css("-webkit-transform","rotateZ(-90deg) translateX(-50px) translateY(-50px)");
				topcolor1(1);
			}
			for(var j=sfj;j<=3;j++){
				var k =j*3;
				
				$("#sf5-"+(10-j)).css("-webkit-transform",surface[5][10-j][2].replace("deg)","deg) rotateY(-90deg)")+" translateZ(150px)");
				$("#sf6-"+j).css("-webkit-transform",surface[6][j][2].replace("deg)","deg) rotateY(90deg)") +" translateZ(150px)");
				$("#sf4-"+(10-k)).css("-webkit-transform",surface[4][10-k][2].replace("deg)","deg) rotateX(90deg)")+" translateZ(150px)");
				$("#sf3-"+k).css("-webkit-transform",surface[3][k][2].replace("deg)","deg) rotateX(-90deg)")+" translateZ(150px)");		
				
				
//				
			var col=surface[4][10-k][1];
			surface[4][10-k][1]=surface[6][j][1];
			surface[6][j][1]=surface[3][k][1];
			surface[3][k][1]=surface[5][10-j][1];
			surface[5][10-j][1]=col;
//			
			
			}
			
		}
		else{
			
			if(sfi==4||sfi==3){
				$("#front").css("-webkit-transform","rotateZ(90deg) translateX(50px) translateY(-50px)");
				topcolor2(1);
			}
			
			for(var j=sfj;j<=3;j++){
				var k=j*3;
				$("#sf5-"+(10-j)).css("-webkit-transform",surface[5][10-j][2].replace("deg)","deg) rotateY(90deg)")+" translateZ(150px)");
				$("#sf6-"+j).css("-webkit-transform",surface[6][j][2].replace("deg)","deg) rotateY(-90deg)") +" translateZ(150px)");
				$("#sf4-"+(10-k)).css("-webkit-transform",surface[4][10-k][2].replace("deg)","deg) rotateX(-90deg)")+" translateZ(150px)");
				$("#sf3-"+k).css("-webkit-transform",surface[3][k][2].replace("deg)","deg) rotateX(90deg)")+" translateZ(150px)");			
					
				var col=surface[4][10-k][1];
				surface[4][10-k][1]=surface[5][10-j][1];
				surface[5][10-j][1]=surface[3][k][1];
				surface[3][k][1]=surface[6][j][1];
				surface[6][j][1]=col;
			
			}
		}
		
		var time =setTimeout(function(){local()},500);

		var time1 =setTimeout(function(){htmldiv()},500);		
	}
	function changlocalY3(sfj,sfi){
		if(my<0){
			var k =2*sfj;
			for(var j=sfj;j<=9;j+=3){
				
				$("#sf5-"+k).css("-webkit-transform",surface[5][k][2].replace("deg)","deg) rotateY(-90deg)")+" translateZ(150px)");
				$("#sf6-"+(10-k)).css("-webkit-transform",surface[6][10-k][2].replace("deg)","deg) rotateY(90deg)") +" translateZ(150px)");
				$("#sf4-"+j).css("-webkit-transform",surface[4][j][2].replace("deg)","deg) rotateX(90deg)")+" translateZ(150px)");
				$("#sf3-"+(10-j)).css("-webkit-transform",surface[3][10-j][2].replace("deg)","deg) rotateX(-90deg)")+" translateZ(150px)");		
				
			var col=surface[4][j][1];
			surface[4][j][1]=surface[6][10-k][1];
			surface[6][10-k][1]=surface[3][10-j][1];
			surface[3][10-j][1]=surface[5][k][1];
			surface[5][k][1]=col;
		
			k++;
			
			}
			
		}
		else{
			var k=sfj*2;
			for(var j=sfj;j<=9;j+=3){
				
				$("#sf5-"+k).css("-webkit-transform",surface[5][k][2].replace("deg)","deg) rotateY(90deg)")+" translateZ(150px)");
				$("#sf6-"+(10-k)).css("-webkit-transform",surface[6][10-k][2].replace("deg)","deg) rotateY(-90deg)") +" translateZ(150px)");
				$("#sf4-"+j).css("-webkit-transform",surface[4][j][2].replace("deg)","deg) rotateX(-90deg)")+" translateZ(150px)");
				$("#sf3-"+(10-j)).css("-webkit-transform",surface[3][10-j][2].replace("deg)","deg) rotateX(90deg)")+" translateZ(150px)");				
					
				var col=surface[4][j][1];
				surface[4][j][1]=surface[5][k][1];
				surface[5][k][1]=surface[3][10-j][1];
				surface[3][10-j][1]=surface[6][10-k][1];
				surface[6][10-k][1]=col;
			k++;
			}
		}
		
		var time =setTimeout(function(){local()},500);

		var time1 =setTimeout(function(){htmldiv()},500);		
	}
});