3D魔方小游戏(附源码)

简介: 一说到魔方 想必大家都熟悉的不能再熟悉了 自己或者曾今自己的朋友非常喜欢玩的一款游戏 言归正卷 那么实用前端的技术怎么实现3D的魔方制作呢 从以下几个方面就不难发现 前端实现3D魔方都得需要用上这些技术栈

一、案例效果图

效果图是最能表明一个事务的结果性 也能第一时间了解到我们要达成的目的

mofang.gif

二、魔方的思路

1、先将平面上的6个DIV拼接在一起。形成一张类似于3d立方体图形展开的平面图。

a123.png

2、我们需要将每一个面旋转到相应的位置上,每一个面的旋转轴都是不一样的。上下,左右,分别对应的旋转轴,以及旋转角度分别是:bottom(90deg),top(-90deg),right(90deg),left(-90deg)。同时要注意在旋转后面的时候,旋转轴为Z轴,并不是上下,左右边。浏览器上面的坐标系是这样的:Z轴是屏幕里外两个方向(向外为正,向里为负),X轴的水平方向(向右为正,向左为负);
3、接下来还有一个关键的步骤,就是当变换导致元素在 3D 空间中旋转时,指定当元素背面朝向观察者时不可见;

a1234.png

4、接下来我们要做的就是设置一下所处环境,我们要设置成3D的环境,具体的语法形式如下:transform-style: preserve-3d;
5、然后我们为了让立方体旋转起来,以便更好的实现3D效果。首先找到旋转中心,在3D魔方中,旋转中心就是立方体的几何中心。

三、魔方实现目录

a4.png

从上面的目录也不难看出 我们所需要的一些公共的js和css文件还是挺多的 在此我就不一一列举了 需要的可以 前往传送门获取测试 传送门

四、魔方核心代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
    <meta name="description" content="Rubik’s Cube">
    <meta name="keywords" content="Erno Rubik’s Cube">
    <link rel="stylesheet" type="text/css" href="css/cube.css">
    <link rel="stylesheet" type="text/css" href="css/base.css">
    <link rel="icon" type="image/png" href="img/cuber-favicon-0064x0064.png">
    <link rel="apple-touch-icon" href="img/cuber-favicon-0144x0144.png">

    <title>Cuber</title>

    <script charset="utf-8" src="js/tween.min.js"></script>

    <!--  Three.js  -->
    <script charset="utf-8" src="js/Three.js"></script>
    <script charset="utf-8" src="js/EventDispatcher.js"></script>
    <script charset="utf-8" src="js/Math.js"></script>
    <script charset="utf-8" src="js/Quaternion.js"></script>
    <script charset="utf-8" src="js/Vector2.js"></script>
    <script charset="utf-8" src="js/Vector3.js"></script>
    <script charset="utf-8" src="js/Box3.js"></script>
    <script charset="utf-8" src="js/Sphere.js"></script>
    <script charset="utf-8" src="js/Euler.js"></script>
    <script charset="utf-8" src="js/Matrix3.js"></script>
    <script charset="utf-8" src="js/Matrix4.js"></script>
    <script charset="utf-8" src="js/Object3D.js"></script>
    <script charset="utf-8" src="js/Camera.js"></script>
    <script charset="utf-8" src="js/PerspectiveCamera.js"></script>
    <script charset="utf-8" src="js/Ray.js"></script>
    <script charset="utf-8" src="js/Plane.js"></script>


    <!--  Here are the Cube guts. Enjoy.  -->
    <script charset="utf-8" src="js/ERNO.js"></script>
    <script charset="utf-8" src="js/CSS3DRenderer.js"></script>
    <script charset="utf-8" src="js/utils.js"></script>
    <script charset="utf-8" src="js/Number.js"></script>
    <script charset="utf-8" src="js/String.js"></script>
    <script charset="utf-8" src="js/Array.js"></script>
    <script charset="utf-8" src="js/colors.js"></script>
    <script charset="utf-8" src="js/directions.js"></script>
    <script charset="utf-8" src="js/queues.js"></script>
    <script charset="utf-8" src="js/twists.js"></script>
    <script charset="utf-8" src="js/cubelets.js"></script>
    <script charset="utf-8" src="js/groups.js"></script>
    <script charset="utf-8" src="js/slices.js"></script>
    <script charset="utf-8" src="js/folds.js"></script>
    <script charset="utf-8" src="js/projector.js"></script>
    <script charset="utf-8" src="js/interaction.js"></script>
    <script charset="utf-8" src="js/controls.js"></script>
    <script charset="utf-8" src="js/cubes.js"></script>
    <script charset="utf-8" src="js/solvers.js"></script>
    <script charset="utf-8" src="js/renderer.js"></script>

    <script charset="utf-8" src="js/jquery.js"></script>
    <script charset="utf-8" src="js/iecss3d.js"></script>
    <script charset="utf-8" src="js/ierenderer.js"></script>
    <script charset="utf-8" src="js/locked.js"></script>
    <script charset="utf-8" src="js/deviceMotion.js"></script>
    <script charset="utf-8" src="js/main.js"></script>

