用Javascript编写魔方程序

最新推荐文章于 2024-07-23 16:07:13 发布
最新推荐文章于 2024-07-23 16:07:13 发布
阅读量2.5k 收藏 7
点赞数 2
分类专栏： javascript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ldy889/article/details/88884792
版权

1、先测试下显示魔方（css 3D） （已完成）

2、滚动。（已完成）

3、打乱。（创建数组。。）

4、操作。

5、记录。

6、自动还原。

7、优化。

那就开始吧。 

先初始化一个魔方： 

 

然后，你可以开始旋转看看，rotateY(210deg);你会发现这不是我们想要的。

rotateY是以当前面的中心线为轴进行旋转，而我们希望这个面以立方体的中心线为轴进行旋转。

 

终于调整到正确。代码如下。

 

 

 

<!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; 　
}
 

  
</style>
<script type="text/javascript">
	$(function (argument) {
		 $(".aside div").css("background","green");
		 $(".bside div").css("background","yellow");
		 $(".cside div").css("background","red");
		 $(".dside div").css("background","blue");
		 $(".eside div").css("background","white");
		 $(".fside div").css("background","pink");
		 $(".aside").css("transform","translateZ(90px) translateZ(-18px) ");
		 $(".bside").css("transform","translateZ(-90px) translateX(-18px) rotateY(180deg)");
		 $(".cside").css("transform","rotateY(-90deg)");
		 $(".dside").css("transform","translateX(0px) translateZ(-20px)   rotateY(90deg) ");
		 $(".eside").css("transform","rotateX(90deg)");
		 $(".fside").css("transform","translateZ(-18px) rotateX(-90deg)");
		  $(".cside").css("left","-90px"); 
		 $(".dside").css("left","72px");
		 $(".eside").css("top","-90px");
		 $(".fside").css("top","72px");
		  $(".content").css("transform","rotateX(156deg) rotateY(151deg) rotateZ(183deg)");
		  // $(".content").css("transform","rotateY(180deg)");

		 //  $(".aside").css("transform","translateX(-20px) translateY(-20px)  translateZ(-90px) rotateY(20deg) rotateZ(0deg) rotateX(-20deg)");
		 // $(".bside").css("transform","translateX(-75px) translateZ(90px) rotateY(110deg) rotateZ(-20deg)");
		 // $(".cside").css("transform","translateZ(0px) translateY(90px) rotateY(20deg) rotateX(70deg)");
		 // $(".dside").css("transform","translateZ(120px) translateX(40px) translateY(32px) rotateY(20deg) rotateX(-20deg)");
		 // $(".eside").css("transform","translateZ(90px) translateX(20px) translateY(-83px) rotateX(69deg) rotateZ(-18deg) rotateY(7deg)");
		 // $(".fside").css("transform","translatex(-90px) translatez(90px) rotatey(90deg)");
	});
</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个面，类名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>
</html>

然后我让它转动起来，玩了一下，明天再看看怎么把数据绑定上去。

<!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; 　
}
 
.rightarraw{
	background-image: url(/assets/img/jt.png);
    width: 62px;
    height: 50px;
    background-repeat: round;
    position: absolute;
    top: 115px;
    left: 323px;
    transform:rotateX(30deg);
}
  
