三階魔方 js
阿新 • • 發佈：2018-12-22
本文三階魔方的實現利用到了 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); } });