</head>

<body class="graydient">
    <div id="container"></div>
    <div id="fail">
        <h1>Sorry,</h1>
        <h2>Cubers broken</h2>
    </div>
</body>

</html>
相关文章
|
JavaScript 前端开发 Linux
QCefView初步使用
QCefView初步使用
835 0
|
算法 定位技术
八爪鱼RPA在微信的十大高频场景,让你的工作事半功倍!
在微信中,rpa(机器人流程自动化)技术可以应用于各种情况,为用户提供更高效、便捷的工作体验。本文将介绍微信中的十大高频场景,并说明rpa可以如何应用于这些场景中,从而让工作事半功倍。
|
人工智能 自然语言处理 Java
使用通义灵码插件提高开发效率
【2月更文挑战第2天】 通义灵码是阿里云开发的一个编码助手,基于AI大模型,提供代码智能生成,智能问答等功能,旨在加快编码,提高开发效率。
1919 3
使用通义灵码插件提高开发效率
|
12月前
|
移动开发 JavaScript 前端开发
💻揭秘!如何用 Vue 3 实现酷炫的色彩魔方游戏✨
本文分享了开发基于Canvas技术的小游戏"色彩魔方挑战"的完整过程。游戏旨在考验玩家的观察力和耐心,通过随机生成的颜色矩阵和一个变化点,玩家需在两幅画布中找出不同的颜色点。文章详细讲解了游戏的核心功能,包括随机颜色矩阵生成、点的闪烁提示、自定义配色方案等。此外,作者展示了使用Vue 3和TypeScript开发的代码实现,带领读者一步步深入了解游戏的逻辑与细节。
343 69
|
开发框架 .NET 中间件
C#/.NET快速上手学习资料集(让现在的自己不再迷茫)
C#/.NET快速上手学习资料集(让现在的自己不再迷茫)
373 8
|
11月前
|
存储 数据可视化 定位技术
如何高效管理远程团队?2024年最佳免费工作协作工具排行榜
随着远程工作日益普遍,选择合适的协作工具成为提升团队效率的关键。本文介绍了7款优秀的免费远程协作工具,包括板栗看板、Wrike、Miro、ClickUp、Zoho Projects、MeisterTask和Quire,它们各自具备独特优势,如项目管理、任务跟踪、文件共享及实时协作等功能,适用于不同规模和需求的团队,帮助实现高效远程工作。
如何高效管理远程团队?2024年最佳免费工作协作工具排行榜
|
12月前
|
Kubernetes 架构师 Java
史上最全对照表:大厂P6/P7/P8 职业技能 薪资水平 成长路线
40岁老架构师尼恩,专注于帮助读者提升技术能力和职业发展。其读者群中,多位成员成功获得知名互联网企业的面试机会。尼恩不仅提供系统化的面试准备指导,还特别针对谈薪酬环节给予专业建议,助力求职者在与HR谈判时更加自信。此外,尼恩还分享了阿里巴巴的职级体系,作为行业内广泛认可的标准,帮助读者更好地理解各职级的要求和发展路径。通过尼恩的技术圣经系列PDF,如《尼恩Java面试宝典》等,读者可以进一步提升自身技术实力,应对职场挑战。关注“技术自由圈”公众号,获取更多资源。
|
12月前
|
开发框架 Java 开发者
processing完整教程
本文提供了一个关于Processing的完整教程,包括下载、启动Processing、基本编程示例、颜色使用以及如何打印调试信息,适合初学者快速上手Processing编程。
1243 2
|
开发框架 前端开发 .NET
VB.NET中如何利用ASP.NET进行Web开发
在VB.NET中利用ASP.NET进行Web开发是一个常见的做法,特别是在需要构建动态、交互式Web应用程序时。ASP.NET是一个由微软开发的开源Web应用程序框架,它允许开发者使用多种编程语言(包括VB.NET)来创建Web应用程序。
260 7
|
Linux Windows
程序技术好文:键盘键码对照
程序技术好文:键盘键码对照
1348 0