</style>
<script type="text/javascript">
	$(function (argument) {
		 $(".aside div").css("background","green");
		 $(".bside div").css("background","yellow");
		 $(".cside div").css("background","red");
		 $(".dside div").css("background","blue");
		 $(".eside div").css("background","white");
		 $(".fside div").css("background","pink");
		 $(".aside").css("transform","translateZ(90px) translateZ(-18px) ");
		 $(".bside").css("transform","translateZ(-90px) translateX(-18px) rotateY(180deg)");
		 $(".cside").css("transform","rotateY(-90deg)");
		 $(".dside").css("transform","translateX(0px) translateZ(-20px)   rotateY(90deg) ");
		 $(".eside").css("transform","rotateX(90deg)");
		 $(".fside").css("transform","translateZ(-18px) rotateX(-90deg)");
		  $(".cside").css("left","-90px"); 
		 $(".dside").css("left","72px");
		 $(".eside").css("top","-90px");
		 $(".fside").css("top","72px");
		  $(".content").css("transform","rotateX(156deg) rotateY(151deg) rotateZ(183deg)");
		  // $(".content").css("transform","rotateY(180deg)");

		 //  $(".aside").css("transform","translateX(-20px) translateY(-20px)  translateZ(-90px) rotateY(20deg) rotateZ(0deg) rotateX(-20deg)");
		 // $(".bside").css("transform","translateX(-75px) translateZ(90px) rotateY(110deg) rotateZ(-20deg)");
		 // $(".cside").css("transform","translateZ(0px) translateY(90px) rotateY(20deg) rotateX(70deg)");
		 // $(".dside").css("transform","translateZ(120px) translateX(40px) translateY(32px) rotateY(20deg) rotateX(-20deg)");
		 // $(".eside").css("transform","translateZ(90px) translateX(20px) translateY(-83px) rotateX(69deg) rotateZ(-18deg) rotateY(7deg)");
		 // $(".fside").css("transform","translatex(-90px) translatez(90px) rotatey(90deg)");
		 // 
		 
	  	  console.log(".");
       
		 
 
		 $(".minibox").on("click", function(){
		 	var x=parseInt($("#datax").html())+5;
		 	var y=parseInt($("#datay").html())+5;
		 	var z=parseInt($("#dataz").html())+5;
		 	   $(".content").css("transform", "rotateX("+x+"deg) rotateY("+y+"deg) rotateZ("+z+"deg)");
			  $("#datax").html(x); $("#datay").html(y); $("#dataz").html(z);
			});
	});

	setInterval(function function_name(argument) {
		 var x=parseInt($("#datax").html())+1;
		 	var y=parseInt($("#datay").html())+2;
		 	var z=parseInt($("#dataz").html())+3;
		 	   $(".content").css("transform", "rotateX("+x+"deg) rotateY("+y+"deg) rotateZ("+z+"deg)");
			  $("#datax").html(x); $("#datay").html(y); $("#dataz").html(z);
			 
	},10);

	 
	  
</script>
</head>
<body>

 
<div id="datax">156</div><div id="datay">151</div><div id="dataz">183</div>

<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>	

<div class="rightarraw"></div> 
</body>
</html>

 

