用Javascript编写魔方程序

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>

用Javascript编写魔方程序相关推荐

python代替javascript_Pyjamas - 用python代替javascript编写基于浏览器的应用
如果能用python代替Javascript编写基于浏览器的应用,该有多好啊.但是,Javascript是唯一一种能在浏览器里执行的语言(Flash或Silverlight除外).换个思路,先用Pyt ...
使用 javaScript 编写倒计时小程序，到时提交表单
使用 javaScript 编写倒计时小程序,到时提交表单 <script type="text/javascript">var countdown = 10; // ...
【JavaScript编写计算工资小程序】【表格细边框设置】【网页设计与网站开发HTML、CSS、JavaScript实例教程】【第十章】JavaScript基础——【传智播客】实验作业题【实验5】
以下为本人大一选修课<网页设计与网站开发>的实验作业题,均为本人原创,分享给大家.如有不足之处欢迎指出. 1.题目: 实验5.新建页面test5.html,利用JavaScript编写如下 ...
纯javascript代码编写计算器程序
今天来分享一下用纯javascript代码编写的一个计算器程序,很多行业都能用到这个程序,例如做装修预算.贷款利率等等. 首先来看一下完成后的效果: 具体代码如下:(关注我的博客,及时获取最新WEB前 ...
javascript编写_用JavaScript深入探讨：为什么对编写好的代码至关重要。
javascript编写 Using simple terminology and a real world example, this post explains what this is and ...
这两天发现一个老外用JavaScript编写的好东西：dp.SyntaxHighlighter。
dp.Synta 来源http://blog.s135.com/post/226/ r介绍:在网页中加亮显示源代码的工具[原创] 大 | 中 | 小 [ 2007-4-19 14:56 | by ...
python语言的解释性特点指的是编写的程序不需要编译_解释性与编译型 Python2和python3的区别...
一基础: 1.解释型语言与编译型语言的区别首先,我们编程都是用的高级语言(写汇编和机器语言的大牛除外),计算机不能直接理解高级语言,只能理解和运行机器语言,所以必须要把高级语言翻译成机器语言,计算 ...
c语言100以内奇数的和为多少,编写C#程序，计算100以内所有奇数的和。谢谢了，大神帮忙啊...
编写C#程序,计算100以内所有奇数的和.谢谢了,大神帮忙啊以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧! 编写C#程序 ...
JavaScript编写了一个计时器
初学JavaScript,用JavaScript编写了一个计时器. 设计思想: 1.借助于Date()对象,来不断获取时间点: 2.然后用两次时间点的毫秒数相减,算出时间差: 3.累加时间差,这样就能 ...

用Javascript编写魔方程序

用Javascript编写魔方程序相关推荐

最新文章

热门文章