三阶魔方 js

最新推荐文章于 2024-05-14 22:45:25 发布
最新推荐文章于 2024-05-14 22:45:25 发布
阅读量1.9k 收藏 2
点赞数
分类专栏： java 文章标签： 三阶魔方 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kulefeng/article/details/53560538
版权

本文三阶魔方的实现利用到了 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);		
	}
});


kulkkkk
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用Javascript编写魔方程序（完整版）
琼楼玉宇
03-09 3484
新建立一个html页面。body里面加如下代码。写好六个面。 <body> <div class="container"> <div class="box"> <div class="content"> <div class="aside face"> <!--魔方第一个面，类名aside-->...
【无标题】用Javascript编写魔方程序(详解）2023-7-4
琼楼玉宇
07-04 594
第一步，先初始化魔方，如上图，可以很直观的看到魔方的6个面。
2024年最新HTML+CSS实战操作旋转魔方(3)，最新2024年Web前端大厂面试经验
最新发布
2401_84619986的博客
05-14 389
前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。但是，Flex布局就可以避免这种情况：Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。以 Vue 为例，我整理了如下的面试题。
js和css3实现动态魔方的效果
~~~
10-26 2552
主要是利用css3动画和js实现了一个动态的魔方效果。
用Javascript编写魔方程序（完整版续）
琼楼玉宇
03-17 384
第一步是底部棱块归位。 function s1_xiaobai(argument) { var times = 10 ; for (var i = 0; i < times; i++) { step1(); } } var step1_times = 0 // 找到底层白色做成底层十字，俗称小白花 function step1(argument) {...
html+css+js实现的3D魔方小游戏源代码
Python代码大全
03-18 4019
采用html+css+js，双击网页开始游戏，双击后3D魔方进行随机打乱，通过鼠标来操作3D魔方，并能对魔方复位时间进行记录，来挑战自己吧，看看你要多长时间
html三阶魔方
12-10
【HTML三阶魔方】是一种使用HTML和JavaScript技术来模拟真实世界中三阶魔方的游戏或教学工具。这个项目的核心目标是通过网页交互，让用户能够旋转各个面，体验解魔方的过程，同时提供可能的解决方案或者算法。接下来...
三阶魔方html
12-10
在Web开发领域，利用HTML和JavaScript技术可以创建各种交互式的用户体验，其中包括模拟实物玩具，比如我们熟知的三阶魔方。本篇将深入探讨如何利用这两种技术来实现一个虚拟的三阶魔方，并涵盖以下几个关键知识点： ...
javascript解三阶幻方（九宫格）
10-24
本文给大家分享的是使用javascript实现解答九宫格问题的算法，非常的简单实用，有需要的小伙伴可以参考下。
Three.js实现的魔方
05-17
本项目是利用Three.js技术实现了一个互动的三阶魔方，用户可以通过鼠标操作来控制魔方的旋转，体验三维空间中的魔方解谜乐趣。 【描述】： 这个项目的核心在于将传统的实体魔方转化为数字形式，并在网页上通过交互...
魔方代码 纯JS版
06-16
魔方代码 魔方 代码 GOOGLE 上很辛苦弄出来地。 已经去掉多余代码。已经很纯洁了。
三维立体三阶魔方复原
10-08
三维立体魔方，带解法，和转动 可以轻松解决问题
java 三维数组 魔方_三维数组的横向/纵向输出
weixin_39679091的博客
03-02 523
哈哈,对于三维数组,可以想象成一个魔方(立方体).这个立方体由每层->每层的每行->每层的每行的每列组成.要实现三位数组横向/纵向的输出,需要遍历每个元素进行输出.假设数组arrray[ ][ ][ ],共3^3=27个元素,分别为0～26.代码及解释如下:class MultiArray{public static void main(String[] xargs){int[][][...
js实现魔方
tao__f的博客
09-10 519
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>魔方</title> <style> *{ paddi
HTML5七夕情人节表白结婚邀请函网页制作(HTML+CSS+JavaScript)
HTML网页设计 专注大学生网页设计
09-25 6506
📒网站文件方面：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；📙网页编辑方面等任意html编辑软件进行运行及修改编辑等操作）。其中：（1）📜html文件包含：其中index.html是首页、其他html为二级页面；（2）📑 css文件包含：css全部页面样式,3D动态效果,雪花飘落等等（3）📄 js文件包含：页面炫酷效果实现。
用Javascript编写魔方程序
琼楼玉宇
03-29 2542
1、先测试下显示魔方（css 3D） （已完成） 2、滚动。（已完成） 3、打乱。（创建数组。。） 4、操作。 5、记录。 6、自动还原。 7、优化。 那就开始吧。 先初始化一个魔方： 然后，你可以开始旋转看看，rotateY(210deg);你会发现这不是我们想要的。 rotateY是以当前面的中心线为轴进行旋转，而我们希望这个面以立方体的中心线为轴进行旋转。 ...
Three.js之新手初学——构建魔方
ll19930120的专栏
04-10 7232
Three.js之新手初学——构建魔方本人新手，第一次写blog。高手轻喷，新手共勉。效果展示例子：http://llwmj.tk/threejs/cube/groupcube/ Three.js入门步骤就不重新赘述了，网上有很多入门篇。 一般包括： 1.设置three.js渲染器 2.设置摄像机camera 3.设置场景scene
【HTML5】3D模型--百行代码实现旋转立体魔方
web开发自学
06-12 900
最近研究魔方的玩法，就突然想用HMTL5写一个魔方的模型，由于魔方是一个3D的立方体，这次就试着用HTML5写了一个简单的3D模型。 下面是测试链接和预览画面。 http://lufy.netne.net/lufylegend-js/lufylegend-1.4/Rubik/index.html 制作流程 首先你需要下载html5开源库件lufylegend-1.4.0 http://blog...
matlab三阶魔方
12-15
以下是MATLAB编写的三阶魔方程序的介绍和演示： 1. 介绍 该程序是基于MATLAB编写的三阶魔方程序，可以实现魔方的还原和打乱操作。该程序使用了魔方还原的经典方法，即CFOP法，其中CFOP分别表Cross（十字）、F2L...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值