东宇科技
关注
专栏目录
原生JS实现魔方效果
越陌度阡
04-03 1330
给大家分享一个用原生JS实现的魔方效果，效果如下： 以下是代码实现： <!DOCTYPE html> <html> <head> <title>原生JS实现魔方效果</title> <meta charset="utf-8"> <style type="text/css"> .........
Java编写的网页版魔方游戏.zip
08-28
【Java编写的网页版魔方游戏】 在编程领域，Java是一种广泛应用的高级编程语言，以其“一次编写，到处运行”的特性而闻名。本项目“Java编写的网页版魔方游戏”是一个利用Java技术实现的在线游戏，玩家可以在浏览器...
魔方代码 纯JS版
06-16
魔方代码 魔方 代码 GOOGLE 上很辛苦弄出来地。 已经去掉多余代码。已经很纯洁了。
用Javascript编写魔方程序（完整版续）
琼楼玉宇
03-17 393
第一步是底部棱块归位。 function s1_xiaobai(argument) { var times = 10 ; for (var i = 0; i < times; i++) { step1(); } } var step1_times = 0 // 找到底层白色做成底层十字，俗称小白花 function step1(argument) {...
魔方游戏程序设计
最新发布
baidu_41801770的博客
07-23 621
游戏的图形界面的是用简单的C语言编制的，全是用编译器绘图方法绘制的。接下来有易于记忆的ABCD 4个公式，上层十字用A 公式，顶面同色用B C 公式，六面同色用D公式。演示套用说明书经典公式，即六步公式：上层四棱，上层四角，翻转，二层四棱，上层十字，顶面同色，六面同色。魔方游戏是个经典的游戏，在当前AI人工智能发展的大好形势下，机器人还原魔方成为一个很好的课题。手机魔方游戏我见过国外编的仿3D动画式的游戏，用手指滑动旋转操作，蛮酷的。Formula();
js旋转魔方
03-04
旋转正方体（大立方体内有一个小立方体，每个面的图片需要重新引用），鼠标悬停有特效。
25three.js开发魔方（一）
X01动力装甲的专栏
05-01 938
Three.js开发的三阶魔方，手机也可以体验。 演示地址：http://www.websql.xyz/projects/mofang/mofang1.html
原生javascript+css3编写的3D魔方动画旋扭特效_.docx
10-09
### 原生JavaScript + CSS3编写的3D魔方动画旋扭特效解析 #### 一、概述 本文档详细介绍了如何使用原生JavaScript与CSS3来构建一个3D魔方动画旋扭特效。该技术栈允许开发者创建复杂的交互式Web体验而无需依赖额外...
Java编写的网页版魔方游戏.7z
07-06
本篇文章将深入探讨一个特殊的项目——用Java编写的网页版魔方游戏。这个项目结合了Java语言的强大功能和网页技术，为用户提供了互动式的魔方体验。 首先，我们要明白，Java是一种跨平台的编程语言，其“一次编写，...
JAVA源码Java编写的网页版魔方游戏
05-03
- **Spring Boot框架**：现代Java Web开发中的重要工具，简化了开发流程，提供了快速构建服务端应用程序的方法。 #### 2. Java Web游戏的特点 - **跨平台性**：由于Java语言本身的特点，基于Java开发的游戏可以在...
基于Java的实例源码-编写的网页版魔方游戏.zip
06-28
这个项目可能使用了Java Servlet、JavaServer Pages (JSP)、JavaScript以及HTML和CSS来实现一个交互式的网页界面，让玩家可以在浏览器上体验魔方的乐趣。 在Java Web开发中，Servlet是服务器端的Java应用程序，它...
魔方源码（基于threejs）
08-08
纯threejs 制作的魔方
three.js 如何制作魔方
11-20
因为之前的几节讲了一些数学方法，例如Vector3、Matrix4、Euler还有Quaternion的知识。所以这篇郭先生就来说说用three.js怎么制作一个魔方。 制作魔方主要运用坐标变换的知识，制作魔方的方法有很多，建议你先在大脑中构思，然后试着做一做，下面我将一种比较简单的方法。 制作出魔方各个方块的位置坐标（27个）的数组，然后制作出魔方各个面的材质（6个） 根据坐标和材质制作魔方的方块，并添加到一个组group 制作一个标志被选面的几何体（我是用球体），然后隐藏 使用THREE.Raycaster，给模型绑定事件，并记录选定的一些数据，将标志显示并放到合适的位置
Three.js实现的魔方
05-17
三阶魔方，用threejs实现，用鼠标控制旋转。  
抖音超火❤ html+css+js 实现炫酷3D魔方
12-29
抖音超火❤ html+css+js 实现炫酷3D魔方https://blog.csdn.net/qq316148300/article/details/111934087
用Javascript编写魔方程序（完整版）
琼楼玉宇
03-09 3527
新建立一个html页面。body里面加如下代码。写好六个面。 <body> <div class="container"> <div class="box"> <div class="content"> <div class="aside face"> <!--魔方第一个面，类名aside-->...
用Javascript编写魔方程序（完整版续-源码）
琼楼玉宇
03-18 570
java源码，就一个文件。你放到桌面就可以运行。程序内置彩蛋一枚。 <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable...
JS实现旋转的魔方
weixin_30814329的博客
07-26 550
js <script> window.onload = function () { let cube = document.querySelector('.cube') let timer = null let x = 0; y = 0; function rotate() { ...
three.js 制作魔方
weixin_45032957的博客
07-27 646
定义的变量 复制代码 posArr = [ [100,100,100],[100,100,0],[100,100,-100],[100,0,100],[100,0,0],[100,0,-100],[100,-100,100],[100,-100,0],[100,-100,-100], [0,100,100],[0,100,0],[0,100,-100],[0,0,100],[0,0,0],[0,0,-100],[0,-100,100],[0,-100,0],[0,-100,-100], [-100,100,
JavaScript编写Web程序
05-21
下面是使用 JavaScript 编写 Web 程序的基本步骤： 1. 在 HTML 页面中嵌入 JavaScript 代码：可以使用 `<script>` 标签来嵌入 JavaScript 代码。这些代码可以放在 HTML 页面的 `<head>` 或者 `<body>` 标签中。例如...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

东宇科技

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值